正文 

当前位置： 首页 > java > java框架

js-动态为table插入删除行

Marydon      2022-02-10     606

关键词：

CreateTime--2017年4月15日08:09:43
Author:Marydon
js-动态插入、删除table行
用到table的insertRow()和deleteRow()方法
<input id = "userName" type="button" value="增加行" onclick="insertRow();"/>
<input id = "userName" type="button" value="删除行1" onclick="delRow();"/>
<input id = "userName" type="button" value="删除行3" onclick="delRow3();"/>
<table id="testTab" border="1" style="border-collapse: collapse;" width="99%">
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
    </tr>
</table>
1.动态插入行
/**
 * 在最后一个tr后插入行
 */
function insertRow () {
    var table = document.getElementById("testTab");
    var newRow = table.insertRow(-1);//新增行（最后一行）
    var newCell1 = newRow.insertCell(0);//第一列
    newCell1.innerHTML = "b1";
    var newCell2 = newRow.insertCell(1);//第二个单元格
    newCell2.innerHTML = "b2";
    var newCell3 = newRow.insertCell(2);//第三个单元格
    newCell3.innerHTML = "b3";
    newRow.insertCell(3).innerHTML = "<input type=‘button‘ value=‘删除行2‘ onclick=‘delRow2(this);‘/>"
}
2.删除行
/**
 * 删除最后一行tr
 */
function delRow () {
    var table = document.getElementById("testTab");
    var lastRowIndex = table.rows.length - 1;//最后一个tr的索引值
    table.deleteRow(lastRowIndex);    
}
/**
 * 删除指定行
 * @param {Object} rowIndex
 *         行索引
 */
function delRow2 (inputObj) {
    var trObj = inputObj.parentNode.parentNode;
    var rowIndex = trObj.rowIndex;
    var table = trObj.parentNode;
    table.deleteRow(rowIndex);
}
/**
 * 有参无参都可以
 * @param {Object} obj
 */
function delRow3 (obj) {
    var tableObj = null;
    var rowIndex = -1;
    if (obj) {
        tableObj = obj.parentNode.parentNode.parentNode;
        rowIndex = obj.parentNode.parentNode.rowIndex;
    } else{
        tableObj = document.getElementById("testTab");
        rowIndex = tableObj.rows.length - 1;
    }
    tableObj.deleteRow(rowIndex);    
    
}
 
 

js实现动态添加删除table行示例

<tablecellpadding="0"cellspacing="0"border="1"style="margin:auto;width:96%;"id="LearnInfoItem"><tr><tdcolspan="8"bgcolor="#96E0E2"style="height:30px;"><h3style="text-align:center; 查看详情

用js对htmltable动态增加行删除行问题？

<html><basehref="http://localhost:8080/web/planAndLog/userWorkLog/selectUserWorkLog.jsp"><head><title></title><SCRIPTlanguage="JavaScript">vartempRow=0;varmaxRows=0;functioninsertRows()tempRow=table1.rows.length-1;maxRows=tempRow;tempRow=tempRo... 查看详情

插入 table1 select * from another table2 ，然后从 table2 中删除行

】插入table1select*fromanothertable2，然后从table2中删除行【英文标题】：insertintotable1select*fromanothertable2,thendeletetherowfromtable2【发布时间】：2017-07-0511:10:51【问题描述】：我正在尝试将行插入table1select*fromtable2，最后使用oraclesqldeveloper... 查看详情

js实现动态删除表格的行或者列-------day57

昨天记录了动态加入表格的一行，当然这个一行是指一行数据，也就是说一行多少列也是加上的，而且第几列的内容都能够加入上，先来回想下它的实现的关键点：1、varrow=table.insertRow();加入一行；2、varcell1=row.insertCell();加... 查看详情

vue+elementuiel-table完成动态添加表格&&动态合并/踩坑记录

...听）当表格数据添加行/删除行/复制时，都有表格数据的动态变化，从而计算标识3.关键：合并行方法objectSpanMethod(row,columnIndex)注意传值是...this.rowObj我也不知道为什么传this.rowObj会造成数据乱，这也是一个对象啊？？？步骤：1.... 查看详情

对table的操作(赋值动态新增行删除行保存table中多行数据对象

一、成品界面：650)this.width=650;"src="http://s3.51cto.com/wyfs02/M01/8A/14/wKiom1glhBnhEdohAAE8pzGyV-U556.jpg-wh_500x0-wm_3-wmp_4-s_1193978151.jpg"title="图像1.jpg"alt="wKiom1glhBnhEdohAAE8pzGyV-U556.jpg-wh_5 查看详情

删除+插入（移动）DB2 OLD TABLE

】删除+插入（移动）DB2OLDTABLE【英文标题】：Delete+Insert(Move)DB2OLDTABLE【发布时间】：2012-04-2716:40:44【问题描述】：我有两个表TARGET和SOURCE。我需要更新SOURCE表的行并将这些更新的行插入到TARGET表中，然后从SOURCE中删除原始行。目... 查看详情

jquery实现table动态添加行删除行以及行的上移和下移

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title></title><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>... 查看详情

asp.net实现动态添加table行

asp.net动态的生成，删除table的行,主要是在后台动态创建单元行，单元表格，效果图：2.代码：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="releaseAffair.aspx.cs"Inherits="affair_releaseAffair"%><!DOCTYPEhtml><!--发布事务页面：名称 查看详情

js如何动态插入表格

想将红框里的功能用JS来实现，但是自己尝试到现在都快3点了！还是没能研究出来。希望有大神能帮忙写一个。谢谢了！工作计划和进度报告默认显示3个最多可以同时增加到5个,也就是选择下拉框例如选择了2，那么工作计划和... 查看详情

从 oracle 表中插入然后删除行

】从oracle表中插入然后删除行【英文标题】：Insertthendeleterowsoutofanoracletable【发布时间】：2014-02-1118:27:22【问题描述】：我想看看是否有更好的方法来做到这一点。该语句将所有发生在6个月以上的行放入存档表中。然后它获取两... 查看详情

在同一个事务中插入和删除？

】在同一个事务中插入和删除？【英文标题】：INSERTandDELETEinthesametransaction?【发布时间】：2016-08-2219:40:43【问题描述】：我有一个包含一些数据的Temp_Table。根据Temp_Table中的数据，我将删除其他表中的相关行，然后将Temp-table中的... 查看详情

将动态生成的复选框添加到 react-table 并捕获行数据

】将动态生成的复选框添加到react-table并捕获行数据【英文标题】：Addingdynamicallygeneratedcheckboxestoreact-tableandcapturingrowdata【发布时间】：2018-03-1501:50:39【问题描述】：我在使用这个react-table包https://react-table.js.org/#/story/readme向行添... 查看详情

js表格插入指定行

js在table指定tr行上或下面添加tr行functiononAddTR(trIndex)        {            vartb=document.getElementById("tb 查看详情

删除/插入行到 UITableView 时 UIKit 崩溃

...：2015-05-2609:50:59【问题描述】：在我的UiTableView中，我将动态数据加载到其中，当用户滚动到UITableView的底部时，我会加载更多项目并将它们插入表格的底部。这没有问题。但是，如果用户加载项目，然后删除一个项目并滚动到... 查看详情

js动态表格

表格在script里面使用innerHTML获取标签体的内容，然后进行添加。删除则是不断的获取父节点，利用父节点删除子节点。在做这个的时候，要主要获取表格table的对象有两种方式，一是getElementById("table")，通过id获取对象。二是通过... 查看详情

从 SQL 中的多个表中级联删除行

...varchar)、EntityId(int)Table3上没有外键。我将Table1和Table2的行插入到Table3中，如下所示：IdEntityNameEnt 查看详情

javascript操作table和动态生成table

JavaScript操作Table（1）自动生成Table（添加行/删除行）<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>动态生成表格</title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jq 查看详情