Javascript实现可编辑表格应用

endggl

于 2021-04-12 10:04:43 发布

阅读量345

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46700766/article/details/115612836

版权

Javascript实现可编辑表格应用

题目要求：

实现一个可编辑表格，双击时可编辑部分单元格中内容。
修改单科成绩内容后，自动修改后面总分成绩。
如果输入内容有误，需要强制重新输入。

思路：

框架部分：表格形式由于结构大致是相同的，所以考虑动态生成数据来构建。

css部分:根据题目示例要求来进行修饰

JS部分：

双击事件
事件函数
- 点击后创建一个input元素。定义input框中的初始内容为原单元格内容。并且清空原单元格内容。
- 创建焦点离开事件，当鼠标点击输入框外的其他地方时实现获取当前输入的值进行条件判断。满足条件返回新值；不满足条件返回原值，并弹出提示框。

具体实现：

var fromContent = [
                             {学号: "1101",姓名: "小王",语文: 98,数学: 80,英语: 91,总分:"269"}, 
                             {学号: "1102",姓名: "小曾",语文: 88,数学: 87,英语: 92,总分:"267"},
                             {学号: "1103",姓名: "小赵",语文: 76,数学: 90,英语: 86,总分:"252"},
                             {学号: "1104",姓名: "小周",语文: 65,数学: 81,英语: 83,总分:"229"}
                          ];
        console.log(fromContent);
        for(var i = 0;i<fromContent.length;i++){
            var Id = fromContent[i].学号;
            var name = fromContent[i].姓名;
            var chinese = fromContent[i].语文;
            var math = fromContent[i].数学;
            var english = fromContent[i].英语;
            var sum = fromContent[i].总分;
            console.log(Id,name,chinese,math,english,sum);
            var newItem=document.createElement("tr");
            newItem.innerHTML = `
            <td>${Id}</td>
            <td>${name}</td>
            <td ondblclick="Change(this)" ${i}>${chinese}</td>
            <td ondblclick="Change(this)" ${i}>${math}</td>
            <td ondblclick="Change(this)" ${i}>${english}</td>
            <td id="sum`+i+`">${sum}</td>`;
            newItem.id=i;
            var list=document.getElementById("myList");
	        list.appendChild(newItem);  //父节点下的子节点后添加节点
        }

该部分为动态生成数据部分。创建一个数组。对数组进行遍历，在通过模板字符串的方法插入内容在新创建的子节点中。即完成动态数据的创建。此处注意的点是每创建一个子元素tr是都要对她进行id赋值（id的值即数组的索引值）。方便后面取数时对数组的遍历。

function Change(element){
            //获取当前节点内容
            var valueText = element.innerHTML;
            //创建input元素
            var newnode = document.createElement("input");
            // 设置input类型
            newnode.type = "text";
            // 设置value
            newnode.value = valueText;
            //设置该标签的子节点为空
            element.innerHTML = '';
            //添加该标签的子节点，input对象
            element.appendChild(newnode);
            // 光标离开事件
            newnode.onblur=function(){
                // 修改后内容
                var num = this.value
                if(this.value>=0&&this.value<=100){
                    // 光标离开时，判断修改内容是否相同
                    element.innerHTML = num==valueText?valueText:num;
                    var index = element.parentNode.id;
                    var newsum = (num-valueText)+parseInt(fromContent[index].总分);
                    document.getElementById("sum"+index).innerHTML = newsum;
                }else{
                    element.innerHTML =valueText;
                    alert("请输入0-100的数字");
                }
            }
            //设置获得光标
            newnode.focus();
        }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: 微软细黑;
        }
        #app{
            width: 700px;
            height: 300px;
            /* border: steelblue 1px solid; */
            margin: 0 auto;
        }
        table,tr,th,td{
            border: darkgray 2px solid;
            text-align: center;
        }
        table{
            width: 100%;
            height: 60%;
            margin-top: 8%;
            border-collapse: collapse;
        }
        h2{
            font-weight: normal;
            text-align: center;
            margin-top: 4%;
        }
        th{
            background-color: rgba(216, 213, 213, 0.973);
        }
        th,td{
            width: 116.6px;
            height: 40px;
        }
        input{
            width: 95%;
            height: 90%;
            border-radius: 5px;
            font-size: 16px;
            border: rgb(93, 93, 94) 2px solid;
            /* background-color: rgb(221, 223, 226); */
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>可编辑表格</h2>
        <table id="myList">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </table>
    </div>

    <script>
        var fromContent = [
                             {学号: "1101",姓名: "小王",语文: 98,数学: 80,英语: 91,总分:"269"}, 
                             {学号: "1102",姓名: "小曾",语文: 88,数学: 87,英语: 92,总分:"267"},
                             {学号: "1103",姓名: "小赵",语文: 76,数学: 90,英语: 86,总分:"252"},
                             {学号: "1104",姓名: "小周",语文: 65,数学: 81,英语: 83,总分:"229"}
                          ];
        console.log(fromContent);
        for(var i = 0;i<fromContent.length;i++){
            var Id = fromContent[i].学号;
            var name = fromContent[i].姓名;
            var chinese = fromContent[i].语文;
            var math = fromContent[i].数学;
            var english = fromContent[i].英语;
            var sum = fromContent[i].总分;
            console.log(Id,name,chinese,math,english,sum);
            var newItem=document.createElement("tr");
            newItem.innerHTML = `
            <td>${Id}</td>
            <td>${name}</td>
            <td ondblclick="Change(this)" ${i}>${chinese}</td>
            <td ondblclick="Change(this)" ${i}>${math}</td>
            <td ondblclick="Change(this)" ${i}>${english}</td>
            <td id="sum`+i+`">${sum}</td>`;
            newItem.id=i;
            var list=document.getElementById("myList");
	        list.appendChild(newItem);  //父节点下的子节点后添加节点
        }
        function Change(element){
            //获取当前节点内容
            var valueText = element.innerHTML;
            //创建input元素
            var newnode = document.createElement("input");
            // 设置input类型
            newnode.type = "text";
            // 设置value
            newnode.value = valueText;
            //设置该标签的子节点为空
            element.innerHTML = '';
            //添加该标签的子节点，input对象
            element.appendChild(newnode);
            // 光标离开事件
            newnode.onblur=function(){
                // 修改后内容
                var num = this.value
                if(this.value>=0&&this.value<=100){
                    // 光标离开时，判断修改内容是否相同
                    element.innerHTML = num==valueText?valueText:num;
                    var index = element.parentNode.id;
                    var newsum = (num-valueText)+parseInt(fromContent[index].总分);
                    document.getElementById("sum"+index).innerHTML = newsum;
                }else{
                    element.innerHTML =valueText;
                    alert("请输入0-100的数字");
                }
            }
            //设置获得光标
            newnode.focus();
        }
    </script>
</body>

</html>

endggl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现可编辑表格应用

Javascript实现可编辑表格应用题目要求：实现一个可编辑表格，双击时可编辑部分单元格中内容。修改单科成绩内容后，自动修改后面总分成绩。如果输入内容有误，需要强制重新输入。思路：框架部分：表格形式由于结构大致是相同的，所以考虑动态生成数据来构建。css部分:根据题目示例要求来进行修饰JS部分：双击事件事件函数点击后创建一个input元素。定义input框中的初始内容为原单元格内容。并且清空原单元格内容。创建焦点离开事件，当鼠标点击输入框外的其他地方时实现获取当前输入的值进
复制链接

扫一扫