javascript 使用javascript在表中动态编辑和删除tr
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20717946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
edit and delete tr dynamically in table with javascript
提问by melomane
I am preparing a table and creating rows dynamically with javascript. This Table would have input given by user. It would have three main features.
The first feature of the table is : As the user would add details and click on 'Add' button. a new row would add to table containing the input given by user.
The second one is: As the user would click on any row of the table the respected data of the rows would be shown in the input form.
The last feature is: As user clicks on the rows he could delete and edit that selected row.
我正在准备一个表格并使用 javascript 动态创建行。该表将具有用户提供的输入。它将具有三个主要特征。
该表的第一个功能是：当用户添加详细信息并单击“添加”按钮时。一个新行将添加到包含用户提供的输入的表中。
第二个是：当用户点击表格的任何一行时，这些行的相关数据将显示在输入表单中。
最后一个功能是：当用户单击行时，他可以删除和编辑所选行。
I could add rows in table but the later part I am not getting that how to do..
jss fiddle :http://jsfiddle.net/avnesh/N7tza/2/
我可以在表中添加行，但后面的部分我不知道该怎么做
..jss 小提琴：http: //jsfiddle.net/avnesh/N7tza/2/
<table border="1" id="table">
<tr id="myRow">
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<input type="text" id='inputone' />
<input type="text" id='inputtwo' />
<input type="text" id='inputthree' />
<button onclick="myFunction()">Add to table</button>
<button onclick="deleteTr();">delete</button>
<script>
myFunction = function () {
input1 = document.getElementById('inputone');
Value1 = input1.value;
input2 = document.getElementById('inputtwo');
Value2 = input2.value;
input3 = document.getElementById('inputthree');
Value3 = input3.value;
R = document.getElementById("table").rows.length;
one = 1;
I = R + one;
var table = document.getElementById("table");
var x = table.insertRow(0);
x.insertCell(0).innerHTML = "<input type='text' value='" + Value3 + "' name='" + I + "'>";
x.insertCell(0).innerHTML = "<input type='text' value='" + Value2 + "' name='" + I + "'>";
x.insertCell(0).innerHTML = "<input type='text' value='" + Value1 + "' name='" + I + "'>";
} //end myFunction
assignTrIndex = function () {
var rows = document.getElementById('table').rows;
for (var i = 0; i <= rows.length; i++) {
rows[i].onclick = getRowIndex(this)
}
}
var rowIndx = '';
getRowIndex = function (z) {
//alert(z.rowIndex);
var rowIndx = z.rowIndex;
}
deleteTr = function () {
document.getElementById('table').deleteRow(rowIndx);
}
</script>
`
p.s.
I am trying to call row index in delete function(deleteTr) to delete that selected row. So I am assigning a function of getting row index(assignTrIndex) on table rows but it is not working.I am using Jquery only to produce Input form for user. I want to solve this problem with javascript only.
thanks in advance ..
`
ps
我试图在删除函数（deleteTr）中调用行索引来删除所选行。所以我在表行上分配了一个获取行索引（assignTrIndex）的功能，但它不起作用。我只使用 Jquery 为用户生成输入表单。我只想用javascript解决这个问题。
提前致谢 ..
采纳答案by Nouphal.M
First change this line from
首先改变这一行
var x = table.insertRow(0);
to
到
var x = table.insertRow(R);
so that rows get added at the end of the table.
以便在表的末尾添加行。
The you need to add a click event listener to your table row while you create them and populate the values back in text box
您需要在创建表行时向表行添加一个单击事件侦听器并将值填充回文本框中
x.onclick = function (e) {
rInd = this.rowIndex; // get row index for delete
var value = [];
for (var i = 0; i < 3; i++) { // iterate through cells you can also get cell count for now i am making it static
var cell0 = x.cells[i];
var inp1 = cell0.getElementsByTagName('input'); // find input in cells
value.push(inp1[0].value); // save the value
}
document.getElementById('inputone').value = value[0];
document.getElementById('inputtwo').value = value[1];
document.getElementById('inputthree').value = value[2];
}
Delete code
删除代码
deleteTr = function (rowIndx) {
document.getElementById('table').deleteRow(rInd);
}
Working Demo here
工作演示在这里
