使用 JS 为 table 增加和删除行

最新推荐文章于 2024-09-11 12:01:27 发布

weixin_34355559

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量88

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/nemesis/blog/188534

版权

2019独角兽企业重金招聘Python工程师标准>>>

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript">

	var inc = 0;
		
	
	function writeSelect(lname, value, selchk)
	{
	
		var select = "<select name='" + lname + "'>"
		var box = new Array();
		var i;
	
		box.push(select);
	
		for (i = 0 ; i < value.length; ++i) {
			box.push("<option value=");
			box.push(i.toString());
	
			if ( i == parseInt(selchk[0])) {
				box.push(selchk[1]);
			}
	
			box.push(" >");
			box.push(value[i]);
			box.push("</option>");
		}
	
		box.push("</select>");
	
		return select = box.join(""); 
	} 



	function tdAlter(td, id, number)
	{
		var index = parseInt(id) - 1;
		var showVal = Array(); 
		var chck = Array();
		var tname;		
		
		switch (parseInt(number)) {
			case 0:
				// add id 
				td.id = "td" + id;
				// add content
				td.innerHTML = id;
				break;

			case 1:
				td.align = "center";
				td.innerHTML =  "<input type='text' name='name" + id + "' size='3' maxlength='3' value=''>";
				break;

			case 2:
				td.align = "center";
				tname = "type" + id

				showVal = new Array("male", "female");
				chck[0] = '1';
				chck[1] = " selected='selected'";
				td.innerHTML = writeSelect(tname, showVal, chck);
				break;

			case 3:
				td.align = "center";
				td.innerHTML =  "<input type='text' name='tel" + id + "' size='3' maxlength='3' value=''>";
				break;


			case 4:
				td.align = "center";
				td.innerHTML =  "<input type='button' id='" + id + "' value='删除' onclick='delaline(this)' >";
				break;
				
				
				
				
				
			default:
				// add id 
				td.id = "other" + id;
				td.align = "center";
				td.innerHTML = 1;
				break;
		} // end switch()

	}


	//添加一个参与人填写行
	function AddTableRow(table, trNum, tdNum) 
	{
		var i, j;
		var trNew;
		var rowId;
		var tdNew;

		for (i = 0; i < trNum; ++i) {

			// add tr
			trNew = table.insertRow(-1);
			rowId = trNew.rowIndex.toString();	
			trNew.id = table.id + rowId;

			// add td		
			for (j = 0; j < tdNum; ++j) {
			
				tdNew = trNew.insertCell(j);
				tdAlter(tdNew, rowId, j);

			}
		}
		
	}


	function insertTable(trn)
	{
		var tdn = 5;
		var tab = document.getElementById("cnuls");
		AddTableRow(tab, trn, tdn);
	}



	function delaline(obj)
	{
		document.getElementById("cnuls").deleteRow(obj.parentNode.parentNode.rowIndex);	
	}
	

</script>
</head>



<body onload='insertTable(5);'>

	<h1>table增加删除示例</h1>

	<table class="TableNormal" id="cnuls" width="600px" border="1" bgColor="#FFD0D0" cellspacing="1" cellpadding="1">
		<tr>
			<th bgcolor="#FFAAAA" style="text-align:center;font-weight:bold">索引</th>
			<th bgcolor="#FFAAAA" style="text-align:center;font-weight:bold">名称</th>
			<th bgcolor="#FFAAAA" style="text-align:center;font-weight:bold">性别</th>
			<th bgcolor="#FFAAAA" style="text-align:center;font-weight:bold">电话</th>
			<th bgcolor="#FFAAAA" style="text-align:center;font-weight:bold">操作</th>	
		</tr>
	</table>


	<table class="TableNormal" id="cnuls" width="600px" border="1" bgColor="#FFD0D0" >
		<tr>
			<td bgcolor="#FFD0D0" align="center">
				<input type='button' name="add" id="add" value="add" onclick="insertTable(1)">
			</td>
		</tr>
	</table>

	  
	  
	  
</body>
</html>

转载于:https://my.oschina.net/nemesis/blog/188534