javascript操作表格案例讲解

最新推荐文章于 2023-07-28 10:02:57 发布

小圣贤君

最新推荐文章于 2023-07-28 10:02:57 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/52593944

版权

JavaScript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本案例是一个简单表格，通过javascript DOM相关技术，实现对表格的删除更改。案例代码详细的表达了思路分析，适合DOM初学者。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    *{
        margin:0;
        padding:0;
    }
    table{
        width:800px;
    }
  </style>
 </head>
 <body>
    <table border="1">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </thead>
        <tbody id="tb">
            <tr>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td class="control">
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            <tr>
                <td>小王</td>
                <td>16</td>
                <td>男</td>
                <td class="control">
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            <tr>
                <td>小张</td>
                <td>13</td>
                <td>男</td>
                <td class="control">
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        /*
            思路：
                第一步：页面加载完后获取所要操作节点对象
                第二步：为每一个删除按钮和修改按钮添加一个点击事件onclick
                第三步：
                        删除：
                            节点对象.removeChild(子节点);
                            tbody.removeChild(当前行);
                            当前行 = 删除按钮.parentNode.parentNode
                        修改和确定
                            根据按钮的内容来确定当前的逻辑
                            内容：按钮.innerHTML
                            内容=修改：
                                为每一个当前行的前三个单元格添加一个input（文本框）
                                把添加文本框之前的内容赋值给文本框   value
                            内容=确定：
                                先获取当前行的前三个单元格里文本框里的内容
                                把获取的内容暂存下。
                                把文本框之间变成之前暂存下的内容
        */

        var tbody = document.getElementById("tb");
        var dels = document.querySelectorAll("#tb .del");  //一组
        var edits = document.querySelectorAll("#tb .edit");//一组

        for(var i = 0,len = dels.length;i<len;i++){
            dels[i].onclick = function(){
                var isDel = confirm("您老确定要删除吗？");
                if(isDel){
                    var tr = this.parentNode.parentNode; //当前行节点对象
                    tbody.removeChild(tr);
                }
            }

            edits[i].onclick = function(){
                var content = this.innerHTML;
                var tr = this.parentNode.parentNode;  //当前行
                var tds = tr.children;    //一组  
                if(content=="修改"){
                    this.innerHTML = "确定"; //把按钮变成确定，方便下次点击执行确定的逻辑
                    for(var i = 0,len = tds.length-1;i<len;i++){
                        var v = tds[i].innerHTML; //先把添加文本框之前内容取出来。
                        //重新为当前的单元格赋值（文本框）
                        tds[i].innerHTML = '<input type="text" value="' + v + '"/>';
                    }
                }else{   //确定
                    this.innerHTML = "修改"; //把按钮变成修改，方便下次点击执行修改的逻辑
                    for(var i = 0,len = tds.length-1;i<len;i++){
                        var v = tds[i].firstElementChild.value;
                        tds[i].innerHTML = v;
                    }
                }
            }
        }
    </script>
 </body>
</html>

读者可以直接运行示例查看效果进行学习。

小圣贤君

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript操作表格案例讲解

本案例是一个简单表格，通过javascript DOM相关技术，实现对表格的删除更改。案例代码详细的表达了思路分析，适合DOM初学者。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author"
复制链接

扫一扫