document操作表格元素
<html>
<head>
<title>js操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
table{
margin: auto;
margin-top: 20px;
}
tr{
height: 40px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//实现修改功能
function updateCount(btn){
//获取要修改的td元素对象
//获取要修改内容所在的⾏对象
var tr=btn.parentNode.parentNode;
/
/获取该⾏下的所有单元格对象数组
var lls;
//获取要修改的单元格对象
var td=cs[3];
//修改单元格内容为⽂本框
if(!isNaN(td.innerHTML)){
td.innerHTML="<input type='text' value='"+td.innerHTML+"' onblur='saveCount(this)' />";
}
}
//保存数据
function saveCount(inp){
/
/获取要修改的单元格对象
var td=inp.parentNode;
//修改数量
td.innerHTML=inp.value;
}
//删除⾏
function delRow(btn){
firm("你确定要删除吗?")){
//获取要删除的⾏
var tr=btn.parentNode.parentNode;
//获取表格对象
var ElementById("ta");
//删除⾏，注意获取当前⾏的⾓标。
ta.wIndex);
}
}
/*---------------------js操作多选框--------------------------------------*/
//全选
function chooseAll(){
//获取全选的checkbox对象
var ElementById("ck");
//获取所有的checkbox
var ElementsByName("chk");
//全选
if(ch.checked){
for(var i=0;i<chk.length;i++){
chk[i].checked=true;
}
}else{
}else{
for(var i=0;i<chk.length;i++){
chk[i].checked=false;
}
}
}
//全选按钮优化
function checkChoose(chk){
//获取所有的checkbox
var ElementsByName("chk");
//判断
if(chk.checked){
for(var i=1;i<chks.length;i++){
if(!chks[i].checked){
return;
}
}
}else{
}
}
//反选
function reverseChk(){
//获取所有的
var ElementsByName("chk");
//遍历
for(var i=1;i<chks.length;i++){
chks[i].checked=!chks[i].checked;
}
//校验全选
for(var i=1;i<chks.length;i++){
if(!chks[i].checked){
return;
}
}
}
//添加⾏
function addRow(){
//获取表格对象
var ElementById("ta");
//新增⾏
var tr=ta.insertRow();
//在新增⾏中新增单元格
var cell0=tr.insertCell(0);
cell0.innerHTML="<input type='checkbox' name='chk' onclick='checkChoose(this)'/>";
var cell1=tr.insertCell(1);
cell1.innerHTML="《西游记后传》";
var cell2=tr.insertCell(2);
cell2.innerHTML="赵⽼师";
var cell3=tr.insertCell(3);
cell3.innerHTML="20";
var cell4=tr.insertCell(4);
cell4.innerHTML="<input type='button' value='修改' onclick='updateCount(this)'/> <input type='button' value='删除' onclick='delRow(this)'/>";    }
//复制⾏
function copyRow(){
html表格元素
//获取表格对象
var ElementById("ta");
//获取要复制的⾏
var ElementsByName("chk");
for(var i=1;i<chks.length;i++){
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
var tr=chks[i].parentNode.parentNode;
//复制⾏
var trcopy=ta.insertRow();
trcopy.innerHTML=tr.innerHTML;
}
}
}
//删除⾏
function delRows(){
//获取表格对象
var ElementById("ta");
//获取要复制的⾏
var ElementsByName("chk");
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
/
/获取要删除的⾏对象
var tr=chks[i].parentNode.parentNode;
ta.wIndex);
}
}
}
</script>
</head>
<body >
<h3>js操作表格</h3>
<hr />
<input type="button" id="" value="反选" onclick="reverseChk()"/>
<input type="button" id="" value="新增⾏" onclick="addRow()"/>
<input type="button" id="" value="复制⾏" onclick="copyRow()" />
<input type="button" id="" value="删除⾏" onclick="delRows()" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chk" id="ck" value="1" onclick="chooseAll()"/></td>    <td width="200px">书名</td>
<td width="150px">作者</td>
<td width="150px">数量</td>
<td width="150px">操作</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="2" onclick="checkChoose(this)"/></td>
<td>《java从⼊门到放弃》</td>
<td>wollo</td>
<td>5</td>
<td>
<input type="button" id="" value="修改" onclick="updateCount(this)"/>
<input type="button" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="3" onclick="checkChoose(this)"/></td>
<td>《⾼淇300集》</td>
<td>⽼⾼</td>
<td>10</td>
<td>
<input type="button" id="" value="修改" onclick="updateCount(this)"/>
<input type="button" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="4" onclick="checkChoose(this)"/></td>
<td>《⼤都市商丘传记》</td>
<td>wollo</td>
<td>20</td>
<td>
<td>
<input type="button" id="" value="修改" onclick="updateCount(this)"/>    <input type="button" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。