时间戳

首页 > 解决方案 > 如何在运行时通过 JavaScript 将 HTML 表格数据放入选定的选项中

javascript - 如何在运行时通过 JavaScript 将 HTML 表格数据放入选定的选项中

问题描述

我有一个包含两列的 HTML 表格，我想在向下钻取页面上过滤表格的数据，用户将使用 HTML 选择过滤数据，然后一旦他单击提交按钮，JavaScript 函数会将数据发送到下一页使用 GET/POST 请求。

我只是想知道如何在运行时使用 JavaScript 将数据插入到 HTML 表中的 HTML 选择选项中。请参阅代码以供参考。

在此处输入图像描述

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <select name="id">
    <option selected="">Data for ID</option>
  </select>

  <select name="name">
    <option selected="">Data for Name</option>
  </select>


  <input type="submit" name="" value="Submit">

  <br>
  <br>

  <table border="2">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>2</td>
      <td>dvc</td>
    </tr>
    <tr>
      <td>3</td>
      <td>nhy</td>
    </tr>
    <tr>
      <td>4</td>
      <td>wrw</td>
    </tr>



  </table>
</body>

</html>

标签： javascripthtml

解决方案

通过使用下面的普通 JAVASCRIPT 是您的用例的解决方案：

<!DOCTYPE html>
<html>
<head>
    <title></title>
	</head>
<body>



<select name="id">
    <option selected="">Data for ID</option>
</select>

<select name="name">
    <option selected="">Data for Name</option>
</select>


<input type="submit" name="" value="Submit">

<br>
<br>

<table border="2">
    <tr>
    <th>ID</th>
    <th>Name</th></tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>dvc</td>
    </tr>
    <tr>
        <td>3</td>
        <td>nhy</td>
    </tr>
    <tr>
        <td>4</td>
        <td>wrw</td>
    </tr>



</table>
</body>
</html>
<script>
  var callback = function() {
     // Handler when the DOM is fully loaded
     var el = document.querySelectorAll("tbody >tr");

     el.forEach(function(elm) {
       var cells = elm.querySelectorAll("td");

       if (cells.length > 1) {
          var id = cells[0].innerText;
          var name = cells[1].innerText;
  
          document.querySelector('select[name=id]').innerHTML += '<option value=' + id + '>' + id + '</option>';
          document.querySelector('select[name=name]').innerHTML += '<option value=' + name + '>' + name + '</option>';
       }
    })
 };

if (
   document.readyState === "complete" ||
   (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
     callback();
} else {
   document.addEventListener("DOMContentLoaded", callback);
}
</script>

推荐阅读