求源码⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
这个思路都写出来,,还不会写,,只能说伸手党
这么详细了,还是自己动手谢谢吧
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
Highlight();
}
function addOne(obj){
var tbody = document.getElementById(‘table‘).lastChild;
var tr = document.createElement(‘tr‘);
var td = document.createElement("td");
td.innerHTML = "<input type=‘text‘/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<input type=‘text‘/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<a href=‘javascript:;‘ onclick=‘deleteRow(this)‘>删除</a>";
tr.appendChild(td);
tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj){
var tbody = document.getElementById(‘table‘).lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
function Highlight(){
var tbody = document.getElementById(‘table‘).lastChild;
trs = tbody.getElementsByTagName(‘tr‘);
for(var i =1;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor ="#f2f2f2";
}
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
}
}
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" onclick="addOne()" />
</body>
</html>
http://www.bubuko.com/infodetail-932251.html
操作表格比较麻烦,不用表格的尽量不用,
<!--支持IE9+、FF、Chrome、opera-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格的DOM操作</title>
<script>
onload = function() {
var table = document.getElementById('table'),
tbody = table.tBodies[0],
num = tbody.rows.length,
add = document.getElementById('add'),
name = document.getElementById('name'),
age = document.getElementById('age');
add.onclick = function() {
var th = document.createElement('th'),
tr = document.createElement('tr');
th.innerHTML = num++;
tr.appendChild(th);
var td = document.createElement('td');
td.innerHTML = name.value;
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = age.value;
tr.appendChild(td);
name.value = '';
age.value = '';
td = document.createElement('td');
td.innerHTML = "<a href='javascript:;'>DEL</a>";
tr.appendChild(td);
tbody.appendChild(tr);
}
tbody.addEventListener('click', function(e) { //事件委托
e = e || event;
if (e.target && e.target.nodeName == 'A') {
tbody.removeChild(e.target.parentNode.parentNode);
}
}, false)
tbody.addEventListener('mouseover', function(e) { //事件委托
e = e || event;
if (e.target.nodeName == 'A')
e.target.parentNode.parentNode.style.background = '#f2f2f2';
else
e.target.parentNode.style.background = '#f2f2f2';
}, false)
tbody.addEventListener('mouseout', function(e) { //事件委托
e = e || event;
if (e.target.nodeName == 'A')
e.target.parentNode.parentNode.style.background = '#fff';
else
e.target.parentNode.style.background = '#fff';
}, false)
};
</script>
</head>
<body>
name: <input type='text' id='name' />
age: <input type='text' id='age' />
<input type='button' id='add' value='ADD' />
<table border='1' width='500' id='table' style='border-collapse:collapse; border-spacing:0; text-align:center;'>
<thead>
<tr>
<th>序号</th>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>22</td>
<td>张三</td>
<td><a href="javascript:;">DEL</a></td>
</tr>
<tr>
<th>2</th>
<td>23</td>
<td>李四</td>
<td><a href="javascript:;">DEL</a></td>
</tr>
<tr>
<th>3</th>
<td>22</td>
<td>王五</td>
<td><a href="javascript:;">DEL</a></td>
</tr>
</tbody>
</table>
</body>
</html>
学习前段是个苦逼的差事,少年一定要勤快,加油啊!