在沒有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

您可以嘗試將相應的單元格添加到新行，將該行保存在var並使用appendChild()函數。 像這樣：

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