实现的效果:通过在表单中输入信息后,可以在表格中显示输入的信息。同时,也可以删除和修改该行的信息。
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/formCss.css" />
</head>
<body>
<table id="myTab">
<tr>
<td>姓名</td>
<td>学号</td>
<td>性别</td>
<td>班级</td>
<td>操作</td>
</tr>
</table>
<form method="post" action="#">
<div>
姓名:<input type="text" id="name"/><br />
学号:<input type="text" id="idCard"/><br />
性别:<input type="text" id="sex"/><br />
班级:<input type="text" id="Class"/><br />
<input type="button" value="确认" id="notarize" onclick="add()"/>
</div>
</form>
</body>
<script type="text/javascript" src="js/myJs.js" ></script>
</html>
- CSS
div{
text-align: center;
margin: 250px;
}
input{
border: 2px solid red;
border-radius: 4px;
margin-top: 10px;
}
/*确定按钮*/
#notarize{
background-color:crimson;
color: white;
padding: 7px 23px;
margin: 15px;
border: none;
border-radius: 4px;
}
table,td,tr
{
margin: auto;
border: 1px solid black;
}
table
{
table-layout: fixed; /*fixed固定表格的布局*/
width:50%;
text-align: center;
background-color: aliceblue;
}
tr
{
height:20px;
}
/*错误和修改按钮*/
#del{
color: #FFFFFF;
background-color:darkgray;
border: none;
margin:auto;
margin-left: 3px;
}
/*修改文本框*/
#txt{
border: none;
width: 50px;
margin-top: -8px;
}
- JavaScript
var tab = document.getElementById("myTab");
function add(){
var name = document.getElementById("name");
var id = document.getElementById("idCard");
var sex = document.getElementById("sex");
var classroom = document.getElementById("Class");
/*在表格的最后一行插入新行*/
var newRow = tab.insertRow(-1);
/*在新行中插入多个空的"td"标签*/
var rname = newRow.insertCell(0);
var rid = newRow.insertCell(1);
var rsex = newRow.insertCell(2);
var rclass = newRow.insertCell(3);
var show = newRow.insertCell(4);
/*给单元格设置值*/
rname.innerHTML = name.value;
rid.innerHTML = id.value;
rsex.innerHTML = sex.value;
rclass.innerHTML = classroom.value;
show.innerHTML = "<input type='button' value='删除' id='del'οnclick='dele(this)'/>"+
"<input type='button' value='修改' id='del'οnclick='alter(this)'/>";
/*每一次按下确定按钮后,都把输入框的内容清空*/
name.value = null;
id.value = null;
sex.value = null;
classroom.value =null;
}
/*删除按钮*/
function dele(obj){
/*通过寻找"tr"节点,从删除按钮位置往上找,后返回该行在表中的位置*/
var index = obj.parentNode.parentNode.rowIndex;
/*从表格删除一行*/
tab.deleteRow(index);
}
/*修改按钮*/
function alter(obj){
/*返回包含行中所有的单元格的一个数组*/
var cols = obj.parentNode.parentNode.cells;
var oldName = cols[0].innerHTML;
var oldID = cols[1].innerHTML;
var oldSex = cols[2].innerHTML;
var oldClass = cols[3].innerHTML;
/*在各自的单元格中添加文本框*/
cols[0].innerHTML = "<input type='text' value='"+oldName+"' id='txt'/>";
cols[1].innerHTML = "<input type='text' value='"+oldID+"' id='txt'/>";
cols[2].innerHTML = "<input type='text' value='"+oldSex+"' id='txt'/>";
cols[3].innerHTML = "<input type='text' value='"+oldClass+"' id='txt'/>";
/*把修改按钮改为确定按钮*/
cols[4].lastChild.value="确定";
cols[4].lastChild.setAttribute("onclick","affirm(this)");
}
/*确定按钮*/
function affirm(obj){
var cols = obj.parentNode.parentNode.cells;
/*获取"td"下第一个子节点的值,并给单元格设置值*/
cols[0].innerHTML = cols[0].firstChild.value;
cols[1].innerHTML = cols[1].firstChild.value;
cols[2].innerHTML = cols[2].firstChild.value;
cols[3].innerHTML = cols[3].firstChild.value;
/*将确定按钮改为修改按钮*/
cols[4].lastChild.value="修改";
cols[4].lastChild.setAttribute("onclick","alter(this)");
}