- 浏览: 355951 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
willsonbin:
赞~实用
表格行记录动态增加和删除 -
ljj1160347188:
/偷笑 楼主 你欺负我们这些新学的么
java的转义字符 -
zx5191:
啥jb玩意啊
java的转义字符 -
hyde12:
楼主要严谨点
java的转义字符 -
iteeye:
楼主要严谨点
java的转义字符
- 应用实例1
原版页面增加注释.htm:
可以批量删除表格记录行,通过checkbox选择删除的行;可以批量增加记录行,通过输入框指定行数。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-js"> <title>The page of append rows to Table</title>
<script language="JavaScript"> // 新增行 function addRow(){ var textNum = document.getElementById("rownum"); // 得到新增行记录的行数 var index = textNum.value; if(!checknum(index)){ alert("You can only input number in the TEXT!"); textNum.focus(); textNum.select(); } for(var i = 0; i < index; i++){ // 得到表格对象 var tableObj = document.getElementById("mainTb"); // 得到tbody对象 var tableBodyObj = document.getElementById("mainBody"); var newRowObj = document.createElement("tr"); var newCheckBox = document.createElement("td"); var newtext1 = document.createElement("td"); var newtext2 = document.createElement("td"); var newtext3 = document.createElement("td"); newCheckBox.innerHTML = '<center><input type="Checkbox" name="checkbox" onclick = "checkBoxSel()"></center>'; newtext1.innerHTML = '<input type="text" name="newCarName" size="9">'; newtext2.innerHTML = '<input type="text" name="newCarName" size="9">'; newtext3.innerHTML = '<input type="text" name="newCarName" size="9">'; // 新增的tr节点下增加td节点 newRowObj.appendChild(newCheckBox); newRowObj.appendChild(newtext1); newRowObj.appendChild(newtext2); newRowObj.appendChild(newtext3); // tbody节点下增加tr节点 tableBodyObj.appendChild(newRowObj); } } // 新增行数选择框检查输入必须是数字 function checknum(strVal){ if (strVal.length != 0){ var r = strVal.match(new RegExp(/^[0-9]+$/)); if (r == null){ return false; }else{ return true; } } return true; } // 批量删除指定的行 function deleteRow(){ var Tblen; // 得到所有 checkbox 对象 var checkbox = document.getElementsByName("checkbox"); //var checkboxlen = document.all.checkbox.length; // 得到所有提交的checkbox个数 var checkboxlen = checkbox.length; var ischecked; // 得到删除按钮对象 var delbutton = document.getElementById("delete"); for (var i=0; i < checkboxlen; i++){ // 得到表格行数 Tblen = this.mainTb.rows.length; // 最终保留一行记录 if (Tblen == 1) { document.getElementsByName("checkbox")[0].checked = false; alert("A line have to be saved in the ID of mainTb!"); // 删除按钮不可用 delbutton.disabled = true; return false; } ischecked = checkbox[i].checked; // 如果当前的checkbox选中:删除当前节点,由于删除节点后,下面的节点上移,游标(记录行指针)也应该上移 if (ischecked) { // document.all("mainTb").deleteRow(i); document.getElementById("mainTb").deleteRow(i); // 游标(记录行指针)上移 i--; } // 重新统计checkbox个数 checkboxlen = checkbox.length; } // 删除操作后按钮状态是不可用 delbutton.disabled = true; } // checkbox按钮单击事件处理函数:是否至少选中一行记录,是可以删除操作;如果没有选择,删除按钮不可用 function checkBoxSel(){ // 得到删除按钮对象 var delbutton = document.getElementById("delete"); if(checkselect()){ delbutton.disabled = false; }else{ delbutton.disabled = true; } } function checkselect(){ // 得到所有 checkbox 对象 var checkbox = document.getElementsByName("checkbox"); // 得到所有提交的checkbox个数 var chklength = checkbox.length; var flag = false; for(var i = 0; i < chklength; i++) { if(checkbox[i].checked == true) { flag = true; break; } } if(flag == true) { return true; } else { return false; } } // 页面加载body内容时执行 function loadpage(){ var delbutton = document.getElementById("delete"); var rownum = document.getElementById("rownum"); // 初始“删除”按钮不可用 delbutton.disabled = true; // 初始行数输入框内容为空 rownum.value = ""; } </script>
</head> <body style="margin:40px" onload="loadpage()"> <h2>动态表格</h2><hr><br> <table id="inputTb" border="1" bordercolor="#4682B4" cellspacing="0" align="right"> <tr> <td> 新增行数: <input type="text" name="rownum" id="rownum" size="2" maxlength="2" > </td> </tr> <tr> <td> <input type="button" value="增加" onclick="addRow()"> </td> </tr> <tr> <td> <input type="button" value="删除" id="delete" onclick="deleteRow()" disabled="true"> </td> </tr> </table> <table id="mainTb" border="1" bordercolor="#4682B4" cellspacing="0" > <tbody id="mainBody"> <tr id="rownumber0"> <td align="center"> <input type="Checkbox" name="checkbox" onclick="checkBoxSel()"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> </tr> <tr id="rownumber1"> <td align="center"> <input type="Checkbox" name="checkbox" onclick="checkBoxSel()"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> </tr> </tbody> </table> </body> </html>
- 应用实例2
addLine.htm
删除单行表格记录。
<script language="javascript"> var i=1; function insertStr() { i++; var td = document.createElement("td"); var tr = document.createElement("tr"); var tbody = document.createElement("tbody"); tr.appendChild(td); tbody.appendChild(tr); var parNode = document.getElementById("table1"); parNode.appendChild(tbody); tr.setAttribute("name","tr"+i); tr.setAttribute("id","tr"+i); td.innerHTML="<input type='text' name='Tag"+i+"' id='Tag"+i+"' value='Tag"+i+"'><input type='button' value='Delete' name='Delete"+i+"' id='Delete"+i+"' onClick='javascript:DeleteNode("+i+")'>"; document.form1.total.value=i; } function DeleteNode(j){ var trnode=document.getElementById("tr"+j); trnode.parentNode.removeChild(trnode); } </script>
<form name="form1" method="post" action=""> <input name="tag1" type="text" id="tag1" value="Tag1"> <input name="insert" type="button" id="insert" value="Add a Tag" onClick="insertStr()"> <input type="hidden" name="total" id="total"> </form> <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"></table>
- 应用实例3
动态添加、删除行,分别通过insertRow,deleteRow方法实现,显示行号,通过rowIndex属性获得,基本可以动态实现相关功能。
<Script Language="Javascript"> var cGetRow=-99999; var lineNo = 1; function _(id) { return document.getElementById(id); } // The index of the row to be deleted. // This index starts from 0 and is relative to the logical order (not document order) // of all the rows contained inside the table. // If the index is -1 the last row in the table is deleted. function AddRow(){ //添加一行 var newTr = _("tab1").insertRow(); //添加两列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '" onClick="GetRow()">'; // 测试动态改变innerHTML中的checkbox的id alert(_("box" + lineNo).id); newTd1.innerText= '新增加行' + lineNo; lineNo++; } function DelRow(iIndex){ //删除一行 if(iIndex==-99999){ alert("系统提示:没有选中行号!"); }else{ iIndex = cGetRow; _("tab1").deleteRow(iIndex); } } function GetRow(){ //获得行索引 //两个parentElement分别是TD和TR哟,rowIndex是TR的属性 //this.parentElement.parentElement.rowIndex cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; } function ShowRow(){ //显示行号 alert(cGetRow); //alert(document.getElementsByTagName("tr").length); } </script>
<table id="tab1" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td> <td id="a">第一行</td> </tr> <tr id="tr2"> <td width=6%><input type=checkbox id="box2" onClick="GetRow()"></td> <td id="b">第二行</td> </tr> <tr id="tr3"> <td width=6%><input type=checkbox id="box3" onClick="GetRow()"></td> <td id="c">第三行</td> </tr> </table> <table id="tab1" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td> <td id="a">统计</td> </tr> </table> <input type="submit" name="Submit" value="AddRow" onclick="javascript:AddRow();"> <input type="submit" name="Submit" value="DelRow" onclick="javascript:DelRow(cGetRow);"> <input type="submit" name="Submit" value="ShowRow" onclick="javascript:ShowRow();">
- 表格动态增加行.rar (5.8 KB)
- 下载次数: 158
评论
5 楼
willsonbin
2014-08-15
赞~实用
4 楼
fantasyyong
2008-02-29
另外要注意的是:表格一般有标题行
// 表格有2行标题 var titleLine = 2; for (var i=0; i < checkboxlen; i++){ // 计算行记录数时除去title行 tablen = this.detailTable.rows.length - titleLine; if(tablen == 1){ checkboxList[0].checked = false; delbutton.disabled = true; allSelect.checked = false; return false; } isChecked = checkboxList[i].checked; if(isChecked){ // 游标(记录行指针)下移2行 document.getElementById("detailTable").deleteRow(i + titleLine); i--; } checkboxlen = checkboxList.length; }
3 楼
fantasyyong
2008-02-29
example01代码中有alert测试语句,其实这个实例中只是实现了一次删除一行的操作。其实重要的是这个功能的实现原理,代码理清后大家完全可以根据实际需求修改。原版页面增加注释.htm这个页面实现了批量的新增和删除行功能,希望大家共同学习,谢谢。
2 楼
j2sej2ee
2008-02-29
example01里面有问题
1 楼
j2sej2ee
2008-02-29
自己都不测试就往上贴,有错误
发表评论
-
jQuery学习资料
2008-04-01 22:48 2237jQuery学习资料 -
checkbox全选功能
2008-02-29 11:47 2430checkbox全选功能实例: <script ... -
Javascript显示当前日期
2008-02-28 16:43 17510Date(日期)对象可以使用Date()构造器来创建。 首先 ... -
window.open()方法使用
2008-02-28 11:56 1747window.open()支持环境: JavaScript1 ... -
confirm用法和例子
2008-02-27 10:51 18802一般用于弹出对话框(确定/否) 确定:就执行其嵌套的内容;否 ... -
showModalDialog()、showModelessDialog()方法使用详解
2008-02-26 10:02 1184Javascript有许多内建的方 ... -
window.open参数详解
2008-02-25 18:58 88051. 使用举例: <SCRIPT LANGUAGE= ... -
JavaScript日期控件02(日期选择器)
2008-02-22 00:23 2119JSCalendar1.0 应该说是现在最全,最方便的日 ... -
JavaScript日期控件01(日期选择器)
2008-02-21 23:32 7170PopupCalendar.htm页面显示 ... -
下拉框——Dynamic options
2008-02-18 15:49 1131这是一个简单的使用实例: <form name=&qu ... -
document.write方法
2008-02-18 15:09 3797一个最基本的JavaScript命令是document.wri ... -
JavaScript split() 方法
2008-02-18 14:57 1834Definition and Usage——定义与用法 Th ...
相关推荐
动态添加js,动态添加表格和删除表格,批量添加记录,批量添加
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery。用它实现起来还真的是很方便,这个是我用到...
Layui表格行添加编辑删除操作和保存数据代码,基于layui table添加一行并实现在编辑行记录后保存数据的方法,可用于对表格数据快速维护,展示修改功能,灵活自如。
js自定义表格(只适用IE) 支持以下功能: 调整列宽 表格记录排序 各种数据校验 添加行和删除行 单元格回车跳转
实例QT程序: 在QTableWidget表格的单元格中添加和删除控件。 编译可以直接运行。 运行环境WIN10 Qt5.9.7 。 资源为源码压缩包:TableWidgetCellWidget.rar 相关文章链接如下: ...
VB 利用表格批量增加新记录,在操作时,ESC:隐藏焦点并将其返回 MSFlexGrid,同时使用PopupMenu方法创建了弹出菜单。 删除回车符,以消除嘟嘟声。这个功能可以再扩展,让用户通过表格快速导入数据到库中。 当...
mysql数据库的图形工具,主要特性包括多文档界面,语法突出,拖拽方式的数据库和表格,可编辑/可增加/删除的域,可编辑/可插入/删除的记录,可显示的成员,可执行的SQL 脚本,提供与外程序接口,保存数据到CSV文件等
UITableView的多行选中效果,适合初学者,主要学习表格的选中事件,可以同时选中多行,并且在底部显示选中的行,可以滑动底部选中的行记录,点击显示的行记录,可以移除该记录,同时表格中改行更改为未选中状态。...
改程序只是java对数据库中的一个表的改变,执行查询,修改,删除,查询
(1)系统需求分析,得到系统的数据需求和功能需求,分析结果用表格记录。 (2)系统设计,包括内存数据结构设计、数据文件设计、代码设计、输入/输出设计、用户界面设计、处理过程设计。要求内存数据用链表组织,...
vue列表数据删除后主动刷新页面及刷新方法详解 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window....
简单实现图书的修改和删除功能,可以自己添加其他功能 数据库为mysql 表在压缩包里有,可以自己附加,库名为test 具体说明详见里面的 说明.txt
//检测按钮是添加还是删除 function CheckBtn(obj) { if(obj.nameProp=="Minus.gif"){ obj.src="../../App_Themes/Default/images/Plus.gif"; DelGrade(obj); } else//增加新项,图标变删除 { obj.src=".....
现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录; 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名...
《别说你懂Excel:500招玩转Excel表格与数据处理》汇集了众多Excel应用高手的“使用经验”和专家的“独门绝技”,通过500余个精挑细选的技能招数,结合工作、生活中的应用需求,安排大量案例系统并全面地讲解了Excel...
一个点击增加一条表单,并可以删除的前端组建操作,无样式,理解智商 ,大家一起学习交流
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
数据库增加:在应用中创建新表格或记录,并将其添加到现有数据库中。 数据库修改:支持对现有表格和记录进行修改操作,方便快速地更新数据。 数据库删除:可以安全地删除不再需要的表格或记录,防止数据冗余和混乱...