javascript - 使用 onclick 事件使用页面中的数据填充表格中的单元格

标签 javascript jquery html

我试图在单击“执行”按钮时在页面下方的表格中显示已选择并生成的变量，以便用户可以跟踪其进度并下载从中提供的结果图像，但是我的 javascript 知识有限，无法做到这一点。

到目前为止我的代码是

$(document).ready(function() {
  //init data
  var arrayList = [{
      "Id": 0,
      "Name": "Select a target...",
    },
    {
      "Id": 1,
      "Name": "M15",
    },
    {
      "Id": 2,
      "Name": "M27"

    },
    {
      "Id": 3,
      "Name": "NGC891"
    }

  ];


  for (var i = 0; i <= arrayList.length; i++) {
    $('#choices').append('<option value="' + arrayList[i].Id + '">' + arrayList[i].Name + '</option>');
  }


});

$("#choices").change(function() {
  // $.getJSON("jsondata/data.json", function(data) {
  //use this if using external json sets

  var $selection = $("#choices option:selected");
  var key = $selection.val();

  var vals = [];

  $(".imghere").attr("src", "");

switch (key) {
    case '1':
      text: ["Please Select a Filter","Red (Rp)", "Green (V)", "Blue (B)"],
      vals = ["Please Select a Filter...","Red", "Green", "Blue"]; 
      $('#right').val('21:29:58.33');
      $('#desc').val('+12:10:01.2');
      break;
    case '2':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"];
      $('#right').val('19:59:36.34');
      $('#desc').val('+22:43:16.09');
      break;
    case '3':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"];
      $('#right').val('02:22:33.4');
      $('#desc').val('+42:20:57.0');
      break;
    case '0':
      vals = ['Please Select a Filter...'];
  }
  
  

  var $secondChoice = $("#filter");
  $secondChoice.empty();
  $.each(vals, function(index, value) {
    $secondChoice.append("<option>" + value + "</option>");
  });

});


$("#filter").change(function() {
  var $filter = $("#filter option:selected").val();
  var baseurl = "https://github.com/brychanjames/RTI-Simulator/blob/master/";
  var $showimg = baseurl + $filter + ".jpg";
  //$(".imghere").attr("src",$showimg); use this, the next line is demo purposes
  $(".imghere").attr("src", $showimg); /*use variable in place of the placeholder image*/


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<div class="form-group"><div class="row"><div class="col"><label for="target-list">Target Name:</label></div></div> 

<select id="choices" type="select" name="name" placeholder="Target Name" class="button form-control" aria-required="true" aria-invalid="false"></select>

<div class="alert alert-danger" style="display: none;"></div></div> 
<div class="form-group">
<label>Right Ascension:</label> <input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div> <div class="form-group"><label>Declination:</label> <input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div>

	 <div><label class="wrapper" for="states">Filter</label>
<select id="filter" type="select" name="name" placeholder="Target Name" class="button form-control" aria-required="true" aria-invalid="false">

      </select>


	 
	  <button type="button" class="btn btn-success btn-block">
              Go!
            </button></div> <div role="alert" class="alert alert-danger mt-3 invisible">

            
<table id="session-table"><thead><tr><th>Target Name</th> <th>Right Ascension</th> <th>Declination</th> <th>Exposure Time (sec)</th> <th>Filter</th> <th>Timestamp (UTC)</th> <th>Image type</th> <th></th> <th></th></tr></thead> 
	<tbody> <tr>   
      <td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
      <td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
      <td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>

      <td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>

      <td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
<tr>   
      <td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
      <td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
      <td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>

      <td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>

      <td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
<tr>   
      <td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
      <td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
      <td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>

      <td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
      <td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>

      <td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
    
</tbody></table></div>

我想显示已选择的目标名称和过滤器、目标的 RA 和 Dec 以及每次选择“执行”按钮时的日期/时间，该怎么做？

最佳答案

如果将有关球体的所有相关信息放入 arrayList，则渲染、添加事件和更改视觉效果的模式大部分保持不变:

您使用数组中正确的球体对象创建一些 HTML。 然后将其附加到正确的位置。如果您将单击和更改事件放在一个简单的位置，则以后无需更改或重新添加它们。

考虑到事件，结构也基本相同:您获取数组内相应项目的 id，以便您可以使用该项目执行下一步。这使得我们必须从 HTML 中获取的信息最少，这反过来意味着如果我们添加更多球体，我们不必更改 HTML。如果我们使用您最初使用的大小写语法，则每次添加另一个球体时都必须更改该大小写。

我将保留样式、完整的表结构并添加更多错误处理程序给您。很多事情都可以变得更加高效，您可以保存所有选择器，这样您就不必每次都从 DOM 中查询它们。或者使用状态对象来保存信息，例如当前选择的过滤器。但我想在这里展示基础知识。

const celestial_spheres = [
  {
    "id": 134578521,
    "name": "M15",
    "ascention": "21:29:58.33",
    "declination": "+12:10:01.2",
    "filters": [
      { "name": "red", "values": [ 1, 2, 3  ] },
      { "name": "green", "values": [ 4, 5, 6 ] },
      { "name": "blue", "values": [ 7, 8, 9 ] }
    ]
  },
  {
    "id": 21412155,
    "name": "M27",
    "ascention": "19:59:36.34",
    "declination": "+22:43:16.09",
    "filters": [
      { "name": "red", "values": [ 10, 11, 12 ] },
      { "name": "green", "values": [ 13, 14, 15 ] },
      { "name": "blue", "values": [ 16, 17, 18 ] }
    ]
  },
  {
    "id": 452456321347564364,
    "name": "NGC891",
    "ascention": "02:22:33.4",
    "declination": "+42:20:57.0",
    "filters": [
      { "name": "red", "values": [ 19, 20, 21 ] },
      { "name": "green", "values": [ 22, 23, 24 ] },
      { "name": "blue", "values": [ 25, 26, 27 ] }
    ]
  }
];

const sphere_options = spheres => spheres.map( sphere => `<option value="${ sphere.id }">${ sphere.name }</option>` ).join( '' );
const filter_options = filters => filters.map( filter => `<option value="${ filter.name }">${ filter.name }</option>` ).join( '' );
const sphere_filter_row = ( id, filter ) => {
  const cells = filter.values.map( value => `<td>${ value }</td>` ).join( '' );
  return `<tr id="sphere_${ id }" data-type="${ filter.name }">${ cells}</tr>`;
};

const select_sphere = event => {
  const sphere_id = parseInt( event.target.value, 10 );
  const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
  if ( !sphere ) throw new Error( `application.select_sphere - cannot find the sphere with id ${ sphere_id }` );
  else {
    const filter_selection = document.querySelector( '#sphere_filters' );
    const filters = filter_options( sphere.filters );
    filter_selection.innerHTML = `<option value="default">Please select a filter...</option>${ filters }`;
    const header = document.querySelector( '#sphere_name' );
    header.innerHTML = sphere.name;
    const ascention = document.querySelector( '#right_ascention' );
    ascention.innerText = sphere.ascention;
    const declination = document.querySelector( '#declination' );
    declination.innerText = sphere.declination;
    const sphere_rows = document.querySelector( '#sphere_rows' );
    sphere_rows.innerHTML = '';
  }
};

const select_filter = event => {
  const sphere_id = parseInt( document.querySelector( '#celestial_spheres' ).value, 10 );
  const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
  const filter_name = event.target.value;
  const filter = sphere.filters.find( filter => filter.name === filter_name );
  const row = sphere_filter_row( sphere_id, filter );
  const sphere_rows = document.querySelector( '#sphere_rows' );
  sphere_rows.innerHTML = row;
};

const show_detail = event => {
  const row = event.target.closest( 'tr' );
  const sphere_id = parseInt( row.getAttribute( 'id' ).slice( 7 ), 10 );
  const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
  alert( `You clicked the value "${ event.target.innerText }" of sphere "${ sphere_id }".` );
  // Do stuff with the clicked cell
};

window.addEventListener( 'DOMContentLoaded', () => {
  const sphere_selection = document.querySelector( '#celestial_spheres' );
  sphere_selection.innerHTML += sphere_options( celestial_spheres );
  sphere_selection.addEventListener( 'change', select_sphere );
  const filter_selection = document.querySelector( '#sphere_filters' );
  filter_selection.addEventListener( 'change', select_filter );
  const sphere_rows = document.querySelector( '#sphere_rows' );
  sphere_rows.addEventListener( 'click', show_detail );
});
td {
  border: 1px solid black;
}
<select id="celestial_spheres">
  <option value="default">Select a target...</option>
</select>
<label >Right Ascention:</label>
<span id="right_ascention"></span>
<label >Declinaton:</label>
<span id="declination"></span>
<select id="sphere_filters"></select>
<table id="filter_details">
  <thead>
    <tr>
      <th id="sphere_name"></th>
    </tr>
  </thead>
  <tbody id="sphere_rows"></tbody>
</table>

关于javascript - 使用 onclick 事件使用页面中的数据填充表格中的单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55419990/

上一篇：javascript - Google 脚本表按名称获取列

下一篇：javascript - ES5 中解构赋值的支持问题

相关文章：

javascript - 如何修复 React-Native 中的 Error 'You Likely forgot to export your component from the file..etc' 错误？

javascript - 适用于 DIV 的简单 jQuery 幻灯片

javascript - 如何让多个按钮具有相同的 id 值，并且当单击任何按钮时应该弹出窗口？

jquery - 使用 CSS 和 jQuery 突出显示当前链接同时排除某些页面

javascript - 用变量设置图像的宽度

javascript - R2D3 的 QUnit 测试开箱即用失败 - 我做错了什么？

javascript - 如何在我的图像编辑器中根据输入的高度和宽度设置 Canvas 大小？

php - css jquery 只显示正在播放的一个

javascript - 如何用Javascript让Javascript运行在页面的最后一个进程

javascript - 如何检查类然后替换每个元素的 data-id

©2024 IT工具网  联系我们