如何在运行时通过JavaScript将HTML表数据获取到所选选项中_Javascript_Html

如何在运行时通过JavaScript将HTML表数据获取到所选选项中

javascript html

如何在运行时通过JavaScript将HTML表数据获取到所选选项中,javascript,html,Javascript,Html,我有一个两列的HTML表格，我想在一个深入页面上过滤表格的数据，用户将使用HTML选择过滤数据，然后一旦他单击submit按钮，JavaScript函数将使用GET/POST请求将数据发送到下一个页面我只是想知道如何在运行时使用JavaScript将数据插入HTML表中的select选项。请参阅代码以供参考 ID的数据名称数据身份证件名称 1. abc 2. dvc 3. nhy 4. wrw 使用下面的jquery是一种解决方案 ID的数据名称数据身份证件名称

我有一个两列的HTML表格，我想在一个深入页面上过滤表格的数据，用户将使用HTML选择过滤数据，然后一旦他单击submit按钮，JavaScript函数将使用GET/POST请求将数据发送到下一个页面

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


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw

使用下面的jquery是一种解决方案


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
$（文档）.ready（函数（）{
$（“tbody>tr”）。每个（函数（）{
var cells=$（this.find（'td'）；
如果（单元格长度>1）{
变量id=单元格[0]。innerText；
变量名称=单元格[1]。innerText；
$（'select[name=id]'）。追加（''+id+''）；
$（'select[name=name]'）。追加（''+name+''）；
}
})
});

使用下面的jquery是一种解决方案


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
$（文档）.ready（函数（）{
$（“tbody>tr”）。每个（函数（）{
var cells=$（this.find（'td'）；
如果（单元格长度>1）{
变量id=单元格[0]。innerText；
变量名称=单元格[1]。innerText；
$（'select[name=id]'）。追加（''+id+''）；
$（'select[name=name]'）。追加（''+name+''）；
}
})
});


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
//这里的自动执行函数
（功能（）{
var idSelect=document.getElementById（“MyDataId”）；//选择ID选择
var table=document.getElementById（'myTable'）；//选择表
var nameSelect=document.getElementById（“MyDataName”）；//选择名称选择
for（变量i=0，行；行=表。行[i]；i++）{
if（i==0）{continue；}//用于跳过标题
var optionId=document.createElement（“选项”）；
optionId.text=行。单元格[0]。innerHTML；
idSelect.add（optionId）//添加id选项
var optionName=document.createElement（“选项”）；
optionName.text=行。单元格[1]。innerHTML；
nameSelect.add（optionName）//添加名称选项
}
})();

这是我在纯JS中提出的解决方案，通过向html添加脚本


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
//这里的自动执行函数
（功能（）{
var idSelect=document.getElementById（“MyDataId”）；//选择ID选择
var table=document.getElementById（'myTable'）；//选择表
var nameSelect=document.getElementById（“MyDataName”）；//选择名称选择
for（变量i=0，行；行=表。行[i]；i++）{
if（i==0）{continue；}//用于跳过标题
var optionId=document.createElement（“选项”）；
optionId.text=行。单元格[0]。innerHTML；
idSelect.add（optionId）//添加id选项
var optionName=document.createElement（“选项”）；
optionName.text=行。单元格[1]。innerHTML；
nameSelect.add（optionName）//添加名称选项
}
})();

这是我在纯JS中提出的解决方案，通过使用纯JAVASCRIPT将脚本添加到html中，下面是一个针对您的用例的解决方案：


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
var callback=function（）{
//DOM完全加载时的处理程序
var el=document.queryselectoral（“tbody>tr”）；
el.forEach（功能（elm）{
var cells=elm.queryselectoral（“td”）；
如果（单元格长度>1）{
变量id=单元格[0]。innerText；
变量名称=单元格[1]。innerText；
document.querySelector（'select[name=id]'）。innerHTML+=''+id+''；
document.querySelector（'select[name=name]'）。innerHTML+=''+name+''；
}
})
};
如果(
document.readyState==“完成”||
（document.readyState！=“加载”&&！document.documentElement.doScroll）
) {
回调（）；
}否则{
addEventListener（“DOMContentLoaded”，回调）；
}

通过使用纯JAVASCRIPT，下面是一个针对您的用例的解决方案：


ID的数据
名称数据




身份证件
名称
1.
abc
2.
dvc
3.
nhy
4.
wrw
var callback=function（）{
//DOM完全加载时的处理程序
var el=document.queryselectoral（“tbody>tr”）；
el.forEach（功能（elm）{
var cells=elm.queryselectoral（“td”）；
如果（单元格长度>1）{
变量id=单元格[0]。innerText；
变量名称=单元格[1]。innerText；
document.querySelector（'select[name=id]'）。innerHTML+=''+id+''；
document.querySelector（'select[name=name]'）。innerHTML+=''+name+''；
}
})
};
如果(
document.readyState==“完成”||
（document.readyState！=“加载”&&！document.documentElement.doScroll）
) {
回调（）；
}否则{
文件。添加的文件列表（“DOMContentLoa
<!DOCTYPE html>
<html>

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

<body>

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

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


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

  <br>
  <br>

  <table id="myTable" 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>

  <script>
    // self executing function here
    (function() {
      var idSelect = document.getElementById("MyDataId"); // selecting ID select
      var table = document.getElementById('myTable'); // selecting Table
      var nameSelect =document.getElementById("MyDataName"); // selecting Name select

      for (var i = 0, row; row = table.rows[i]; i++) {

        if (i === 0) { continue; } //for skipping headings

        var optionId = document.createElement("option");
        optionId.text = row.cells[0].innerHTML;
        idSelect.add(optionId) // adding id option

        var optionName = document.createElement("option");
        optionName.text = row.cells[1].innerHTML;
        nameSelect.add(optionName) // adding Name option
      }
    })();
  </script>
</body>

</html>