js实现table表格的增删改查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
th{
width:250px;
height:40px;
text-align: center;
line-height:40px;
border:1px solid lightgray;
}
td{
width:250px;
height:40px;
text-align: center;
line-height:40px;
border:1px solid lightgray;
}
table{
margin-top:15px;
}
.bian1{
background: lightgray;
}
.bian2{
background: dodgerblue;
}
.aa{
background: lightgray;
}
.aaa{
background: red;
}
.
gai1{
background: green;
}
</style>
</head>
<body>
姓名：<input type="text"/>
年龄：<input type="text"/>
爱好：<input type="text"/>
<button>添加</button>
<input type="text"/>
<input type="text"/>
<button>查</button>
<input type="text"/>
<button>修改</button>
<table cellpadding="0" cellspacing="0">
<thead class="bian1">
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>操作</th>
</thead>
</table>
</body>
<script>
var tab = ElementsByTagName("table")[0] var tr = ElementsByTagName("tr")
var td = ElementsByTagName("td")
var xm = ElementsByTagName("input")[0] var nl = ElementsByTagName("input")[1]
var ah = ElementsByTagName("input")[2] var tj = ElementsByTagName("button")[0] var cha = ElementsByTagName("input")[3] var zhao = ElementsByTagName("button")[1] var xiu = ElementsByTagName("input")[4] var gai = ElementsByTagName("button")[2]  tj.onclick=function(){
//  alert("aaa")
if(xm.value==""){
alert("请输⼊姓名")
}else if(nl.value ==""){
alert("请输⼊年龄")
}else if(ah.value==""){
alert("请输⼊爱好")
}else{
var tr1 = ateElement("tr")
var td1 = ateElement("td")
var td2 = ateElement("td")
var td3 = ateElement("td")
var td4 = ateElement("td")
tr1.appendChild(td1)
tr1.appendChild(td2)
tr1.appendChild(td3)
tr1.appendChild(td4)
tab.appendChild(tr1)
td1.innerHTML = xm.value
td2.innerHTML = nl.value
td3.innerHTML = ah.value
td4.innerHTML ="<button class='sc'>删除</button>"
xm.value =""
nl.value =""
ah.value =""
ghbs()
//    单⾏删除
var sc = ElementsByClassName("sc")
for(var i=0; i<sc.length;i++){
sc[i].onclick=function(){
//      console.log(this)
this.ve()
ghbs()
}
}
//    查
//    alert("aaa")
var zhi1 = cha.value
//    console.log(zhi1)
for(var i=0; i<td.length;i++){
if(td[i].innerHTML.indexOf(zhi1)!=-1){ //      console.log(td[i])
for(var j=0; j<td.length;j++){
td[j].parentNode.className ="bbb"
}
td[i].parentNode.className ="aaa"
}
}
}
//    修改
for(var i=0; i<td.length;i++){
td[i].onclick=function(){
for(var j=0;j<td.length;j++){
td[j].className ="gai2"
}
this.className ="gai1"
}
}
var zhi2 = xiu.value
for(var i=0; i<td.length; i++){
if(td[i].className=="gai1"){
//      console.log(td[i])
td[i].innerHTML = zhi2
td[i].className ="gai2"
ghbs()
}
}
}
htmlbutton属性
}
function ghbs(){
for(var i=0; i<tr.length;i++){
if(i%2==0){
tr[i].className ="bian1"
}else{
tr[i].className ="bian2"
}
}
}
}
</script>
</html>
很简单的⼀个⼩demo

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