Javascript 如何向每个行表动态添加“编辑”和“删除”按钮_Javascript_Html_Html Table_Dom Events

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

javascript html

Javascript 如何向每个行表动态添加“编辑”和“删除”按钮,javascript,html,html-table,dom-events,Javascript,Html,Html Table,Dom Events,我想在下表的第三行中添加编辑和删除按钮，只要将一行添加到表中。当用户单击编辑时，列单元格将根据其原始类型（文本框和下拉菜单）变得可编辑，并允许编辑。此外，edit按钮在用户单击edit按钮后添加一个新的save按钮。当用户单击删除时，该行被删除。我以前看过很多文章，但我只想使用HTML和Javascript，除非根本不可能（有些解决方案建议使用外部库，有些使用JQuery）我尝试了几种方法，但没有成功。我将感谢任何能为我简化这项任务的指针或代码片段我有一个获取和存储数据的数据库，但我用数组简

我想在下表的第三行中添加

编辑

和

删除

按钮，只要将一行添加到表中。当用户单击编辑时，列单元格将根据其原始类型（文本框和下拉菜单）变得可编辑，并允许编辑。此外，

edit

按钮在用户单击

edit

按钮后添加一个新的

save

按钮。当用户单击删除时，该行被删除。我以前看过很多文章，但我只想使用HTML和Javascript，除非根本不可能（有些解决方案建议使用外部库，有些使用JQuery）

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

我有一个获取和存储数据的数据库，但我用数组简化了代码，如下所示

HTML:


名称
类型
行动
A.
B
C

脚本：

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

var myArray=[{“名称”：“aaa”，“级别”：“A”}，{“名称”：“bbb”，“级别”：“B”}，{“名称”：“ccc”，“级别”：“C”}]；
//显示表中存储的数据的步骤
函数显示（）
{
var table=document.getElementById（“mytable”）；
var length=myArray.length；
对于（var i=0；i完整工作代码：
<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>


名称
类型
行动
展示
var myArray=[{“name”：“aaa”，“level”：“A”}，{“name”：“bbb”，“level”：“B”}，{“name”：“ccc”，“level”：“C”}]；
函数显示（）{
var length=myArray.length；
var htmltext=“”；
对于（变量i=0；i
我只看到哪些有效，请显示在a中不起作用的代码。@zer00ne我需要一些指针或示例，以便理解概念并正确执行。我遇到了几个问题。首先，函数名delete
显示了一个错误，因为它是一个保留字。然后，在修复该错误后，我仍然在这一行中遇到错误htmltext+=“
正在说未捕获的语法错误：无效或意外的标记。请确保这是一个有效的示例，以免我再次迷路。
<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>