操作表格

最新推荐文章于 2022-04-13 15:08:41 发布

gh323093

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量131

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78451721

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

第一个表格:操作表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 300px;
            border: solid red 1px;
        }
    </style>
</head>

<body>
<div id="mydiv">

</div>
</body>
<script>
    //获取元素
    var node_div = document.getElementById("mydiv");
    //创建节点
    var node_table = document.createElement("table");
    node_table.setAttribute("border","1px ");
    //table的tr
    for(var i = 0; i < 4; i++) {
        var node_tr = document.createElement("tr");
        for(var j = 0; j < 10; j++) {
            var node_td = document.createElement("td");
            //创建text文本
            var conent = document.createTextNode(i+"姓名"+j);
            node_td.appendChild(conent); //姓名
            node_tr.appendChild(node_td); //<td>   <tr><td></td></tr>
        }
        //把tr添加到table中
        node_table.appendChild(node_tr); //<tr>
    }
    node_div.appendChild(node_table); //<table>
</script>
</html>

第二个表格:添加删除

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 300px;
            border: solid red 1px;
        }
    </style>
    <script>
        function tab_add(){
            //得到table
            var node_table=document.getElementById("tab");
            //获得table中有几个
            var get_tr= node_table.children[0];//<tr>
            console.log("--->hangd",get_tr);
            //去行中获取列
            var sum_td=get_tr.children[0];
            console.log("lie---",sum_td);

            var node_tr=   document.createElement("tr");
            for(var j=0;j<sum_td.children.length;j++){
                var node_td=   document.createElement("td");
                node_td.innerText="添加的值";
                node_tr.appendChild(node_td);
            }
            node_table.appendChild(node_tr);
        }
    </script>
</head>
<body>
<input type="button" οnclick="tab_add()" value="添加一行" />
<table id="tab" >
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>性别x</td>
        <td>性别x</td>
    </tr>
</table>
</body>
<script>
    //获取元素
</script>
</html>

第三个表格:操作多行多列表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 300px;
            border: solid red 1px;
        }
    </style>
</head>
<body>
<div id="mydiv">
</div>
</body>
<script>
    //获取元素
    var node_div=document.getElementById("mydiv");
    //创建节点
    var node_table=document.createElement("table");
    //node_table.setAttribute("border","1px ");
    //table的tr
    var node_tr=document.createElement("tr");
    var node_td=document.createElement("td");
    //创建text文本
    var conent= document.createTextNode("姓名");

    //添加从小到大
    node_td.appendChild(conent);//姓名
    node_tr.appendChild(node_td); //<td>   <tr><td></td></tr>
    //把tr添加到table中
    node_table.appendChild(node_tr);//<tr>
    node_div.appendChild(node_table);//<table>
</script>
</html>

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作表格

第一个表格:操作表格html>html>head> meta charset="UTF-8"> title>Titletitle> style> table { width: 300px; border: solid red 1px; } style>head>body
复制链接

扫一扫

专栏目录