表格行记录动态增加和删除

fantasyyong

浏览: 361247 次
性别:
来自: 北京

最近访客更多访客>>

我啊来了

wangyy

小雷看天下

u010696927

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

HTML J#

应用实例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>
      新增行数:&nbsp;<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

分享到：

confirm用法和例子 | 新思钟明博:创业来源于一次成功运营项目的 ...

2008-02-27 01:14
浏览 4922
评论(5)
查看更多

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

自己都不测试就往上贴,有错误

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论