insertrowを使用すると、テーブルまたはtbodyタグに行が追加されますか？

私はこのスクリプトを使用してHTMLテーブルに行を挿入しています。私はtable.insertを使用します。元の行をHTMLページに残しておきたいだけですが、それ以上の行を追加したいからです。insertrowを使用すると、テーブルまたはtbodyタグに行が追加されますか？

この表には、タグ<tbody>が含まれています。最後にinsertrow関数を実行します。これを呼び出す要素は、tableまたはtbodyです。言い換えれば、行を動的に追加するためのコードは以下の通りですか？

スクリプト：

var addButton=document.getElementById("add-button"); 
    addButton.addEventListener('click', addRow, false); 

    function addRow(){ 
     event.preventDefault(); 

     var newData= document.getElementById("inputname").value; 
     var newLevel = document.getElementById("inputlevel").value; 

     console.log("new data "+newData); 
     console.log("new level "+newLevel); 

     var table = document.getElementById("mytable"); 
     var tableLength = (table.rows.length)-1; 
     console.log("table lenght: "+tableLength); 

     var htmltext= "<tr id= 'row"+tableLength+"'> <td id='inputname"+tableLength+"'>"+newData+"</td> \ 
     <td id='inputlevel"+tableLength+"'>"+newLevel+"</td>\ 
     <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \ 
     <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \ 
     <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\ 
     </td>\ 
</tr>"; 

     table.insertRow(tableLength).innerHTML=htmltext; 

    }//end addRow

はHTML：

<html> 

<head> 
    <meta charset="UTF-8"> 

</head> 

<body id="body"> 

    <div id="wrapper"> 
     <table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Type</th> 
        <th>Action</th> 
       </tr> 

      </thead> 
      <tbody id="tbody"> 
       <tr> 
       <td><input type="text" id="inputname"></td> 

       <td> 
        <select name="levels-list" id="inputlevel"> 
        <option value="High" id="option-1">High</option> 
        <option value="Mid" id="option-2">Mid</option> 
        <option value="Low" id="option-3">Low</option> 
        </select> 
       </td> 

       <td><input type="button" class="add" id="add-button" value="Add"></td> 
       </tr> 

      </tbody> 
     </table> 
    </div> 
    <!-- <button onclick='display()'> Display</button> --> 
    <script src="get-text.js"></script> 
</body> 

</html>

出典

2017-05-27 user7945230

[ '.insertRow（）']（https://developer.mozilla.org/en-US/docs/Web/ API/HTMLTableElement/insertrow）は 'table'のメソッドであり、無効なマークアップとなるテーブル行にテーブル行を追加しています。コピーする行を取得し、['.cloneNode（）']（https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode）でクローンを作成し、そのクローンを'tbody' – Andreas

いいえ、生成されたテーブルは有効です。私はそれをChromeでテストします。それはテーブルを生成するのに最適な方法ではありません... –

@Frank Wisniewskiあなたは私に最も良い方法であることに私にリンクを与えることができます – user7945230

tableを呼び出すと、okです。また、挿入する前にcreateTextNode(text)メソッドを使用することもできます。さらに読書のためのスニペットやビューthe docs on MDN (HTMLTableElement.insertRow())をチェックアウト：

function addRow(tableID, text) { 
 
    // Get a reference to the table 
 
    var tableRef = document.getElementById(tableID); 
 

 
    // Insert a row in the table 
 
    var newRow = tableRef.insertRow(); 
 

 
    // Insert a cell in the row 
 
    var newCell = newRow.insertCell(); 
 

 
    // Append a text node to the cell 
 
    var newText = document.createTextNode(text); 
 
    newCell.appendChild(newText); 
 
} 
 

 
// Call addRow(text) with the ID of a table 
 
addRow('TableA', 'Brand new row'); 
 
addRow('TableA', 'Another new row');

<table id="TableA" border="1"> 
 
    <tr> 
 
    <td>1. Old top row</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2. second row</td> 
 
    </tr> 
 
</table>

出典

2017-05-27 09:51:50

insertrowを使用すると、テーブルまたはtbodyタグに行が追加されますか？

答えて

関連する問題