实现用js操作table中的元素,功能实现增删改,创建 createElement(类型),刚开始学不知道怎么对这道题下手

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{ color:#555555; font-size:14px;}
#list{ border:solid red 1px; }
th{ background-color:#eecccc;}
</style>

</head>
<body>
实现用js操作table中的元素,功能实现增删改
<hr />
<table id="list" width="100%" border="1" cellpadding="0" cellspacing="0" >
<tr>
<th>姓名</th><th>性别</th><th>年龄</th><th>操作</th>
</tr>
<tbody>
<tr>
<td>张三</td><td>男</td><td>18</td><td>
<input type ="button" value="删除" onclick="DelFun()" />
</td>
</tr>
</tbody>
</table>

<hr />
<fieldset>
<legend>学生信息</legend>
姓名:<input type="text" id="stuName" /><br />
性别:<input type="radio" name ="sex" value="男" />男
<input type="radio" name ="sex" value="女" />女<br />
年龄:<input type ="text" id="age" /><br />
<input type ="button" value="新增" onclick="AddFun()" />
<input type ="button" value="修改" onclick="EditFun()" />

</fieldset>

</body>
</html> 展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

yugi111
推荐于2016-01-12 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.2亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
* {
    color: #555555;
    font-size: 14px;
}
#list {
    border: solid red 1px;
}
th {
    background-color: #eecccc;
}
</style>
<script>
	function DelFun () {
		var table = document.getElementById('list');
		var tr = arguments[0].parentElement.parentElement;
		table.deleteRow(tr.rowIndex);
	}	
	
	function AddFun () {
		var table = document.getElementById('list');
		var stuName = document.getElementById('stuName').value;
		var sex = document.getElementsByName('sex')[0].checked 
						 ? document.getElementsByName('sex')[0].value 
						 : document.getElementsByName('sex')[1].value;
		var age = document.getElementById('age').value;
		
		var tr = table.insertRow(table.rows.length);
		var temp = [stuName, sex, age];
		for (var i = 0; i < temp.length; i++) {
			var td = tr.insertCell(tr.cells.length);
			td.innerText = temp[i];
		}
		var td = tr.insertCell(tr.cells.length);
		var btn = document.createElement('input');
		btn.setAttribute('type','button');
		btn.onclick = function () {
			DelFun(this);
		}
		btn.value = '删除';
		td.appendChild(btn);
		
		var btn = document.createElement('input');
		btn.setAttribute('type','button');
		btn.onclick = function () {
			EditFun(this);
		}
		btn.value = '修改';
		td.appendChild(btn);
	}
	
	var editIndex = -1;
	function EditFun () {
		var tr = arguments[0].parentElement.parentElement;
		tr.style.backgroundColor = 'red';
		editIndex = tr.rowIndex;
		document.getElementById('stuName').value = tr.children[0].innerText;
		if (tr.children[1].innerText == '男') {
			document.getElementsByName('sex')[0].checked = true;
		} else {
			document.getElementsByName('sex')[1].checked = true;
		}
		document.getElementById('age').value = tr.children[2].innerText;
	}
	
	function OverFun () {
		var table = document.getElementById('list');
		var tr = table.rows[editIndex];
		var stuName = document.getElementById('stuName').value;
		var sex = document.getElementsByName('sex')[0].checked 
						 ? document.getElementsByName('sex')[0].value 
						 : document.getElementsByName('sex')[1].value;
		var age = document.getElementById('age').value;
		
		var temp = [stuName, sex, age];
		for (var i = 0; i < temp.length; i++) {
			tr.cells[i].innerText = temp[i];
		}
		tr.style.backgroundColor = '';
	}
</script>
</head>
<body>
实现用js操作table中的元素,功能实现增删改
<hr />
<table id="list" width="100%" border="1" cellpadding="0" cellspacing="0" >
<thead>
<tr>
    <th>姓名</th><th>性别</th><th>年龄</th><th>操作</th>
</tr>
</thead>
<tbody>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
        <td>
            <input type ="button" value="删除" onclick="DelFun(this)"  /><input type ="button" value="修改" onclick="EditFun(this)" />
        </td>
    </tr>
</tbody> 
</table>

<hr />
<fieldset>
    <legend>学生信息</legend>
    姓名:<input type="text" id="stuName" /><br />
    性别:<input type="radio" name ="sex" value="男" checked />男
     <input type="radio" name ="sex" value="女" />女<br />
     年龄:<input type ="text" id="age" /><br />
     <input type ="button" value="新增" onclick="AddFun()" />
     <input type ="button" value="完成" onclick="OverFun()" />
</fieldset>

</body>
</html>

追问

谢谢解答，请问onclick时间里面的this是什么意思呢   比如EditFun(this)

追答

代表这个button自己，然后获取这个button所在行，不然你怎么知道你点击的是哪一行

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

实现用js操作table中的元素,功能实现增删改,创建 createElement(类型),刚开始学 不知道怎么对这道题下手

其他类似问题

为你推荐：

实现用js操作table中的元素,功能实现增删改,创建 createElement(类型),刚开始学不知道怎么对这道题下手