您的位置:首页 > 其它

动态表格,通过按钮增加行,删除时删除选择的checkbox那一行

2011-12-05 17:40 453 查看
<script>

//给table增加一行

function addTableRow() {

var table1 = document.getElementById('table1');

var cloneTab = document.getElementById('table2');

//alert(cloneTab.firstChild.firstChild.innerHTML);

//alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);

table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));

var v= table1.firstChild.childNodes;

var len = v.length;

for(var i=1;i<len;i++){

v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值

}

}

//给table删除一行

function delTableRow(){

var table1 = document.getElementById('table1');

var isChecked = document.getElementsByName('isChecked');

var len = isChecked.length;

for(var i=len-1;i>=0;i--){

if(isChecked[i].checked==true){

table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);

//alert(isChecked[i].id);

//alert(isChecked[i].parentNode.parentNode.innerHTML);

}

}

}

</script>



<!--显示table-->

<table border="0" cellpadding="0" cellspacing="0" class="datalist" id="table1">

<tr>

<th width="38" nowrap="nowrap" style="width: 5%">0</th>

<th width="38" nowrap="nowrap" >00</th>

<th width="79" nowrap="nowrap" scope="col">1</th>

<th width="70" nowrap="nowrap" scope="col">2</th>

<th width="69" nowrap="nowrap" scope="col">3</th>

<th width="66" nowrap="nowrap" scope="col">4</th>

<th width="94" nowrap="nowrap" scope="col">5</th>

<th width="107" nowrap="nowrap" scope="col">6</th>

</tr>

</table>

<!--控制table的按钮-->

<table>

<tr align="center">

<td colspan="10">

<input type="button" value="增加" onclick= "addTableRow();"/>

<input type="button" value="删除" onclick="delTableRow();"/>

</td>

</tr>

</table>

<!--模板table也叫做clone table style = "display:none"-->

<table id='table2' style="display: none">

<tr>

<th><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th>

<th width="38" nowrap="nowrap" style="width: 5%"><input type="text" size="16" maxlength="50" value=""/></th>

<th width="79" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>

<th width="70" nowrap="nowrap" scope="col"><input type="text" size="6" maxlength="10" value=""/></th>

<th width="69" nowrap="nowrap" scope="col">

<select size="1">

<option value="">请选择...</option>

<option value="1">1</option>

<option value="2">1</option>

</select>

</th>

<td width="100" nowrap="nowrap" scope="col"><input type="text" class="date150"/></td>

<th width="94" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>

<th width="71" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>

</tr>

</table>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐