在JavaScript中選擇特定的表格單元格

Question

我有這樣的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但沒有用。

Answer 1

您將對按鈕的引用傳遞給saveValues ，因此在saveValues ，第一個參數將引用該按鈕。 我們稱這個論點為btn. btn.parentNode將是包含按鈕的td ，而`btn.parentNode.parentNode將是包含該td的tr 。 所以：

function saveValues(btn) {
    var tr = btn.parentNode.parentNode;
    // Work with `childNodes` and the `childNodes` of those children to get the values
}

Answer 2

嘗試這個

<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]);
    }
}

小提琴的例子

您可以修改代碼。