<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格中的添加和删除</title>
<link href="../../css/main.css" type="text/css" rel="stylesheet"/>
<link href="../../css/content.css" type="text/css" rel="stylesheet"/>
<script>
window.onload = function () {
var oTab = document.getElementById('tab1');
var aTr = oTab.tBodies[0].rows;
var name = document.getElementById('name');
var age = document.getElementById('age');
var add = document.getElementById('add');
var addMessage = document.getElementById('addMessage');
var num = aTr.length + 1;
add.onclick = function(){
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = num++;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = name.value;
if(name.value == ''){
addMessage.innerHTML = "姓名不能为空";
return false;
}
else{
addMessage.innerHTML = "";
oTr.appendChild(oTd);
}
var oTd = document.createElement('td');
//console.log(selectedIndex);
var sex = document.getElementById('sex');
var selectedIndex = sex.selectedIndex;//selectindex值应在点击时获取
oTd.innerHTML = sex.options[selectedIndex].text;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = age.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = "<a href='javascript:;'>删除</a>";
/*console.log(oTd);*/
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function(){
aRemove(this);
};
oTab.tBodies[0].appendChild(oTr); //tBodies[0]不可少
};
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length ; i++){
aA[i].onclick = function(){
aRemove(this);
}
};
function aRemove(obj){
oTab.tBodies[0].removeChild(obj.parentNode.parentNode);
}
}
</script>
</head>
<body>
<div class="add-delete Wid600 content">
<form>
<ul>
<li>姓名：<input id="name" type="text" class="name"/></li>
<li>性别：
<select id="sex" class="sex">
<option value="00">男</option>
<option value="01">女</option>
</select>
</li>
<li>年龄<input id="age" type="text" class="age"/></li>
<li><input id="add" type="button" value="添加"/></li>
</ul>
</form>
<table id="tab1" style=" 100%;" class="padding">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王麟</td>
<td>男</td>
<td>37</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李梅</td>
<td>女</td>
<td>26</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>张岗</td>
<td>男</td>
<td>29</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>彭伟</td>
<td>男</td>
<td>28</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>张萍</td>
<td>女</td>
<td>28</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
<div><span id="addMessage" class="warning"></span></div>
</div>
</body>
</html>