JavaScript

【问题标题】：JavaScript - Incrementing a value attributeJavaScript - 增加值属性
【发布时间】：2013-05-08 15:52:58
【问题描述】：

我有一个无法理解的问题（对 JavaScript 来说还很陌生）。需要知道如何使用 document.createElement 事件增加 HTML 中的变量（如果这是正确的术语）。

每次单击“添加行”按钮时，我都需要增加“值”属性，“删除行”按钮反之亦然。

到目前为止我有：

HTML

<div id='ctrl_container'>

    <form action='$thisuri' method='post' id='spa' name='date2'>

    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<table id="dataTable"  border='0' cellspacing='0' cellpadding='0' > 

    <tr>
        <th> Select </th>
        <th> ID </th>
        <th> Question </th>
    </tr>

    <tbody>
    <tr>
        <td> <input type="checkbox" name="chk[]" /> </td>
        <td> 1<input type="hidden" name="Q[]" value="1" /> </td>
        <td> <input type="text" name="txtbox[]" /> </td>
    </tr>
    </tbody>

</table>
    <input type='Submit' value='Submit Planned Audit' name='send'>
    </form>
</div>

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = document.getElementById(tableID).getElementsByTagName('tbody')
        [1].getElementsByTagName('tr').length;
        var row = table.insertRow(rowCount +1);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "hidden";
        element1.name = "Q[]";
        element1.value = rowCount +1;
        cell2.appendChild(element1);
        cell2.innerHTML = rowCount +1;
}

function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
}

谁能指点一下？

【问题讨论】：

您的其余代码是否有效？您能否提供一个 jsFiddle。请解释为什么需要增加，以及要在哪里显示行数？
尝试提醒(rowcount) 看看发生了什么
@NickN。 jsfiddle.net/2wpaL/1 我需要增加隐藏输入类型中的 value 属性。我做了 alert(rowCount) 但一无所获。我会再尝试。干杯。
谢谢你的提琴，提琴告诉我，你说的，不可能是你想做的。自从我们添加2行，然后删除第二行。添加的下一行也将称为 3。这将导致 2 行的 ID=3。你确定这是一个正确的问题吗？
是的，我知道，这就是为什么我也需要减少增量，我认为我可以一次解决这两个问题，也许需要重新考虑？

标签： javascript forms html-table increment

【解决方案1】：

如果你想按名称递增：

var hiddenInputs = document.getElementsByName("Q[]");

编辑：

for (var i = 0; i <= hiddenInputs.length; i++) {
    hiddenInputs[i].value = i + 1;
}

减量具有相同的逻辑。现在， hiddenInput(DOM 元素) 的值由您的行数组成

【讨论】：

我会试一试，看看它会导致什么。干杯穆斯塔法！
因为输入元素被克隆到每一行，所以它增加了它找到的第一个隐藏字段......我该如何解决这个问题？增加 hiddenInput[0].value 会起作用吗？
我的编辑解决了我认为的全部问题。它将所有数字从零开始。
你能把小提琴寄过来吗？？
jsfiddle.net/9YCeu 删除其中一行并再次运行。您将看到正确给出的数字。根据我对您的问题的理解，在每次添加或删除时，此代码都必须运行

【解决方案2】：

看看这个 jsFiddle：http://jsfiddle.net/pDxnb/1/

它肯定会给你一些指示，因为现在该行实际上是被明显添加的。（我猜这里的行数不是问题）

问题过去和现在仍然是，您将空单元格添加为一行。我已将 cell2 添加到表格中，我们可以看到正在发生的事情。

var cell2 = row.insertCell(1);
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;

我也做了调试：

    alert(rowCount);

您应该能够自己解决剩下的问题。如果您需要更多帮助，请在下方评论。

提示：

也许每次添加一行时都增加你的最高 ID 会更好，不要担心删除。这样你就永远不会拥有相同的 ID

【讨论】：