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="添加" οnclick="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了.