这只有js代码,css代码可自己设计内容,点击增加订单可增加一行订单,点击删除可删除订单,点击修改,可修改第二个单元格的内容,同时按钮变成确定,点击确定可成功修改内容同时按钮又变成修改。

<input type="button" value="增加订单" "addRow1()">
<script>
    //增加订单

    function addRow1(){
        var addTable=document.getElementById("myTable");
        var row_index=addTable.rows.length;  //新插入行在表格中的位置
        var newRow=addTable.insertRow(row_index); //插入新行
        newRow.id="row"+row_index;  //设置新插入行的id

        var col1=newRow.insertCell(0);
        col1.innerHTML="音乐节门票";

        var col2=newRow.insertCell(1);
        col2.innerHTML="<div id='acount'>2</div>";

        var col3=newRow.insertCell(2);
        col3.innerHTML="1280元";

        var col4=newRow.insertCell(3);
        col4.innerHTML="<input type='button' value='删除' \"delRow('row"+row_index+"')\" /> " +
                "<input type='button' id='xiugai' value='修改' 'change()'>";
    }

    function delRow(rowld){
        var row=document.getElementById(rowld).rowIndex;  //删除行所在表格中的位置
        document.getElementById("myTable").deleteRow(row);
    }
    function change(){
        document.getElementById("xiugai").setAttribute("value", "确定");
        document.getElementById("xiugai").setAttribute("onclick", "queding()");
        var text=document.getElementById("acount");
        text.innerHTML="<input type='text' id='n' value="+text.innerHTML+" />";
    }
    function queding(){
        document.getElementById("xiugai").setAttribute("value", "修改");
        document.getElementById("xiugai").setAttribute("onclick", "change()");
        var text=document.getElementById("acount");
        text.innerHTML=document.getElementById("n").value;
    }

</script>

使用innerHTML来改变数量并显示在文本框中,使用setAttribute来改变按钮调用的函数
订单修改(增加订单,可删除和修改,删除订单,修改数量)

相关文章:

  • 2021-08-01
  • 2021-11-19
  • 2021-06-18
  • 2021-12-26
  • 2021-12-09
  • 2021-12-18
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-27
  • 2021-08-09
  • 2021-07-31
  • 2022-12-23
相关资源
相似解决方案