テーブルに行を追加し、値をインクリメントする

-1

テーブルに行を追加するには、次のコードとHTMLが必要です。行を追加するだけでなく、セグメント番号を1つ増やしたいと思いますが、その方法を理解することはできません。誰も助けることができますか？もっと重要なのは、JavaScriptのドキュメントで私の質問に対する答えを見つけるためにどこに行くのか教えてください。テーブルに行を追加し、値をインクリメントする

コードスニペット：

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

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

出典

2017-11-04 Swetzel

（行のコピーなど）。とにかくそこにIDは本当に必要ありません。

また、テーブルの行/列インターフェイスを使用するのではなく、「汎用HTML」インターフェイスを使用するように変更しました。

実際の質問に対する答えは、現在のセグメントを変数に格納し、新しい行を作成するときに変数をインクリメントすることです。これを行うには

// 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."); 
 
    } 
 
}

<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>

出典

2017-11-04 21:46:14 James

ありがとうございます。私はこの種のことについてもっと知るためにどこに行くべきかを示唆できますか？ – Swetzel

ダウはあなたがいないincrimentedセグメントを示したいと思います。私はあなたのIDが[]最後に、あなたが名前だけでやるだろう何かである、とIDを複製することは良いことではありません私には、name属性に属性を置き換えてきた

<!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>

出典

2017-11-04 21:43:30

一つの方法は、最後の行の入力の値を取得し、インクリメント値に現在の行の入力の値を設定することです。例えば：

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."); 
 
    } 
 
}

<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[]"> 
 
    \t \t \t \t \t <option>...</option> 
 
    \t \t \t \t \t <option>Horizontal</option> 
 
    \t \t \t \t \t <option>Vertical</option> 
 
    \t \t \t \t </select></td> 
 
    </tbody> 
 
</table>

いくつかのより多くの事：

また、HTML要素の重複したIDを持つことはノーノーです。
私はtype='number'の入力がtype='text'よりも適切であると思います。

出典

2017-11-05 02:16:29 clabe45

テーブルに行を追加し、値をインクリメントする

答えて

関連する問題