<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{text-align: center;}
</style>
<script type="application/javascript">
function addRows(){
var userName=document.getElementById("userName").value;
document.getElementById("userName").value=null;
var userAge=document.getElementById("userAge").value;
document.getElementById("userAge").value=null;
var userTel=document.getElementById("userTel").value;
document.getElementById("userTel").value=null;
var table=document.getElementById("tab");
var tr=document.createElement("tr");
var selTd=document.createElement("td");
var selInput=document.createElement("input");
selInput.type="checkbox";
//为后加入的复选框添加，点击事件
selInput.onclick=forupRows;
selTd.appendChild(selInput);
tr.appendChild(selTd);
var nameTd=document.createElement("td");
nameTd.textContent=userName;
tr.appendChild(nameTd);
var ageTd=document.createElement("td");
ageTd.textContent=userAge;
tr.appendChild(ageTd);
var telTd=document.createElement("td");
telTd.textContent=userTel;
tr.appendChild(telTd);
table.appendChild(tr);
//为新加入行的实现双击修改
initEditTd();
}
function selAll(obj){
//document是dom树的根节点，可以使用的方法，树上的其他节点也可以使用。
var tab=document.getElementById("tab");
var trs=tab.getElementsByTagName("tr");
if(obj.checked){
for(var i=1;i<trs.length;i++){
var tr=trs[i];
//这里可以使用上面tr.getElementByTagName("td");来获取
//另外js为我们提供了一个属性.children的方式,获取当前元素下的所有子元素
var tds=tr.children;
tds[0].children[0].checked=true;
}
}else{
for(var i=1;i<trs.length;i++){
var tr=trs[i];
//这里可以使用上面tr.getElementByTagName("td");来获取
//另外js为我们提供了一个属性.children的方式,获取当前元素下的所有子元素
var tds=tr.children;
tds[0].children[0].checked=false;
}
}
}
function delRows(){
var tab=document.getElementById("tab");
var trs=tab.children;
for(var i=trs.length-1;i>0;i--){
var check=trs[i].children[0].children[0];
if(check.checked){
tab.removeChild(trs[i]);
}
}
}
function forupRows(){
var tab=document.getElementById("tab");
var trs=tab.rows;
var selTr=null;
for(var i=1;i<trs.length;i++){
var check=trs[i].cells[0].children[0];
if(check.checked){
selTr=trs[i];
break;
}
}
document.getElementById("userName").value=selTr.children[1].textContent;
document.getElementById("userAge").value=selTr.children[2].textContent;
document.getElementById("userTel").value=selTr.children[3].textContent;
/*var tab=document.getElementById("tab");
var trs=tab.children;
var selTr=null;
for(var i=trs.length-1;i>0;i--){
var check=trs[i].children[0].children[0];
if(check.checked){
selTr=trs[i];
}
} */
//回填（children，tagname都是通用的方式，还有一种专属于表格的方式）
/*document.getElementById("userName").value=selTr.children[1].textContent;
document.getElementById("userAge").value=selTr.children[2].textContent;
document.getElementById("userTel").value=selTr.children[3].textContent;*/
}
function upRows(){
var userName=document.getElementById("userName").value;
var userAge=document.getElementById("userAge").value;
var userTel=document.getElementById("userTel").value;
var tab=document.getElementById("tab");
var trs=tab.rows;
var selTr=null;
for(var i=1;i<trs.length;i++){
var check=trs[i].cells[0].children[0];
if(check.checked){
selTr=trs[i];
break;
}
}
selTr.children[1].textContent=userName;
selTr.children[2].textContent=userAge;
selTr.children[3].textContent=userTel;
}
//页面加载完成后，为td添加双击事件
function initEditTd(){
var tab=document.getElementById("tab");
var trs=tab.rows;
for(var i=1;i<trs.length;i++){
for(var j=1;j<trs[i].cells.length;j++){
trs[i].cells[j].ondblclick=upEditTd;
}
}
}
function upEditTd(){
var tr=this.parentElement;
var index=null;
for(var i=1;i<=tr.cells.length;i++){
if(tr.cells[i]==this){
index=i;
break;
}
}
//获取表格列宽
var tab=this.parentElement.parentElement;
var titleRow=tab.rows[0];
var width=titleRow.cells[index].width;
var value=this.textContent;
this.textContent="";
var inputText=document.createElement("input");
inputText.type="text";
inputText.style.width=width;
inputText.value=value;
this.appendChild(inputText);
//键盘事件
inputText.onkeyup=overText;
}
function overText(event){
if(event.keyCode==13){
var text=this.value;
var td=this.parentElement;
// td.removeChild(this);或者
this.remove();
td.textContent=text;
}
}
</script>
</head>
<body onload="initEditTd()">
<div align="center">
<div style="width: 800px;">
姓名：<input type="text" id="userName" maxlength="5" />
年龄：<input type="text" id="userAge" />
联系方式：<input type="text" id="userTel" />
<input type="button" value="添加" onclick="addRows()" />
<input type="button" value="删除" onclick="delRows()" />
<input type="button" value="修改" onclick="upRows()" />
</div>
<table style="width: 800px;" id="tab" border="1px" >
<tr>
<th width="40px" ><input type="checkbox" onclick="selAll(this)"/></th>
<th width="120px">姓名</th>
<th width="100px">年龄</th>
<th >联系方式</th>
</tr>
<tr>
<td ><input type="checkbox"/></td>
<td >张三</td>
<td >21</td>
<td >17866666666</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=
阅读背景：
一个基于js的小实例（表格的增，删，改操作）
来源：互联网
分享到：
