JavaScript 动态增加行~

最新推荐文章于 2016-06-12 15:24:30 发布

原创最新推荐文章于 2016-06-12 15:24:30 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #table #function #input #class #action

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现动态表格中行的增删操作的方法，包括创建新行、删除现有行，并提供了HTML和CSS代码示例。

JS代码:

window.onload = function() {
var add = $('add');
	var del = $('del');
	var i=1;
	add.onclick = function() {
		var tableObject = new Object();
		var isneed = true;
		tableObject = $('CloneNodeShow');
		if (isneed) {
			var newTR=tableObject.insertRow(tableObject.rows.length); 
			var td0=newTR.insertCell(newTR.cells.length);
			var td1=newTR.insertCell(newTR.cells.length); 
			var td2=newTR.insertCell(newTR.cells.length); 
			var td3=newTR.insertCell(newTR.cells.length);
			
			td0.innerHTML=(++i);
			td1.innerHTML='<input type="text" name="txtmember" />';
			td2.innerHTML='<input type="text" name="txtusername" />';
			//true表示深度克隆 
			var newSelect= $('txtday').cloneNode(true);
			newSelect.id='txtday'+i;
			td3.appendChild(newSelect); 
		}
	};
	del.onclick = function() {
		var i=document.getElementById('CloneNodeShow').rows.length;
		document.getElementById('CloneNodeShow').deleteRow(i-1);
	};
};

HTML代码:

<form action="?action=update" method="post">
<table id="CloneNodeShow">
	<tbody>
	<tr><th class="num">序号</th><th>员工号</th><th>姓名</th><th>班别</th><th class="img"><img id="add" src="images/add.png" alt="添加" onclick="AddRow()"/><img id="del" src="images/jian.png" alt="删除" /></th></tr>
	<tr>
		<td>1</td>
		<td><input type="text" name="txtmember" /></td>
		<td><input type="text" name="txtusername" /></td>
		<td>
			<select name="txtday" id="txtday">
				<option value="白班" selected="selected">白班</option>
				<option value="夜班">夜班</option>
			</select>
		</td>
	</tr>
	</tbody>
</table>
<table>
<tr><td class="submit"><input type="submit" name="submit" value="添加 "/></td></tr>
</table>
</form>

CSS:

#content table {
	width:100%;
	color:#666666;
}
#content table tr th,#content table tr td {
	border-bottom: 1px solid #EEEEEE;
	padding:12px;
}
#content table tr th {
	font-weight:normal;
    text-align:left;
    width:15%;
}
#content table tr th.img {
	width:10%;
	cursor:pointer;
}
#content table tr th.num {
	 width:6%;
}
#content table tr td.submit {
	text-align:right;
}
#content table tr td.submit input {
	background: #2974b1;
	color:#fff;
	height:24px;
	width:50px;
	text-align:center;
	line-height:24px;
	padding:0 0 2px 6px;
	border:none;
}

以上,可以动态的增加或者减少,不过有一个不好的地方,待改进,会将TH给ROMOVE了.