jqueryなしのインデックスにHTMLテーブル行クローンを挿入します。

Question

addmorebutton td行のインデックスに行を挿入しようとしています。

最初の試みは実際には希望のインデックスに行を追加しますが、予想通りではありません。単に実際には境界付き行の列ボックスを追加するだけです。

クリックしたtdのインデックスに新しい行を挿入するにはどうすればいいですか？これは空白で、実際にはテーブルから離れていますか？

function deleteRow(row) { 
 
    var i = row.parentNode.parentNode.rowIndex; 
 
    document.getElementById('Table').deleteRow(i); 
 
} 
 

 

 
function addRow() { 
 
    var i = row.parentNode.parentNode.rowIndex; 
 
    document.getElementByID('Table').insertRow(i); 
 
} 
 
turkSetAssignmentID();

<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script> 
 
<form name='mturk_form' method='post' id='mturk_form' action='https://www.mturk.com/mturk/externalSubmit'> 
 
    <input type='hidden' value='' name='assignmentId' id='assignmentId' /> 
 

 
    <h1>This is a test</h1> 
 

 
    <div id="tablediv"> 
 
    <input type="button" id="addbutton" value="Add Index" /><br/><br/> 
 
    <table id="Table" border="1"> 
 
     <tr> 
 
     <td>Index</td> 
 
     <td>Measured Depth</td> 
 
     <td>Inclination</td> 
 
     <td>Azimuth</td> 
 
     <td>Delete?</td> 
 
     <td>Add Row?</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td><input size=25 type="text" id="Measured Depth" contenteditable='true'></td> 
 
     <td><input size=25 type="text" id="Inclination" contenteditable='true'></td> 
 
     <td><input size=25 type="text" id="Azimuth" contenteditable='true'></td> 
 
     <td><input type="button" id="delbutton" value="Delete" onclick="deleteRow(this)" /></td> 
 
     <td><input type="button" id="addmorebutton" value="Add More Indexs" onclick="addRow.apply(this)" /></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <p><input type='submit' id='submitButton' value='Submit' /></p> 
 
</form>

Answer 1

あなたはappendChild()機能をvarと上の行を保存し、新しい行にそれぞれのセルを追加しようとすることができます。このような何か：

function addRow(row) { 
 
     var i = row.parentNode.parentNode.rowIndex + 1; 
 
     var nextRow = document.getElementById('Table').insertRow(i); 
 

 
     // Start iterating over all the cells on the row 
 
     var cell = nextRow.insertCell(0); 
 
     cell.appendChild(document.createTextNode(i)); 
 
     cell = nextRow.insertCell(); 
 
     cell = nextRow.insertCell(); 
 
     cell = nextRow.insertCell(); 
 
     cell = nextRow.insertCell(); 
 
     cell = nextRow.insertCell(); 
 
     input = document.createElement("Input"); 
 
     input.type = "button"; 
 
     input.setAttribute("onclick", "addRow(this)"); 
 
     input.value = "Add More Indexs" 
 
     cell.appendChild(input); 
 
    }

そしてもちろんのは、各セルにそれぞれの入力を追加します。 次に、新しいものの下にある行のインデックス番号を増やす関数を追加したいと考えています。

また、元のボタンのonclickの値をaddRow(this)に変更しました。