表格案例
添加名字和年龄
window.onload= function () {
var btn=document.getElementById('btn');
var username=document.getElementById('username');
var age=document.getElementById('age');
var otab=document.getElementById('otab');
btn.onclick= function () {
var otr=document.createElement('tr');
var otd1=document.createElement('td');
otd1.innerHTML=otab.tBodies[0].rows.length+1;
otr.appendChild(otd1);
var otd2=document.createElement('td');
otd2.innerHTML=username.value;
otr.appendChild(otd2);
var otd3=document.createElement('td');
otd3.innerHTML=age.value;
otr.appendChild(otd3);
otab.tBodies[0].appendChild(otr);
};
};删除一行
window.onload= function () {
var btn=document.getElementById('btn');
var username=document.getElementById('username');
var age=document.getElementById('age');
var otab=document.getElementById('otab');
var oid=otab.tBodies[0].rows.length;
btn.onclick= function () {
var otr=document.createElement('tr');
var otd1=document.createElement('td');
otd1.innerHTML=++oid;
otr.appendChild(otd1);
var otd2=document.createElement('td');
otd2.innerHTML=username.value;
otr.appendChild(otd2);
var otd3=document.createElement('td');
otd3.innerHTML=age.value;
otr.appendChild(otd3);
var otd4=document.createElement('td');
var oa=document.createElement('a');
oa.innerHTML='删除';
oa.href="javascript:;";
otd4.appendChild(oa);
otr.appendChild(otd4);
oa.onclick= function () {
otab.tBodies[0].removeChild(this.parentNode.parentNode);
};
otab.tBodies[0].appendChild(otr);
};
};搜索
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function () {
var text1=document.getElementById('username');
var btn=document.getElementById('btn');
var otab=document.getElementById('otab');
btn.onclick= function () {
for(var i=0;i<otab.tBodies[0].rows.length;i++){
var arr=text1.value.split('');
otab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++){
if(otab.tBodies[0].rows[i].cells[1].innerHTML.search(arr[j])!=-1){
otab.tBodies[0].rows[i].style.background='yellow';
}
}
}
};
};
</script>
</head>
<body>
<form action="###">
姓名：<input type="text" id="username"/>
<input type="button" value="搜索" id="btn"/>
</form>
<br/>
<br/>
<table border="1px" cellpadding="0" cellspacing="0" id="otab">
<thead>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>欢欢</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>倩倩</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>朵朵</td>
<td>16</td>
</tr>
<tr>
<td>4</td>
<td>刘显良</td>
<td>16</td>
</tr>
</tbody>
</table>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.01.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
