Table动态增加一行

最新推荐文章于 2022-06-21 10:44:08 发布
最新推荐文章于 2022-06-21 10:44:08 发布
阅读量184 收藏
点赞数
文章标签： QQ HTML

对于动态增加一行、删除一行、删除所有行都可以操作成功。

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
<base href="<%=basePath%>">
<title>HelloWorld! Applet</title> 
<script>  
  function rowsAdd(){  
     var Container = document.getElementById("play");  
     var detailNum = Container.rows.length;  
     //var _table=document.getElementById("takesheetspec");  
     var _tr=Container.insertRow(-1);  
     //alert(_tr.rowIndex);  
     var _id='pd'+detailNum;  
     for(var i=0;i<8;i++)  
      {  
       var _td=_tr.insertCell(i);  
       _tr.id=_id;    
        switch(i)  
         {  
          case 0:  
             _td.id="cell"+detailNum;  
             _td.innerHTML=detailNum+"<a href='#' name='delete' οnclick=tabledel("+detailNum+")>删除</a>";  
             break;  
          case 1:  
             _td.innerHTML="<input type='text' size='7'>";    
             break;  
          case 2:  
             _td.innerHTML="<input type='text' size='7'>";    
             break;  
          case 3:  
             _td.innerHTML="<input type='text' size='7'>";    
             break;  
          case 4:  
            _td.innerHTML="<input type='text' size='7'>";    
             break;     
          case 5:  
              _td.innerHTML="<input type='text' size='7'>";    
             break;  
          case 6:  
             _td.innerHTML="<input type='text' size='7'>";    
             break;   
          case 7:  
             _td.innerHTML="<input type='text' size='7'>";    
             break;   
         case 8:  
             _td.innerHTML="<input type='text' size='7'>";    
         break;  
         }  
      }        
}  
function tabledel(row)  
{  
    var Container = document.getElementById("play");          
        //alert(document.getElementById('index').value);      
        var _tr=document.getElementById("pd"+row);    
        row=_tr.rowIndex;  
        Container.deleteRow(row);     
        var LastTrIndex = Container.rows.length;  
        //var afterDel=row-1;  
        row+=1;  
        for(row;row<=LastTrIndex;row++) {  
            var _td=document.getElementById("cell"+row);      
            var _tr=document.getElementById("pd"+row);    
            var newRow=_tr.rowIndex;  
            _tr.id='pd'+newRow;  
            _td.id="cell"+newRow;  
            _td.innerHTML=newRow+"<a href='#' name='delete' οnclick=tabledel("+newRow+")>删除</a>";  
        }  
}  
function tabAllDel()   
{  
var Container = document.getElementById("play");  
Container.firstChild.removeNode(true);  
//增加一行  
var tr=Container.insertRow(-1);  
var  cell  =  tr.insertCell(0);     
cell.innerHTML = "&nbsp;";  
cell  =  tr.insertCell(1);     
cell.innerHTML = "姓名";     
cell  =  tr.insertCell(2);     
cell.innerHTML = "性别";   
cell  =  tr.insertCell(3);     
cell.innerHTML = "年龄";   
cell = tr.insertCell(4);   
cell.innerHTML = "QQ";   
cell = tr.insertCell(5);   
cell.innerHTML = "MSN";   
cell= tr.insertCell(6);   
cell.innerHTML = "E-mail";      
cell= tr.insertCell(7);   
cell.innerHTML = "备注";         
}  
  </script>   

</head> 
  <body> 
  <a href="#" οnclick="rowsAdd()">新增行</a> 
  <a href="#" οnclick="tabAllDel()">删除所有行</a> 
  <table id="play"> 
    <tr> 
        <td>&nbsp;</td> 
        <td>姓名</td> 
        <td>性别</td> 
        <td>年龄</td> 
        <td>QQ</td> 
        <td>MSN</td> 
        <td>E-mail</td> 
        <td>备注</td> 
    </tr> 
  </table> 
  </body> 
</html> 

 

iteye_5514
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web table 表格动态添加以及数据解析
swl_lidy的博客
05-26 862
table 处理：http+js
table动态增加一行
shuxiaomeng的专栏
09-21 1520
My JSP 'tableaddrow.jsp' starting page function tableAddRow(tableName) { var row = tableName.insertRow(tableName.rows.length); //行对象 var i =...
el-table动态添加行,列。自定义输入表头，input hover 显示文字
qq_36958916的博客
06-21 4397
1，动态添加行 2，动态添加列 3，右键表头删除列 4，右键表体删除行 5，表格hover提示当前单元格文字，自动换行 6，表头文字自定义 7，表头，添加按钮固定，表体自适应滚动效果图：
table标签 动态 增加行
fanxiangru999的专栏
04-22 4485
table标签根据数据多少动态增加行数（挺简单一个事，用的时候真难哇~~~~~~~） 前台如下： Month Savings January $100 js中如下： var table = $("#table1"); table.append("11")
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
利用jquery给指定的table动态添加一行、删除一行的方法
11-22
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
使用jquery给指定的table动态添加一行、删除一行
10-21
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
table动态添加行并编辑
09-12
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
table动态添加行
u010985901的专栏
08-12 252
语法 [code="java"] tableObject.insertRow(index) 返回值 返回一个 TableRow，表示新插入的行。 说明 该方法创建一个新的 TableRow 对象，表示一个新的 标记，并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。 如果表是空的，则新行将被...
使用jquery为table动态添加行的实现代码
01-19
这里，用的jquery来做的。关键代码如下： 代码如下: //添加數據行； function AddRow(){ var vTb=$(“#TbData”);//得到表格ID=TbData的jquery对象 //所有的数据行有一个.CaseRow的Class,得到数据行的大小 var vNum=$(“#TbData tr”).filter(“.CaseRow”).size()+1;//表格有多少个数据行 var vTr=$(“#TbData #trDataRow1”); //得到表格中的第一行数据 var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClon
jquery 中table动态添加行和删除列操作
Tiger的专栏
05-30 1万+
1.简单的table使用定义&lt;table class="table table-bordered table-hover" style="text-align: center;" id="Result"&gt; &lt;thead&gt; &lt;tr&gt; &lt;
el-table动态添加行（包含input输入框）
hfyldx的博客
03-11 5908
<el-form size="small" :disabled="isdisabled"> <el-form-item prop="servin"> <template> <div style="font-weight:bold;text-align:center;font-size:20px">申请状态</div> <el-table ref="table" border
layui 实现点击按钮添加一行（方法渲染创建的table）
热门推荐
sj0613xz的博客
01-10 6万+
目标：layui 实现点击按钮添加一行解决方案：方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个 标签；方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object; 之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在中加样式，特别是table中有很多种控件时，样式的添加非
html表格中间增加一行,C#如何在datatable已经存在的行中间插入新的一行
weixin_39637723的博客
06-19 518
可以使用：dataTable.Rows.InsertAt(DataRow row, int position);例子：using System;using System.Collections.Generic;using System.Text;using System.Data;namespace ConsoleApplication1{class Program{static DataTabl...
js添加table数据到第一行
wcy1900353090的博客
06-23 6374
js添加table数据到第一行var tbody = document.createElement("tbody"); //获取tbody对象function add(name,sex,phone){    var tr = document.createElement("tr");    //创建一个tr标签    tr = tbody.insertRow(0);    //设置添加到第一行，默...
使用Rows.Add和Rows.Remove操作数据
weixin_40174434的博客
05-14 1916
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=News;Integrated Security=True"); con.Open(); SqlDataAdapter da = new SqlDataAdapter("select * from stu", co...
动态给table添加行点击事件
weixin_42787326的博客
01-09 3532
window.onload = function () { var trs = document.getElementsByTagName('tr'); for (let j = 0; j &lt; trs.length; j++) { trs[j].onclick = function()...
iview table增加一行减少一行_利用jquery给指定的table动态添加一行、删除一行
最新发布
05-25
利用 jQuery 给指定的 Table 动态添加一行、删除一行的示例代码如下： ```html <!DOCTYPE html> <title>iView Table Demo <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值