军理过去了，虽然昨天难过得在图书馆写思想汇报，起码分数只占总分的百分之五十/还不至于挂科/~我才和家长说，我一世英名全毁在了文科上，无论是形势与政策还是军理，青研明天就要结题了，我的任务终于通过昨晚的爆肝完成了，现在就是好好的搞搞acm和html，以下这个代码几乎就是老师的代码，我只不过是亲自动手打了一遍罢了。
还有一个问题：在删除的时候我是删除第一行，而不是我选中的那一行
已解决
实验11
用JS代码设计一个如下图1所示的页面
图1
实验内容
（1）用THML设计一个只有单元格标题的表格，没有内容；
（2）用THML5设计一个表单，可以让用户输入：学号，姓名，性别，年龄等信息；
（3）单击确定按钮表示在表格中添加一行数据；
（4）每行最右列单元格内容是操作部分：删除 修改；
（5）当用户单击修改链接后，页面变为下图2所示：
（6）用户在单元格的文本框内可以修改内容，并且可以保存修改后的内容。
图2
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="10.js"></script>
</head>
<body>
<table border="1" width="420" align="center" id="mtable">
<thead>
<tr>
<th>选择</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" id="selAll"></th>
<th colspan="5">全部选中</th>
</tr>
</thead>
<tbody id="mytable">
<!--
why not
-->
</tbody>
</table>
<hr />
<form id="myform">
<table border="1" width="300" align="center">
<tr>
<td>请输入学号</td>
<td><input type="text" id="uid" placeholder="输入学号"></td>
</tr>
<tr>
<td>请输入姓名</td>
<td><input type="text" id="uname" placeholder="输入姓名"></td>
</tr>
<tr>
<td>请选中性别</td>
<td><input type="radio" name="usex" value="男" checked>男
<input type="radio" name="usex" value="女">女
</td>
</tr>
<tr>
<td>请输入年龄</td>
<td><input type="number" id="uage" min="18" max="25" value="20"></td>
</tr>
<tr>
<td align="right"><input type="button" value="添加" onclick="addRow()"</td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
10.js
function addRow(){
var mytable = document.getElementById("mytable");
var uid = document.getElementById("uid").value;
var uname = document.getElementById("uname").value;
var usex = document.getElementsByName("usex");
var sex = "";
for(var i=0;i<usex.length;i++){
if(usex[i].checked)
sex=usex[i].value;
}
var uage = document.getElementById("uage").value;
var mytr = document.createElement("tr");
var td1 = document.createElement("td");
var td1Str = "<input type='checkbox' name='sel'>";
td1.innerHTML = td1Str;
var td2 = document.createElement("td");
td2.innerHTML = uid;
var td3 = document.createElement("td");
td3.innerHTML = uname;
var td4 = document.createElement("td");
td4.innerHTML = sex;
var td5 = document.createElement("td");
td5.innerHTML = uage;
var td6 = document.createElement("td");
var td6Str = "<a href ='#' onclick='udate(this.parentNode.parentNode.rowIndex)'>修改</a> ";
td6Str+="<a href = '#' onclick='del(this.parentNode.parentNode)'>删除</a>";
td6.innerHTML = td6Str;
mytr.appendChild(td1);
mytr.appendChild(td2);
mytr.appendChild(td3);
mytr.appendChild(td4);
mytr.appendChild(td5);
mytr.appendChild(td6);
mytable.appendChild(mytr);
var frm = document.getElementById("myform");
frm.reset();
}
function del(trr){
console.log(trr.rowIndex);
var mytable = document.getElementById("mtable");//原本是mytable
if(confirm("你确定要删除该记录吗？")){
console.log(trr.rowIndex);
mytable.deleteRow(trr.rowIndex);//here原本没有rowIndex
}
}
function udate(index){
console.log(index.rowIndex);
var mytable = document.getElementById("mtable");
var myRow = mytable.rows[index];
var count = myRow.cells.length;
for(var i=1;i<count;i++){
if(i==count-1){
var str = "<a href='#' onclick='sav(this.parentNode.parentNode)'>保存</a> ";
str+= "<a href='#' onclick='del(this.parentNode.parentNode)'>删除</a>";
myRow.cells[i].innerHTML=str;
}else{
var oldValue = myRow.cells[i].innerText;
var str = "<input type='text' name='myNew' value='"+oldValue+"'>";
myRow.cells[i].innerHTML=str;
}
}
}
function sav(rw){
var count=rw.cells.length;
var myValue = document.getElementsByName("myNew");
var arr=new Array();
for(var i=0;i<myValue.length;i++){
arr[i]=myValue[i].value;
}
for(var j=1;j<count;j++){
if(j==count-1){
var str= "<a href='#' onclick='udate()'>修改</a>; ";
str = str + "<a href='#' onclick='del()'>删除</a>";
rw.cells[j].innerHTML=str;
}else{
rw.cells[j].innerHTML=arr[j-1];
}
}
}
网友评论