在JavaScript中选择特定的表格单元格

时间:2013-11-09 16:21:40

标签: javascript html html5

我有这样的HTML:

<table id="laboral">
    <tr>
        <td><input type="text" name="start"/></td>
        <td><input type="text" name="end"/></td>
        <td><textarea name="desc"></textarea></td>
        <td><button type="button" onclick="saveValues(this);createRow('laboral')"> + </button></td>
    </tr>
</table>

我想要的是将值保存在三个单元格中(2个输入和1个textarea)。

按钮创建另一行,就像第一行一样,具有相同的输入和名称。问题是我不知道如何访问这一行,我的意思是,拥有该按钮的行。

我尝试使用this.parentNode.parentNode但没有用。

2 个答案:

答案 0 :(得分:1)

您将对按钮的引用传递给saveValues,因此在saveValues内,第一个参数将引用该按钮。我们称该参数btn. btn.parentNode将是包含该按钮的td,而`btn.parentNode.parentNode将是包含该tr的{​​{1}}。所以:

td

答案 1 :(得分:1)

试试这个

<table id="laboral">
    <tr>
        <td><input type="text" name="start"/></td>
        <td><input type="text" name="end"/></td>
        <td><textarea name="desc"></textarea></td>
        <td><button type="button" onclick="saveValues(this)"> + </button></td>
    </tr>
</table>

var inputVals = [];

function saveValues(elm) {
    //         button   td         tr        tbody     table
    var table = elm.parentNode.parentNode.parentNode.parentNode;

    //  iterating through the first row cells
    for (var i = 0; i<table.rows[0].cells.length-1; i++) {
        //  the current cell
        var cell = table.rows[0].cells[i];
        //  pushing the input elm's value into the array
        inputVals.push(cell.childNodes[0].value);
        //  retrieving the pushed value
        alert(inputVals[i]);
    }
}

Fiddle example

您可以修改代码。