js动态新增/删除table表的行和列

本文介绍了一种使用JavaScript实现的表格操作方法,包括添加和删除行与列的功能。通过实例演示了如何动态地修改HTML表格结构,适用于需要灵活调整表格布局的应用场景。

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

亲测兼容谷歌,360,火狐,IE8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript删除行和列</title>

<script language="javascript" type="text/javascript">
 
        function findObj(theObj, theDoc) {
            var p, i, foundObj;
            if (!theDoc) theDoc = document;
            if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
                theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
            }
            if (!(foundObj = theDoc[theObj]) && theDoc.all)
                foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
            if (!foundObj && document.getElementById)
                foundObj = document.getElementById(theObj); return foundObj;
        }
 
        //添加一个列
        count = 1;
        function AddNewColumn() {
            var txtTDLastIndex = findObj("txtTDLastIndex", document);
            var columnID = parseInt(txtTDLastIndex.value);
 
            var tab = document.getElementById("tab");
            var rowLength = tab.rows.length;
            var columnLength = tab.rows[1].cells.length;
 
            for (var i = 0; i < rowLength; i++) {
                if (i == 0) {
                    var oTd = tab.rows[0].insertCell(columnLength);
                    oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
                } else if (i == 1) {//第一列:序号
                    var oTd = tab.rows[1].insertCell(columnLength);
                    oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";
                } else if (i > 1) {
                    var oTd = tab.rows[i].insertCell(columnLength);
                    oTd.id = "column" + columnID;
                    oTd.innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>";
                }
            }
 
        }
 
        //添加一个行
        var index = 1;
        function AddNewRow() {
            var txtTRLastIndex = findObj("txtTRLastIndex", document);
            var rowID = parseInt(txtTRLastIndex.value);
 
            var tab = findObj("tab", document);
            var columnLength = tab.rows[0].cells.length;
 
            //添加行
            var newTR = tab.insertRow(tab.rows.length);
            newTR.id = "SignItem" + rowID;
 
            for (var i = 0; i < columnLength; i++) {
                if (i == 0) {//第一列:序号
                    newTR.insertCell(0).innerHTML = ++index;
                } else if (i > 0 && i < 4) {
                    newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
                }
                else if (i >= 4) {
                    newTR.insertCell(i).innerHTML = "<textarea id=''  rows='4' style='width:150; height:40px;'></textarea>";
                }
            }
 
            //添加列:删除按钮
            var lastTd = newTR.insertCell(columnLength);
            lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
 
            //将行号推进下一行
            txtTRLastIndex.value = (rowID + 1).toString();
        }
 
        //删除指定行
        function DeleteSignRow(rowid) {
            var tab = findObj("tab", document);
            var signItem = findObj(rowid, document);
 
            //获取将要删除的行的Index
            var rowIndex = signItem.rowIndex;
 
            //删除指定Index的行
            tab.deleteRow(rowIndex);
 
 
            //重新排列序号,如果没有序号,这一步省略
            for (i = 2; i < tab.rows.length; i++) {
                tab.rows[i].cells[0].innerHTML = i - 1;
            }
 
            --index
        }
 
        //删除指定列
        function DeleteSignColumn(columnId) {
            var tab = document.getElementById("tab");
            var columnLength = tab.rows[1].cells.length;
 
            //删除指定单元格 
            for (var i = 0; i < tab.rows.length; i++) {
                tab.rows[i].deleteCell(columnId);
            }
 
            //重新排列序号,如果没有序号,这一步省略
            var column = columnLength - 4;
 
            for (var j = 1; j < column; j++) {
                tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";
            }
 
            --count;
        }
 
 
        //清空列表
        function ClearAllSign() {
            //if (confirm('确定要清空所有吗?')) {
            index = 0;
            var tab = findObj("tab", document);
            var rowscount = tab.rows.length;
 
            //循环删除行,从最后一行往前删除
            for (i = rowscount - 1; i > 1; i--) {
                tab.deleteRow(i);
            }
 
            //重置最后行号为1
            var txtTRLastIndex = findObj("txtTRLastIndex", document);
            txtTRLastIndex.value = "1";
 
            //预添加一行
            AddNewRow();
            //}
        }
    </script>
<style>
table *{border:1px red solid;}
</style>
</head>
<body>
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
        <table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"
            style="text-align: center">
            <tr id="tr1">
                <td>
                      
                </td>
                <td>
                      
                </td>
                <td>
                      
                </td>
                <td>
                      
                </td>
                <td>
                      
                </td>
            </tr>
            <tr id="trHeader">
                <td style="background: #D3E6FE">
                    NO
                </td>
                <td style="background: #D3E6FE">
                    试验项目
                </td>
                <td style="background: #D3E6FE">
                    检验项目
                </td>
                <td style="background: #D3E6FE">
                    标准
                </td>
                <td style="background: #D3E6FE">
                    1
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    <input id='textItem0' type='text' style="border: 0px" size='12' />
                </td>
                <td>
                    <input id='checkItem0' type='text' style="border: 0px" size='12' />
                </td>
                <td>
                    <input id='stand0' type='text' style="border: 0px" size='12' />
                </td>
                <td>
                    <textarea rows="4" id="" style="width: 150px; height: 40px;"></textarea>
                </td>
            </tr>
        </table>
        <table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">
            <tr>
                <td style="background: #D3E6FE">
                </td>
                <td style="background: #D3E6FE">
                    <input type="button" name="Submit" value="新增行" onclick="AddNewRow()" />
                </td>
                <td style="background: #D3E6FE">
                    <input type="button" name="Submit" value="新增列" onclick="AddNewColumn()" />
                </td>
                <td style="background: #D3E6FE">
                    <input type="button" name="Submit2" value="全部清空" onclick="ClearAllSign()" />
                </td>
                <td style="background: #D3E6FE">
                    <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
                    <input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

效果图为:


结果为:


在Vue.js中,`el-table`是一个基于Element UI的高级格组件,可以很方便地处理格数据的增删改查操作。要实现在格中动态添加、插入、删除以及支持单元格编辑,你可以按照以下步骤操作: 1. 定义格的数据源 `data` 作为数组,每个元素代数据,包含固定的可变的信息。 ```javascript data() { return { tableData: [ {固有1: '值1', 固定2: '值2'}, {固有1: '值3', 固定2: '值4'} ], // 可变定义 columns: [ {prop: '固定1', label: '固定1', fixed: 'left'}, // 左固定 {prop: '固定2', label: '固定2'} // 不固定 ] }; } ``` 2. 使用`columns`动态添加新。例如,当你需要添加新的动态时,可以在适当的时候追加到`columns`数组中。 ```javascript addColumn(newColumn) { this.columns.push(newColumn); this.$nextTick(() => { this.tableData.forEach(item => (item[newColumn.prop] = '')); // 初始化新的值 }); }, ``` 3. 对于单元格的可编辑,可以利用`el-form``el-input`结合,给每个需要编辑的单元格加上一个`v-model`绑定。同时,当头的`type`设置为`selection`时,可以配合`@row-click`事件监听点击,打开对应的编辑状态。 ```html <el-table-column type="selection" width="55"></el-table-column> <template v-for="(column, index) in columns"> <el-table-column :key="index" :prop="column.prop" :label="column.label"> <template slot-scope="scope"> <!-- 如果是可编辑单元格 --> <el-form-item :model="scope.row[column.prop]" v-if="isEditable(column)"> <el-input v-model="scope.row[column.prop]"></el-input> </el-form-item> <!-- 否则直接展示单元格内容 --> <span v-else>{{ scope.row[column.prop] }}</span> </template> </el-table-column> </template> <script> // 检查当前是否允许编辑 function isEditable(column) { return column.editable !== false; } </script> ``` 4. 动态删除时,你需要移除对应的数据源配置,并更新视图。 ```javascript deleteColumn(index) { this.columns.splice(index, 1); // 移除 this.tableData.forEach(item => delete item[this.columns[index].prop]); // 清空已删除的数据 }, ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值