当前位置：首页 > article >正文

请为下面的html添加一个修改按钮，以便对书名、价格进行修改

article 2025/3/21 23:20:57

下面的HTML段落，在书名和价格输入错误的情况下，无法进行修改。添加一个按钮，对已经输入的信息进行修改。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           tr{
               height: 60px;
               }
           td ,th{
               width: 150px;
               text-align: center;
               border: 1px solid red;
               }
       </style>
       <script>
           function addNode(){
               var tab = document.getElementById ("tab");
               var tr = document.createElement("tr");
               var td = document.createElement("td");
               td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';
               var td2 = document.createElement("td");
               td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';
               var td3 = document.createElement("td");
               td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+
                               '<Input type="button" Value="删除" οnclick="removeNode(this)" />';
               tab.appendChild(tr);
               tr.appendChild(td);
               tr.appendChild(td2);
               tr.appendChild(td3);

           }
           function saveVal(thi){
               var td =thi.parentNode;
               td.innerText = thi.value;

           }
           function removeNode(abc){
               var tr =abc.parentNode.parentNode;
               tr.remove();

           }
       </script>
   </head>
   <body>
       <table id="tab" border="1px" align="center">
           <tr>
               <th>图书名称</th>
               <th>图书价格</th>
               <th>操作</th>
           </tr>
           <tr>
               <td>javaSE</td>
               <td>19</td>
               <td>
                   <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                   <input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
               </td>
           </tr>
           <tr>
               <td>javaEE</td>
               <td>29</td>
               <td>
                   <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                   <input type="button" name="" id="" value="删除" οnclick="removeNode(this)"/>
               </td>
           </tr>
       </table>
   </body>
</html>

修改后的段落如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            tr{
                height: 60px;
            }
            td ,th{
                width: 150px;
                text-align: center;
                border: 1px solid red;
            }
        </style>
        <script>
            function addNode(){
                var tab = document.getElementById ("tab");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';
                var td2 = document.createElement("td");
                td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';
                var td3 = document.createElement("td");
                td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+
                                '<input type="button" value="删除" οnclick="removeNode(this)" />'+
                                '<input type="button" value="修改" οnclick="editNode(this)" />'; // 添加修改按钮
                tab.appendChild(tr);
                tr.appendChild(td);
                tr.appendChild(td2);
                tr.appendChild(td3);
            }

            function saveVal(thi){
                var td = thi.parentNode;
                td.innerText = thi.value;
            }

            function removeNode(abc){
                var tr = abc.parentNode.parentNode;
                tr.remove();
            }

            function editNode(btn) {
                var tr = btn.parentNode.parentNode;
                var tds = tr.getElementsByTagName('td');
                for (var i = 0; i < 2; i++) { // 前两列是书名和价格
                    var td = tds[i];
                    var value = td.innerText;
                    td.innerHTML = '<input type="Text" size="10px" value="' + value + '" οnblur="saveVal(this)" />';
                }
            }
        </script>
    </head>
    <body>
        <table id="tab" border="1px" align="center">
            <tr>
                <th>图书名称</th>
                <th>图书价格</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>javaSE</td>
                <td>19</td>
                <td>
                    <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                    <input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" οnclick="editNode(this)" /> <!-- 添加修改按钮 -->
                </td>
            </tr>
            <tr>
                <td>javaEE</td>
                <td>29</td>
                <td>
                    <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                    <input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" οnclick="editNode(this)" /> <!-- 添加修改按钮 -->
                </td>
            </tr>
        </table>
    </body>
</html>

查看全文

http://www.kler.cn/a/594586.html