Question

我有以下代码和HTML来向表中添加一行。除了附加行之外，我想将段号增加1，但我无法弄清楚如何做到这一点。有人可以帮忙吗？更重要的是，你能告诉我在JavaScript文档中找到问题的答案吗？

代码段：

＆＃13;

    	function addRow(tableID) {
    		var table = document.getElementById(tableID);
    		var rowCount = table.rows.length;
    		if(rowCount < 10){							// limit the user from creating too many segments
    			var row = table.insertRow(rowCount);
    			var colCount = table.rows[0].cells.length;
    			for(var i=0; i<colCount; i++) {
    				var newcell = row.insertCell(i);
    				newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    			}
    			// Increment value of Segment by 1
    		}else{
    			 alert("Maximum Number of Segments is 10.");
    		}
    	}

＆＃13;

<h1>Table Example
    	<input type="button" value="Append Segment" onClick="addRow('dataTable')" /> 
    	</h1>
    	<table id="dataTable">
    		<tbody>
    			<td><input type="checkbox" id="chk[]" unchecked></td>
    			<td><label>Segment: </label></td>
    			<td><input type="text" id="segment[]" value ="1"></td>
    			<td><label>Direction: </label></td>
    			<td><select id="direction[]">
    					<option>...</option>
    					<option>Horizontal</option>
    					<option>Vertical</option>
    				</select></td>
    		</tbody>
    	</table>

＆＃13;

Answer 1

陶氏，您想要显示实施段号

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
    <h1>Table Example
    <input type="button" value="Append Segment" onClick="addRow('dataTable')" /> 
    </h1>
    <table id="dataTable">
        <tbody>
            <td><input type="checkbox" id="chk[]" unchecked></td>
            <td><label>Segment: </label></td>
            <td><input type="text" id="segment[]" value ="1"></td>
            <td><label>Direction: </label></td>
            <td><select id="direction[]">
                    <option>...</option>
                    <option>Horizontal</option>
                    <option>Vertical</option>
                </select></td>
        </tbody>
    </table>
</body>
<script>
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount < 10){                          // limit the user from creating too many segments
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML =         table.rows[0].cells[i].innerHTML;
            }
          row.cells[2].children[0].value = rowCount + 1;              // Increment value of Segment by 1
        }else{
             alert("Maximum Number of Segments is 10.");
        }
    }
</script>
</html>

Answer 2

我已经用名称属性替换了你的id属性，对我来说，最后的[]只是你用名字做的事情，重复id不是一件好事（复制行等）。无论如何，你真的不需要id。

除了使用表格行/列界面，我还改为使用＆＃34;通用html＆＃34;接口

您实际问题的答案是将当前细分受众群存储在变量中，并在您创建新行时将其递增。

＆＃13;

// store the last segment number in a global variable
var lastSegment = 1;

function addRow(tableID) {
    var tbody = document.querySelector("#" + tableID + " tbody");
    var rows = tbody.querySelectorAll("tr");

    if(rows.length < 10){ // limit the user from creating too many segments
      // copy the first TR of the table
      var newRow = rows[0].cloneNode(true);
      // increment the last segment number and apply it to the new segment[] field
      newRow.querySelector("input[name='segment[]']").value = ++lastSegment;
      // add the new row
      tbody.appendChild(newRow);
    } else {
         alert("Maximum Number of Segments is 10.");
    }
}

＆＃13;

<h1>Table Example
<input type="button" value="Append Segment" onClick="addRow('dataTable')" /> 
</h1>
<table id="dataTable">
    <tbody>
        <td><input type="checkbox" name="chk[]" unchecked></td>
        <td><label>Segment: </label></td>
        <td><input type="text" name="segment[]" value ="1"></td>
        <td><label>Direction: </label></td>
        <td><select name="direction[]">
                <option>...</option>
                <option>Horizontal</option>
                <option>Vertical</option>
            </select></td>
    </tbody>
</table>

＆＃13;

Answer 3

执行此操作的一种方法是获取最后一行输入的值，并将当前行的输入值设置为递增值。例如：

＆＃13;

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 10) { // limit the user from creating too many segments
    var lastRow = table.rows[rowCount - 1]; // last row
    var lastRowValue = parseInt(lastRow.cells[2].children[0].value); // lastRow.cells[2] is the <td>...</td>

    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
    // Increment value of Segment by 1
    row.cells[2].children[0].value = lastRowValue + 1;
  } else {
    alert("Maximum Number of Segments is 10.");
  }
}

＆＃13;

<h1>Table Example
  <input type="button" value="Append Segment" onClick="addRow('dataTable')" />
</h1>
<table id="dataTable">
  <tbody>
    <td><input type="checkbox" name="chk[]" unchecked></td>
    <td><label>Segment: </label></td>
    <td><input type="number" name="segment[]" value="1"></td>
    <td><label>Direction: </label></td>
    <td><select name="direction[]">
    					<option>...</option>
    					<option>Horizontal</option>
    					<option>Vertical</option>
    				</select></td>
  </tbody>
</table>

＆＃13;

还有一些事情：

此外，HTML元素的重复ID是 no-no 。
对于这种情况，我认为type='number'输入比type='text'输入更合适。

在表中追加一行并使用javascript增加值

3 个答案: