Как добавить строку в javascript

Question

Я пытаюсь добавить пустую строку на основе строки, которую у меня уже есть. Я провел час, оглядываясь и пытаясь по-разному, но никто не работает. Это то, что я до сих пор:

HTML:

<div id="Oretablediv"> 
<table id="OreTable" border="1"> 
    <tr> 
     <td>Ore</td> 
     <td>Amount</td> 
     <td>Price</td> 
     <td>Sub Total</td> 
     <td>Delete?</td> 
     <td>Add Rows?</td> 
    </tr> 
    <tr> 
     <td> 
     <select name="Ore"> 
      <option value="value1">Value 1</option> 
      <option value="value2">Value 2</option> 
     </select> 
     </td> 
     <td><input size=25 type="text" id="Amount" ></td> 
     <td>Price</td> 
     <td>SubTotal</td> 
     <td><input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)"/></td> 
     <td><input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()"/></td> 
    </tr> 
</table> 

Javascript:

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

function insRow(){ 
    var row = document.createElement('tr'); 
    var col = document.createElement('td'); 
    var col2 = document.createElement('td'); 
    row.appendChild(col); 
    row.appendChild(col2); 
    var table = document.getElementById("OreTable"); 
    table.appendChild(row); 
} 

В настоящее время я только спрашиваю о функции insRow(), если у вас есть предложения по удаление ряд пожалуйста, поделитесь.

Answer 1

Как вы создаете копию существующего tr элемента, вы можете добиться этого с помощью cloneNode вместо создания всех элементов DOM с использованием createElement

Попробуйте это:

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

 
function insRow() { 
 
    var tr = document.getElementById('toClone'); 
 
    var cln = tr.cloneNode(true); 
 
    var elem = cln.querySelector('#Amount'); 
 
    elem.value = ''; 
 
    var table = document.getElementById("OreTable"); 
 
    table.appendChild(cln); 
 
}

<div id="Oretablediv"> 
 
    <table id="OreTable" border="1"> 
 
    <tr> 
 
     <td>Ore</td> 
 
     <td>Amount</td> 
 
     <td>Price</td> 
 
     <td>Sub Total</td> 
 
     <td>Delete?</td> 
 
     <td>Add Rows?</td> 
 
    </tr> 
 
    <tr id='toClone'> 
 
     <td> 
 
     <select name="Ore"> 
 
      <option value="value1">Value 1</option> 
 
      <option value="value2">Value 2</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input size=25 type="text" id="Amount"> 
 
     </td> 
 
     <td>Price</td> 
 
     <td>SubTotal</td> 
 
     <td> 
 
     <input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)" /> 
 
     </td> 
 
     <td> 
 
     <input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()" /> 
 
     </td> 
 
    </tr> 
 
    </table>

Fiddle here

Answer 2

Похоже, что ваш скрипт будет вставлять строку в качестве прямого дочернего элемента тега «table». Браузеры часто вставляют тег «tbody» в качестве дочернего элемента тега таблицы, но родительский элемент в теги «tr». Поэтому я думаю, что ваш вызов appendChild (row) должен использовать элемент tbody вместо элемента таблицы.

Answer 3

Вы можете прикрепить нажмите на кнопку ид следующим образом:

Вот скрипка: https://jsfiddle.net/swaprks/c1wsomxp/

JAVASCRIPT: 

document.getElementById("delOrebutton").onclick = function eleteRow(row){ 
    var i= this.parentNode.parentNode.rowIndex; 
    document.getElementById('OreTable').deleteRow(i+1); 
} 

document.getElementById("addOrebutton").onclick = function insRow(){ 
    var row = document.createElement('tr'); 
    var col = document.createElement('td'); 
    var col2 = document.createElement('td'); 
    row.appendChild(col); 
    row.appendChild(col2); 
    var table = document.getElementById("OreTable"); 
    table.appendChild(row); 
} 



HTML: 

<div id="Oretablediv"> 
<table id="OreTable" border="1"> 
    <tr> 
     <td>Ore</td> 
     <td>Amount</td> 
     <td>Price</td> 
     <td>Sub Total</td> 
     <td>Delete?</td> 
     <td>Add Rows?</td> 
    </tr> 
    <tr> 
     <td> 
     <select name="Ore"> 
      <option value="value1">Value 1</option> 
      <option value="value2">Value 2</option> 
     </select> 
     </td> 
     <td><input size=25 type="text" id="Amount" ></td> 
     <td>Price</td> 
     <td>SubTotal</td> 
     <td><input type="button" id="delOrebutton" value="Delete" /></td> 
     <td><input type="button" id="addOrebutton" value="Add More Ore"/></td> 
    </tr> 
</table> 
</div> 

Я также обновил функцию удаления, чтобы удалить первую строку, которая была добавлена.