js实现表格渲染

   <p>大家好，我是web前端新手。 昨天在csdn上查到了我需要的js实现表格渲染，我在此基础上稍微修改增加了一些内容。&nbsp;原作者和链接已经不知道了，如果原作者看到请联系我，备注作者名和原链接，在此非常感谢原作者。
   修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table渲染</title>
    <style type="text/css">
        #add,#del{
            font-size:26px;
       margin: 15px;
        }
        #name,#year{
            margin:10px;
        }
    </style>
</head>
<body>
<input id="name" type="text" placeholder="请输入姓名">
<label for="nan">请选择性别：</label>
<input id="nan" type="radio" name="sex" class="sex" value="男" checked>男
<input id="nv" type="radio" name="sex"    class="sex" value="女">女

<input id="year" type="text" placeholder="请输入年龄">
<input id="add" type="button" value="新增" onclick="createRow()">
<input id="del" type="button" value="删除" onclick="delRow()">
<table id="editTable" border="1" width="400">
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tbody id="tbody">

    </tbody>
</table>

<script type="text/javascript">
    function createRow(){                        //打好基础，注释增加
        var editTable=document.getElementById("tbody");//获取已存在的元素将来作为tr父类
        var tr=document.createElement("tr");           //添加tr元素
        var td0=document.createElement("td");          //添加td元素
        var checkbox=document.createElement("input");  //添加input元素
        checkbox.type="checkbox";                      //添加input元素的类型为checkbox
        checkbox.name="checkRow";                      //添加input元素的类名为checkRow
        td0.appendChild(checkbox);                     //在td0中添加子元素checkRow
        var td1=document.createElement("td");            //创建元素td1（td0表示新添加tr元素中的第一个td元素，以此类推）
        td1.innerHTML=document.getElementById("name").value;//td1的元素内容来源于id为name的标签的值
        var td2=document.createElement("td");            //创建元素td2
        var a ="";                                       //声明变量a，并赋值为空，变量即将用于下文的for循环
         sex =document.getElementsByClassName("sex");     //定义类名为sex的所有元素列表为“sex”，
        for(var i=0;i<sex.length;i++){                   //性别验证
            if (sex[i].checked)  //判断sex[i]是否为checked的值         //name属性让机器识别到“男“”女”为同类单选框
                a = sex[i].value;   //如果满足条件，则输出sex[i]的值
            td2.innerHTML =a;       //将有checked属性的值赋给td2的元素内容，
        }
        var td3=document.createElement("td");            //创建td3元素
        td3.innerHTML=document.getElementById("year").value;    //将id为year的值赋给td3的元素内容
        tr.appendChild(td0);                                    //将td0元素（子类）添加到tr元素中（父类）
        tr.appendChild(td1);                                    //将td1元素（子类）添加到tr元素中（父类）
        tr.appendChild(td2);                                    //将td2元素（子类）添加到tr元素中（父类）
        tr.appendChild(td3);                                    //将td3元素（子类）添加到tr元素中（父类）
        editTable.appendChild(tr);                              //将tr元素添加到已存在的元素tbody中
    }

    function delRow(){
        var editTable=document.getElementById("tbody");//获取tr的父类，即td的父类的父类
        if(confirm("确认删除所选?")){//confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。语法：confirm(message)

            var checkboxs=document.getElementsByName("checkRow");//找到td的类名
            for(var i=0;i<checkboxs.length;i++){
                if(checkboxs[i].checked){                      //检查td0元素复选框的值是否被选中
                    var n=checkboxs[i].parentNode.parentNode;//获取td类名的父类的父类，即tr的父类
                    editTable.removeChild(n);                //删除其tr父类的子节点（即tr）
                    i--;                                     //自减少1，每执行一次减少一个tr元素
                }
            }

        }
    }

</script>
</body>
</html>

   效果图实例：(https://img-blog.csdnimg.cn/20191122120257282.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Jza2Rjemts,size_16,color_FFFFFF,t_70)
   如果各位前辈或者和我一样的新手有改进的地方或者有错误要指出，请评论留言。

js实现表格渲染

js实现表格渲染

猜你喜欢