Question

我有一个jsp页面，其中有一个html表。读取xml文件后，表格的内容将动态填充。根据xml文件中的某些数据，表中的行数可能从2到10不等。现在，html表中显示的每一行中都有一个复选框。 复选框的ID也动态命名为。现在，我必须编写一些javascript代码，这些代码依赖于显示的复选框的所有ID。如何将表格中显示的复选框的所有ID传递给javascript代码动态？

PS ：我想到这种方法，如果我错了，请纠正我。 声明一个空数组以保存复选框的ID。当我使用for循环动态创建表的每一行时，我将复选框的id添加到数组中。现在，我想在javascript中使用这个数组。

是否可以在javascript中访问此数组？如果是这样，我如何将此数组传递给javascript块？是否有任何限制将这个javascript代码放在jsp中（比如在代码块之后/之前，复选框的id被添加到数组中）。我对这种东西比较新。请帮助实施这种方法

Answer 1

是的，与mplungjan的答案类似，您可以搜索元素类型，然后深入挖掘以检索

中的复选框元素

所以在你的情况下通过id搜索你的表（如果你给它一个id）或者通过tagname（'table'[0]，如果它是第一个也是唯一的表），搜索表格内的复选框元素，将每个添加到您的数组

var table   = document.getElementById('dataTable');
//OR if we assert there's only 1 table
//var table = document.getElementsByTagName('table')[0]; 
var tableInputTags = table.getElementsByTagName("input");
var checkboxArray= [];

for (var i=0; i<tableInputTags.length; i++) 
{
    if(tableInputTags[i].type=="checkbox") 
    {
        checkboxArray.push(tableInputTags[i].id);
    }
}
//continue doing something with the 
//array of dynamically created checkboxes...

Answer 2

如果我明白你有两种可能性。你可以

在服务器端for循环的每次迭代中将复选框的id添加到javascript数组中。因此，您需要在页面的开头声明一个空的js数组，然后为每个复选框添加一个script块，在其中使用<yourarray>.push("<yourid>")将id推入数组。这个解决方案并不是真正有效（因为每个<script>块会暂停渲染过程一段时间，并且您在几个地方“播放”代码）但技术上正在工作 - 否则

在DOM ready（或onload）事件中，您查看input:checkbox DOM集合，获取id并将其推送到数组中，就像这样。

var ids = [],
    cbx = document.querySelectorAll('input[type="checkbox"]');

for (i = 0, l = cbx.length; i < l; i++) {
       ids.push(cbx[i].id);
}

console.log(ids);

小提琴：http://jsfiddle.net/G44hH/1/ - 当然，如果可以的话，最好使用这个解决方案（而不是第一个）

Answer 3

假设页面加载后所有复选框都可用，您可以执行此操作（普通javascript）：

var checks=[];
window.onload=function() {
  var inputs = document.getElemementsByTagName("input");
  for (var i=0, n=inputs.name;i<n;i++) {
    if (inputs[i].type=="checkbox") checks.push(inputs[i].id);
  }
}

Answer 4

假设你有一个id为#table的表，在TR中有一些TR，你在TD中有复选框。你可以通过下面的jquery来做到这一点：

$('#table tr').each(function() {
 alert($(this).find('input:checkbox').attr('id'));
});

但我想你不需要存储你需要复选框ID的所有复选框ID，与你正在执行删除编辑等操作的特定Td相关。

如果您可以清楚地指明您想要做什么，我可以向您发送正确的代码。

Answer 5

为所有checckbox添加一个class属性，然后使用jquery按类选择这些复选框。

jquery选择器将返回这些复选框的数组，然后您可以根据需要使用此数组。这样的事情。

<input type=checkbox class ="box"/>

var arr = [];

arr = $(".box");

如何动态获取页面上显示的复选框的ID

5 个答案: