Dom-删除表格的行和列，指定输入

最新推荐文章于 2022-04-19 10:00:06 发布

原创最新推荐文章于 2022-04-19 10:00:06 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

java之DOM 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现网页表格动态创建及行、列删除的方法。通过用户输入行数和列数，可以生成相应大小的表格，并提供删除指定行或列的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web-strom开发

1.-删除表格的行和列，指定输入

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>创建表格行和列</title>
    <link rel="stylesheet" type="text/css" href="table.css"/>
    <script>
        function crtTable(){
            var oTabNode=document.createElement("table");
            //oTabNode.id="tabid";同下面方法
            oTabNode.setAttribute("id","tabid");
            //此处需正则表达式判断
            var rowValue=parseInt(document.getElementsByName("rownum")[0].value);
             var colvalue=parseInt(document.getElementsByName("colnum")[0].value);
            for(var i=1;i<=rowValue;i++) {
                var oTrNode = oTabNode.insertRow();
                for(var j=1;j<=colvalue;j++) {
                    var oTdNode = oTrNode.insertCell();
                    oTdNode.innerHTML = i+"--"+j;
                }
            }
            //将表格节点添加到div中
            document.getElementsByTagName('div')[0].appendChild(oTabNode);
            //点击之后不能操作buttom只能创建一次
            document.getElementsByName("crtBut")[0].disabled=true;
        }
        //删除行
        function delRow(){
            //获取表格对象
            var oTabNode=document.getElementById("tabid");
            if(oTabNode==null){
                alert("表格不存在");
                return;
            }
            //获取要删除表格的表格行数
            var rowValue=document.getElementsByName("delrow")[0].value;
            if(rowValue>=1 && rowValue<=oTabNode.rows.length) {
                oTabNode.deleteRow(rowValue - 1);
            }else{
                alert("要删除的行不存在");
            }
        }
        //删除列
        function delCol(){
            //获取表格对象
            var oTabNode=document.getElementById("tabid");
            if(oTabNode==null){
                alert("表格不存在");
                return;
            }
            //获取要删除表格的表格列数
            var colValue=document.getElementsByName("delcol")[0].value;
            if(colValue>=1 && colValue<=oTabNode.rows[0].cells.length){
                for(var i=0;i<oTabNode.rows.length;i++){
                    oTabNode.rows[i].deleteCell(colValue-1);
                }
            }else{
                alert("要删除的列不存在");
            }

        }
    </script>
</head>
<body>
    行:<input type="text" name="rownum">列:<input type="text" name="colnum"/>
    <input type="button" value="创建表格" name="crtBut" onclick="crtTable()"/>
    </hr><br/>
    <input type="text" name="delrow"/><input type="button" value="删除行" onclick="delRow()"/>
    <input type="text" name="delcol"/><input type="button" value="删除列" onclick="delCol()"/>
    </hr>
    <div></div>
</body>
</html>

2.引用的css样式

table{
    border: #249bdb 1px solid;
    width: 500px;
    border-collapse: collapse;
}
table td{
    border: #249bdb 1px solid;
    padding: 10px;
}