10-24用js和jQuery向表格添加内容

一、js方法

<script>
var tb = document.querySelector('#tb tbody');//获取tbody
var inputs = document.querySelectorAll('input');//input包括学号，姓名和年龄
var btn = document.querySelector('button');//添加按钮
btn.addEventListener('click',function(){//添加按钮点击触发事件
var j=0;
for(var i=0;i<inputs.length;i++){//判断3个input框内容是否为空
if(inputs[i].value.length!=0){
j++;
}
}
if(j==3){//若三个input框内容都不为空，则进入创建节点和添加节点环节
var tr = document.createElement('tr');//创建一行
var td=[];//存储创建的td节点
var txt=[];//存储input的内容
for(var i=0;i<inputs.length;i++){
td[i]=document.createElement('td');
//存储创建的3个td
txt[i]=document.createTextNode(inputs[i].value);
//存储input里的内容
td[i].appendChild(txt[i]);//把内容加到对应的td里
tr.appendChild(td[i]);//把td添加到行里
}
td[3]=document.createElement('td');//创建删除格
td[3].innerHTML='<a href="#">删除</a>';//添加删除格
tr.appendChild(td[3]);
tb.appendChild(tr); //在tbody添加一行内容
}
});
</script>

二、jQuery实现：

<script src="js/jquery-1.12.4.js" ></script><!--先导入jQuery库-->
<script>
$(function(){
var body=$('tbody');//jq获取tbody
$('button').click(function(){//获取按钮点击触发方法
var inputs = $('input');//用inputs存储三个input框
var j=0;//控制是否能添加的变量
for(var i=0;i<inputs.length;i++){//判断3个input框内容是否为空
if(inputs[i].value.length!=0){
j++;
}
}
if(j==3){//若三个input框内容都不为空，则进入创建节点和添加节点环节
var tr=$('<tr></tr>');//创建行
var td=$('<td></td>+<td></td>+<td></td>');//创建三个td
var val=null;//存储input的内容
for(var z=0,num=td.length;z<num;z++){
val=inputs[z].value;//input[z]里的内容赋值给val
$(td[z]).html(val);//td[z]里的内容改为val
$(td[z]).appendTo(tr);//将每个赋值完的td添加到行里
}
tr.append('<td>删除</td>');//添加删除格
tr.appendTo(body);//将tr添加到tbody里
}
});
});
</script>