表格中插入一行

最新推荐文章于 2024-11-05 08:35:03 发布
原创 最新推荐文章于 2024-11-05 08:35:03 发布 · 490 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用JavaScript实现的表格操作示例，包括增加、删除表格行等功能。通过具体代码展示了如何利用JavaScript对HTML表格进行动态操作，适用于网页开发中需要灵活调整表格结构的场景。
Java代码   收藏代码
  1. <HTML>   
  2. <TITLE>Form Object example</TITLE>   
  3. <HEAD>   
  4. <script language="javascript">   
  5. function delrow1()   
  6. {   
  7. var oElement=event.srcElement;   
  8. while(oElement.tagName!="TR")   
  9. {   
  10. oElement=oElement.parentElement;   
  11. }   
  12. var oTBody=oElement.parentElement;   
  13. oTBody.removeChild(oElement)   
  14. }  
  15.   
  16.   
  17.   
  18. function delrow2()//删除当前行   
  19. {   
  20. var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;   
  21. document.all.yltable.deleteRow(currRowIndex);//table10--表格id   
  22. }   
  23. function insertrow1() //增加的一行方法1   
  24. {   
  25. var newnode = document.getElementById('yltable').lastChild.cloneNode(true);   
  26. document.getElementById('yltable').appendChild(newnode);   
  27. }  
  28.   
  29. function insertrow2() //增加的一行方法2   
  30. {   
  31. newRow=document.all.yltable.insertRow(-1);   
  32. var j_1 = document.all.yltable.rows.length;   
  33. newcell=newRow.insertCell();   
  34. newRow.bgColor='#FFFFFF';   
  35. newcell.align='center';   
  36. newcell.innerHTML=""+j_1+"";  
  37.   
  38.   
  39. newcell=newRow.insertCell() ;   
  40. newRow.bgColor='#FFFFFF';  
  41.   
  42. newcell.align='center';   
  43. newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";  
  44.   
  45.   
  46. newcell=newRow.insertCell() ;   
  47. newRow.bgColor='#FFFFFF';  
  48.   
  49. newcell.align='center';  
  50.   
  51. newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';  
  52.   
  53. document.all.yltable.focus();  
  54.   
  55. }  
  56.   
  57. function inserttable()   
  58. {   
  59. var newnode = document.getElementById('yltable').cloneNode(true);   
  60. document.getElementById('ylform').appendChild(newnode);   
  61. }   
  62. </script>   
  63. </HEAD>   
  64. <BODY>   
  65. <form name="ylform" id="ylform">   
  66. <center>   
  67. <input name="button" type="button" onClick="inserttable()" value="增加表格">   
  68. <input name="button2" type="button" onClick="insertrow1()" value="增加一行1">   
  69.   
  70. <input name="button22" type="button" onClick="insertrow2()" value="增加一行2">   
  71. </center>  
  72.   
  73.   
  74. <div style="overflow-y:auto; overflow-x:visible;width:85%;height:150px">  
  75. <table border="1" align="center" width="50%" id="yltable">   
  76. <TBODY id=yl1>   
  77. <tr>   
  78. <td width="30%" height="22"><div align="center">1</div></td>   
  79. <td width="40%">   
  80. <div align="center">   
  81. <input name="textfield" type="text" value="yl">   
  82. </div></td>   
  83. <td width="30%"><div align="center">   
  84. <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  85. </div></td>   
  86. </tr>   
  87. </TBODY>   
  88. <TBODY id=yl2>   
  89. <tr>   
  90. <td><div align="center">2</div></td>   
  91. <td><div align="center">   
  92. <input name="textfield2" type="text" value="yanleigis">   
  93. </div></td>   
  94. <td><div align="center">   
  95. <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  96. </div></td>   
  97. </tr>   
  98. </TBODY>   
  99. <TBODY id=yl3>   
  100. <tr>   
  101. <td ><div align="center">3</div></td>   
  102. <td ><div align="center">   
  103. <input name="textfield22" type="text" value="Landgis@126.com">   
  104. </div></td>   
  105. <td ><div align="center">   
  106. <input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">   
  107. </div></td>   
  108. </tr>   
  109. </TBODY>   
  110. </table>   
  111. </div>  
  112.   
  113.   
  114. <center>   
  115. </center>   
  116. </form>   
  117. </BODY>   
  118. </HTML>  
  119.   
  120. <table width=450 align=center>  
  121. <tr align=center><td align=center >  
  122.       <table id="fl" name="fl" class="TableFrame" border="1" bordercolor="#7C9CCF" width=463 align=center >   
  123.         <tr class="ListTitle">   
  124.         <td width="25%" align="center">类别</td>   
  125.         <td width="46%" align="center">类别名称</td>   
  126.    <td width="25%" align="center">类别代码</td>   
  127.    <td width="3%" align="center">&nbsp;</td>   
  128.      </tr>  
  129.    </table>   
  130. </td></tr>  
  131. <tr align=center><td align=center>  
  132.       <div style="overflow-y:scroll; overflow-x:visible;width:450;height:390px;position:absolute;left:270px">  
  133.       <table id="flTable" name="flTable" class="TableFrame" border="1" bordercolor="#7C9CCF" width=450 align=center>   
  134.         
  135.         <tr onclick="getCurrentRow()" class=ListCellRow >   
  136.         <td width="26%" align=center >1111</td>   
  137.         <td width="48%" align=center >2222</td>   
  138.    <td width="26%" align=center >3333</td>   
  139.      </tr>  
  140.       
  141.        </table>  
  142.        </div>     
  143. </td></tr>  
  144. </table> 
java 表格 增加行_java中表格添加一行的问题···
weixin_42521558的博客
02-16 1035
classPhoneBook{JFrameframe;JTreetree;JTabletable;DefaultTableModeltablemodel;JTextFieldt1,t2;JButtonb1,b2;JRadioButtonrb1,rb2;JLabell1,l2,l3;Vectordata=newVector();static...class PhoneBook{JFrame fram...
java 表格 增加行_java,表格,增加行.doc
weixin_42685438的博客
02-13 1427
java,表格,增加行java,表格,增加行篇一：jsp表格增加行//增加行function addRow(){//添加一行var mainTable = document.getElementById(yourtable);var newTr = mainTable.insertRow();var newTd0 = newTr.insertCell();var newTd1 = newTr.in...
table动态增加一行
08-29
table动态增加一行，点击增加可增加，点击删除可以进行删除
java 手动，用代码添加表格的行和列
08-11
手动添加表格的行和列 代码添加表格的行和列
java表格点击添加按钮一行_实现动态表格点击按钮表格增加一行
weixin_29513805的博客
02-28 877
功能实现：点击添加按钮，表格增加一行并给其name属性赋予的值，方便获取点击删除，自动删除这一行JQuery中定义一个count变量var count = 1;function add() {var tbl = document.all.ci;var rows = tbl.rows.length;var tr = tbl.insertRow(rows);var e_id = tr.insertCe...
qt 表格中插入一行_Qt在表格中加入控件
weixin_42498206的博客
02-11 2161
任务：使用QTableWidget动态生成表格，在每行的某两列中加入QComboBox下拉框控件和QPushButton按钮控件有添加，删除，编辑功能，每行的按钮可以浏览文件夹并选择文件1、新建一个对话框QDialog，设计界面中选择Item-Widgets里的Table Widget，添加该控件，命名为tableWidget_userlist2、在Dialog的构造函数中初始化表格的一些参数//...
专题一：Labview表格控件 及 应用（三）在表格中插入一行数据
Labview十年工控_702老师的博客
04-13 9833
专题一：Labview表格控件 及 应用（三） 在表格中插入一行数据 最近一段时间，做试验台上位机编程，老是用到表格控件，这几天抽时间专门写一个表格控件的专题。有用到的朋友可以参考一下。 今天接着讲一下，表格控件的数据插入，和相关的操作 1.表格控件的数据插入原理： 表格控件是一个 2D 字符串数组。 在表格插入一行，就是在2D数组插入一行。 行、列插入类似** 以下以成绩录入为例说明 2.1 不要表头直接插入 知识点1：创建数组：把数学，语文，英语三个数值，连成一个一位数组（数值型）。 知
WPS表格中间插入新行的详细操作指南
nntxthml的博客
11-05 2338
本文详细介绍了在WPS表格中间插入新行的几种方法，包括通过右键菜单和菜单栏进行操作。同时，本文还提供了插入新行后的注意事项以及常见问题的解决方法。希望本文能够帮助用户轻松解决在使用WPS表格时遇到的行数不够用的问题，提高办公效率。
在EXCEL表格中-每一行之前插入相同数据.doc
最新发布
07-02
在Excel表格中，有时需要在每行的开始位置...通过以上步骤，可以在Excel表格的每一行之前成功插入相同的数据，无论是序号、日期还是其他标识符，都适用于此类操作。同时，操作过程中应保持数据的准确性和表格的整洁性。
Python 在Word表格中插入、删除行或列
Eiceblue的专栏
07-17 2068
本文介绍了如何使用Python在Word表格指定位置处插入行或列、以及删除Word表格中指定的行和列。
query添加或删除一行表格.
09-16
query添加或删除一行表格.很好用的，欢迎下载。
Excel添加，给指定行插入一行，合并及样式
05-06
Java代码对Excel进行增，删，改。及样式
java为table添加一行_js控制为table添加一行
weixin_42166918的博客
02-26 283
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>My JSP 'tableaddrow.jsp' starting pagefunction tabl...
[简单]docx4j表格新增行(Tr)
小瓜的博客
03-23 821
       从本篇博文开始，不提供全部的代码，详细代码见http://53873039oycg.iteye.com/blog/2194479。关键代码如下:       /** * @Description: 在表格指定位置新增一行,默认居中 */ public void addTrByIndex(Tbl tbl, int index) { addTrByIndex...
动态给表格增加/删除一行
java
12-30 172
动态给表格增加/删除一行 allCount=1 function addline() { newRow=listtable.insertRow(listtable.rows.length); newRow.ln=allCount; newRow.id=allCount; c1=newRow.insertCell(0); c1.bgColor="#FFFFFF";...
java 表格 增加行_js向table表格动态增加行删除行案例
weixin_39614834的博客
03-05 363
js向table表格动态增加行，删除行经常被用到，一般用于数据的批量添加和批量删除，本案例采用原生的JavaScript来实现，css样式自己设计，效果如图。下面是js实现表格动态增加行，删除行的html和js代码，直接复制过去就可以使用。HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">作业-动态表格#listtrth{back...
java向指定的excel单元格里添加数据
fishermanMr
03-17 5092
package org.jeecg.modules.to.util; import java.io.FileInputStream; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.hssf.usermodel.HSSFRow; import org.apache.poi.hssf.usermodel.HSSFSheet; import org.ap
java为table添加一行_Js实现Table动态添加一行的小例子
weixin_29231221的博客
02-26 479
12 3 4 5 6 7 申报部门8 街镇9 路段名称10 起止路名11 ...
java Poi操作Excel,插入行,保留行格式
javaMylife的博客
03-30 4771
动态Excel，如何在指定行后插入一定数量的空行，并且拷贝指定行的样式
pythonexce表格中插入一行
12-16
# 插入一行数据，这里以字典的形式表示新的行 new_row_data = {'A': 'New Value', 'B': 42, 'C': 'Another New Entry'} # 使用loc或insert方法添加新行 # loc方法适用于已有索引的情况 # df.loc[len(df)] = new_row...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值