1、运行效果：
2、需求
2-1、点击“修改”可以修改书籍的数量
2-2、点击“删除”可以删除该行书籍信息
2-3、表格第一行第一列为全选框，实现全选框效果
2-4、点击“反选书籍”，则选中的书籍变为未选中，未选中的变为选中
2-5、点击“添加书籍”，新增一行书籍信息（具体信息在代码中内置即可）
2-6、点击“删除书籍”，则删除选中的该行书籍信息
2-7、点击“赋值书籍”，则复制一行选中的书籍信息追加到表格末尾
3、具体实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作表格</title>
<style type="text/css">
td{
border: 1px solid;
}
table{
border: 1px solid;
width: 600px;
margin: auto;
}
</style>
<script type="text/javascript">
//将数量列中数字变为文本框的方法
function updateNumberOne(btn){
var trObj=btn.parentNode.parentNode;//获取修改按钮所在的tr对象
var cs=trObj.cells;//获取由tr下所有的td对象组成的数组
//一旦点击修改，则数字变成文本框
var numBtn=cs[3];
/*
* TODO 如何让这个标签生成就获得焦点
*/
numBtn.innerHTML="<input type='text' value='"+numBtn.innerHTML+"' onblur='updateNumberTwo(this)' />";
}
//将数量列中文本框变为输入的数字的方法
function updateNumberTwo(btn){
if(!isNaN(btn.innerHTML)){
var tdObj=btn.parentNode;
tdObj.innerHTML=btn.value;
}
}
//删除书籍的方法
function deleteRow(btn){
var tableObj=document.getElementById("tab");//获取table对象
var trObj=btn.parentNode.parentNode;//获取修改按钮所在的tr对象
tableObj.deleteRow(trObj.rowIndex);//删除该行
}
//全选功能实现
function selectAll(btn){
var fxks=document.getElementsByName("fxk");
if(btn.checked){
//遍历并选中
for(var i=0;i<fxks.length;i++){
fxks[i].checked=true;
}
}else{
//遍历并取消选中
for(var i=0;i<fxks.length;i++){
fxks[i].checked=false;
}
}
}
//选中所有书籍后自动勾选全选框
function selectAllUpadte(btn){
var ck=document.getElementById("ck");//获取全选框对象
//判断
if(btn.checked){
var fxks=document.getElementsByName("fxk");
//遍历并选中
for(var i=0;i<fxks.length;i++){
//只要找到一个书籍没有被选中，就不勾选全选框，并立马结束方法
if(!fxks[i].checked){
ck.checked=false;
return;
}
}
//所有书籍都被选中，勾选全选框
ck.checked=true;
}else{
ck.checked=false;
}
}
//反选书籍的方法
function reverseSelect(){
var fxks=document.getElementsByName("fxk");
var ck=document.getElementById("ck");
//直接将所有书籍选择框反选
for(var i=0;i<fxks.length;i++){
fxks[i].checked=!fxks[i].checked;
}
//判定书籍是否被全部选中，是则选中全选框，不是则不选中全选框
for(var i=0;i<fxks.length;i++){
if(!fxks[i].checked){
ck.checked=false;
return;
}
}
ck.checked=true;
}
//添加书籍的方法
function addBooks(){
var tab=document.getElementById("tab");//获取table对象
var trObj=tab.insertRow();//新增行的行对象
//在新增的行内新增单元格并给单元格赋值
var col1=trObj.insertCell();
col1.innerHTML="<input type='checkbox' name='fxk' onclick='selectAllUpadte(this)' />";
var col2=trObj.insertCell();
col2.innerHTML="《程序员的自我修养》";
var col3=trObj.insertCell();
col3.innerHTML="烟台吴亦凡";
var col4=trObj.insertCell();
col4.innerHTML="33";
var col5=trObj.insertCell();
col5.innerHTML="<input type='button' value='修改' onclick='updateNumberOne(this)' /><input type='button' value='删除' onclick='deleteRow(this)' />";
}
//删除书籍的方法
function deleteBooks(){
var tab=document.getElementById("tab");//获取table对象
var fxks=document.getElementsByName("fxk");//获取书籍选择框对象
//遍历
for(var i=0;i<fxks.length;i++){
//删除勾选的书籍
if(fxks[i].checked){
var trObj=fxks[i].parentNode.parentNode;
tab.deleteRow(trObj.rowIndex);//删除该行
i--; //删除该行后该行后每一个元素的索引前移1，指针也应该前移1
}
}
}
//复制书籍的方法
function copyBooks(){
var tab=document.getElementById("tab");//获取table对象
var fxks=document.getElementsByName("fxk");//获取书籍选择框对象
//遍历
for(var i=0;i<fxks.length;i++){
//删除勾选的书籍
if(fxks[i].checked){
var trObj=fxks[i].parentNode.parentNode;//得到要复制的书籍
var trCopy=tab.insertRow();//新建一列
trCopy.innerHTML=trObj.innerHTML;//复制
}
}
}
</script>
</head>
<body>
<table id="tab">
<h1 align="center">js操作表格</h1>
<hr />
<center>
<input type="button" name="" id="" value="反选书籍" onclick="reverseSelect()"/>
<input type="button" name="" id="" value="添加书籍" onclick="addBooks()"/>
<input type="button" name="" id="" value="删除书籍" onclick="deleteBooks()"/>
<input type="button" name="" id="" value="复制书籍" onclick="copyBooks()"/>
</center>
<tr>
<td>
<input type="checkbox" id="ck" onclick="selectAll(this)" />
</td>
<td>书籍名称</td>
<td>作者</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="fxk" onclick="selectAllUpadte(this)" />
</td>
<td>《java从入门到放弃》</td>
<td>吉安吴彦祖</td>
<td>20</td>
<td>
<input type="button" value="修改" onclick="updateNumberOne(this)" />
<input type="button" value="删除" onclick="deleteRow(this)" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="fxk" onclick="selectAllUpadte(this)" />
</td>
<td>《高性能MySQL》</td>
<td>邯郸彭于晏</td>
<td>50</td>
<td>
<input type="button" value="修改" onclick="updateNumberOne(this)" />
<input type="button" value="删除" onclick="deleteRow(this)" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="fxk" onclick="selectAllUpadte(this)" />
</td>
<td>《java编程思想》</td>
<td>临汾宋仲基</td>
<td>40</td>
<td>
<input type="button" value="修改" onclick="updateNumberOne(this)" />
<input type="button" value="删除" onclick="deleteRow(this)" />
</td>
</tr>
</table>
</body>
</html>
6710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
