Question

我正在准备一个表并使用javascript动态创建行。该表将具有用户给出的输入。它有三个主要特征。
该表的第一个特征是：用户将添加详细信息并单击“添加”按钮。一个新行将添加到包含用户给出的输入的表中第二个是：当用户点击表格的任何一行时，行的尊重数据将显示在输入表格中。
最后一个功能是：当用户点击行时，他可以删除并编辑所选行。

我可以在表格中添加行，但后面的部分我没有得到如何做...
jss fiddle：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>

`
附：
我试图在删除函数（deleteTr）中调用行索引来删除所选行。所以我分配一个函数来获取表行的行索引（assignTrIndex），但它不工作。我只使用Jquery为用户生成输入表单。我想用javascript解决这个问题。
提前谢谢..

Answer 1

首先从

更改此行

var x = table.insertRow(0);

到

var x = table.insertRow(R);

以便在表的末尾添加行。

您需要在创建表行时向表行添加单击事件侦听器，并在文本框中填充值

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];
    }

删除代码

deleteTr = function (rowIndx) {
    document.getElementById('table').deleteRow(rInd);
}

工作演示here

使用javascript在表格中动态编辑和删除tr

1 个答案: