Question

每当向表中添加一行时，我想在下表的第三行添加edit和remove按钮。当用户用户单击edit时，列单元格将根据其原始tye（文本框和下拉菜单）进行编辑，并允许编辑。此外，用户点击edit按钮后，save按钮会添加新的edit按钮。当用户点击delete时，该行将被删除。我已经看过很多以前的帖子，但我想使用HTML和javascript-only，除非它根本不可能（某些解决方案推荐外部库，有些使用JQuery）。

我尝试了几种方法却没有成功。我将感谢任何为我简化此任务的指针或代码片段。

我有一个数据库，我获取并存储数据，但我正在使用数组简化代码，如下所示。

HTML：

<html>

<head>
<meta charset="UTF-8">

</head>

<body id="body">   

<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>

<tr>
<td><input type="text" id="text"></td>

<td>
    <select name="levels" id="levels">
    <option value="A" id="option-1">A</option>
    <option value="B" id="option-2">B</option>
    <option value="C" id="option-3">C</option>
    </select> 
</td>

<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>

</table>
</div>
<script src="get-text.js"></script>
</body>
</html>

脚本：

var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];

//to display stored data in the table 
function display()
{
    var table=document.getElementById("mytable");
    var length=myArray.length;

    for(var i=0; i<length; i++)
    {
        var row = table.insertRow(i+1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = myArray[i].name;
        cell2.innerHTML = myArray[i].level;
    }//end for  
} //end display

display(); //call display.

var addButton=document.getElementById("add-button"); 

//listen to add button. If clicked, store the entered data and append them in the display
addButton.addEventListener('click', function (){
    event.preventDefault();

    //get the data from the form
    var mytext = document.getElementById("text").value;
    var mylevel = document.getElementById("levels").value;

    //store the entered values into the array
    myArray.name=mytext;
    myArray.level=mylevel;

    var length=myArray.length;
    console.log("Array Length: "+length)

    //add the entered data to the table.
    var table=document.getElementById("mytable");
    var newRow = table.insertRow(length+1);
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);

    cell1.innerHTML = mytext;
    cell2.innerHTML = mylevel;

    mytext.value = '';

}, false);

编辑：我在我的代码中尝试这样的事情。 Add, Edit, Delete from Tables Dynamically但是我在这方面没有成功。

Answer 1

完整的工作代码：

<html>

<head>
    <meta charset="UTF-8">

</head>

<body id="body">

    <div id="wrapper">
        <table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
    <button onclick='display()'> Display</button>
    <!--<script src="get-text.js"></script>-->
</body>

</html>


<script>
    var myArray = [{ "name": "aaa", "level": "A" }, { "name": "bbb", "level": "B" }, { "name": "ccc", "level": "C" }];

    function display() {
        var length = myArray.length;
        var htmltext = "";

        for (var i = 0; i < length; i++) {
            console.log(myArray[i]);
            htmltext += "<tr id='table"+i+"'><td>"
            +myArray[i].name+
            "</td><td>"
            +myArray[i].level+
            "</td><td><button onclick='edit("+i+")'>Edit</button><button onclick='remove("+i+")'>Remove</button></td></tr>";
        }
        document.getElementById("tbody").innerHTML = htmltext;
    }

    function edit(indice) {
        var htmltext = "<tr><td><input id='inputname"+indice+"' type='text' value='"
            +myArray[indice].name+
            "'></td><td><input id='inputlevel"+indice+"' type='text' value='"
            +myArray[indice].level+
            "'></td><td><button onclick='save("+indice+")'>Save</button><button onclick='remove("+indice+")'>Remove</button></td></tr>";
        document.getElementById("table"+indice).innerHTML = htmltext; 
    }


    function save(indice) {
        myArray[indice].name = document.getElementById("inputname"+indice).value;
        myArray[indice].level = document.getElementById("inputlevel"+indice).value;
        var htmltext = "<tr id='table"+indice+"'><td>"
            +myArray[indice].name+
            "</td><td>"
            +myArray[indice].level+
            "</td><td><button onclick='edit("
            +indice+")'>Edit</button><button onclick='remove("
            +indice+")'>Remove</button></td></tr>";
        document.getElementById("table"+indice).innerHTML = htmltext;
    }

    function remove(indice) {
        console.log(myArray);
        myArray.splice(indice, 1);
        display();
    }
</script>

如何动态地向每个行表添加编辑和删除按钮

1 个答案: