Question

这是我在Javascript中的第一次尝试，所以可能这是一个相当容易的问题。

我需要访问表的行元素，每行包含复选框和另外两列。如果选中复选框，我需要获取复选框的ID。

我做了以下尝试，但element_table.rows返回undefined，因此我无法继续。我使用eclipse的Inspect element工具进行了调试，发现element_table包含行。

请建议我犯错的地方。

Javascript代码：

function myfunction3(){
    var element_table = document.getElementsByName('collection');
    var element_tableRows = element_table.rows;
    var selectedTr = new Array();
    var data = "";
    for(var i =0 ; element_tableRows.length;i++)
    {
        var checkerbox = element_tableRows[i].getElementsByName('checkmark');
        if(checkerbox.checked){
            selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name");
            data = data + element_tableRows[i].getAttribute("name");
        }
    }
    var element_paragraph = document.getElementsByName('description');
    element_paragraph.innerHTML = data;
}

html代码：

<table name="collection" border="1px">
    <tr name="1">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Tum hi ho</td>
        <td>Arjit singh</td>
    </tr>
    <tr name="2">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Manjha</td>
        <td>Somesh</td>
    </tr>
    <tr name="3">
        <td><input type="checkbox" name="checkmark"></td>
        <td>Ranjhana</td>
        <td>A.R Rehman</td>
    </tr>
</table>

<input type="button" value="Check" onclick="myfunction3()">

Answer 1

其实这一行

var element_table = document.getElementsByName('collection');

将返回元素集合。如果您确定只有一个具有指定名称的表，请尝试以下方法：

var element_table = document.getElementsByName('collection')[0];

Answer 2

这是一个有效的版本

function myfunction3(){
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for(var i =0 ; i < element_tableRows.length;i++)
{
    var checkerbox = element_tableRows[i].cells[0].firstChild;
    if(checkerbox.checked){
        //selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name"); //not sure what you want with this
        data = data + element_tableRows[i].getAttribute("name");
    }
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}

http://jsfiddle.net/eZmwy/

jsfiddle为你的例子，你的问题主要是当你getElementsByName你需要指定索引时，也不是说并非所有的getElement方法都在表中可用

我还建议你学习jQuery，这会让生活变得更轻松，也不确定你为什么要将数据显示为1,2,3 tr上的名字......对我来说似乎很奇怪

Answer 3

实际上如果你使用的是jQuery（非常推荐）你可以做点什么

var idsArray = [];
$("[name=collection] tr td [type=checkbox]:checked").parent().each(function() {
idsArray .push($(this).attr('name'))
});

这个答案仅与jQuery的使用有关（与javascript相同，只是更完整。）

在Javascript中访问表的行元素

3 个答案: