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

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

我可以在表中添加行，但后面的部分我不知道该怎么做。。 jss小提琴：

` 附笔 我试图调用delete函数deleteTR中的行索引来删除所选行。所以我分配了一个函数来获取表行上的行indexassignTrIndex，但它不起作用。我只想用javascript解决这个问题。

---

提前感谢。

首先将此行从

var x = table.insertRow(0);

到

以便在表的末尾添加行

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

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

---

工作演示

您好，您有任何您尝试过的代码示例吗。我的第一个想法是JQuery可能会在这里帮助您。那么您是否想要JQuery？jss fiddle在那里？我不想要j-querysoulution@melomane但是您已经在使用jquery UI了？

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