<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script type="text/javascript">
var a = 3;
var tr = document.getElementsByTagName("tr");
window.onload = function() {
for(var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
//改变颜色函数
function bgcChange(obj) {
obj.onmouseover = function() {
obj.style.backgroundColor = "#f2f2f2";
}
obj.onmouseout = function() {
obj.style.backgroundColor = "#fff";
}
}
//该函数想实现，你必须得输入，不输入会有弹窗，输入之后，点击添加，那么他就由input变为p只能删除，不能修改
function inputChange(){
var inputs = document.getElementsByTagName("input");
var inputval = inputs.value;
if(inputval != " " && inputval != null){
inputs.onblur = function(){
var b = document.createElement("p");
b.innerHTML = inputval;
inputs.replaceChild(b,inputs);
}
}else{
alert("请输入学生姓名！");
}
}//这个函数有问题所以没使用，希望能帮忙修改一下
//我按照别人的，就那个创建tr+3个td,不能删除，提示是没有parentNode，打印后发现是因为this指向了window，用自己的也一样。
function add() {
var tables = document.getElementById("table");
var newtr = document.createElement("tr");
var xh=document.createElement("td");
var xm=document.createElement("td");
var del=document.createElement("td");
if(a<10){
a = "00"+a;
xh.innerHTML = "xh" + a;
xm.innerHTML = "<input type='text' placeholder='请输入学生姓名'/>";
del.innerHTML = "<a href=" + "javascript:;" + "onclick=" + "del(this)" + ">删除</a>";
a++;
}else if(a< 100) {
a = "0" + a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
'<td><input type="text" placeholder="请输入学生姓名"/></td>' +
"<td><a href=" + "javascript:;" + "onclick=" + "del(this)" + ">删除</a></td>"
a++;
} else {
a = a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
"<td><input type='text' placeholder='请输入学生姓名'/></td>" +
"<td><a href=" + "javascript:;" + "onclick=" + "del(this)" + ">删除</a></td>"
a++;
}
tables.appendChild(newtr);
newtr.appendChild(xh);
newtr.appendChild(xm);
newtr.appendChild(del);
for(var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
// 创建删除函数
function del(obj) {
var trs = obj.parentNode.parentNode;
trs.parentNode.removeChild(trs);
}
</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="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" />
<!--在添加按钮上添加点击事件 -->
</body>
</html>
求大佬 T _ T 指点，或者帮我写出来一个我想实现的效果的代码也可以，谢谢，搞得我头痛！！！
add（）那少个结束~，最主要的问题是td里面的href那，在javascript: ;外围加 ' 就完事了
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script type="text/javascript">
var a = 3;
var tr = document.getElementsByTagName("tr");
window.onload = function() {
add();
for (var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
//改变颜色函数
function bgcChange(obj) {
obj.onmouseover = function() {
obj.style.backgroundColor = "#f2f2f2";
}
obj.onmouseout = function() {
obj.style.backgroundColor = "#fff";
}
}
//改变input函数
function inputChange(){
var inputs = document.getElementsByTagName("input");
var inputval = inputs[0].value;
console.log(inputval);
inputs[0].onblur = function(){
var b = document.createElement("p");
b.innerHTML = inputval;
inputs[0].replaceChild(b,inputs[0]);
}
if(inputval != "" && inputval != null && inputval != undefined){
add();
}else{
alert("请输入学生姓名！");
}
}
//添加函数
function add() {
var tables = document.getElementById("table");
var newtr = document.createElement("tr");
if (a < 10) {
a = "00" + a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
'<td><input type="text" placeholder="请输入学生姓名"/></td>' +
"<td><a href=" + "'javascript:;'" + "onclick=" + "'del(this)'" + ">删除</a></td>";
a++;
} else if (a < 100) {
a = "0" + a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
'<td><input type="text" placeholder="请输入学生姓名"/></td>' +
"<td><a href=" + "'javascript:;" + "'" + "onclick=" + "'del(this)'" + ">删除</a></td>"
a++;
} else {
a = a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
"<td><input type='text' placeholder='请输入学生姓名'/></td>" +
"<td><a href=" + "'javascript:;" + "'" + "onclick=" + "'del(this)'" + ">删除</a></td>"
a++;
}
tables.appendChild(newtr);
for (var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
// 创建删除函数
function del(obj) {
var trs = obj.parentNode.parentNode;
trs.parentNode.removeChild(trs);
}
</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="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="inputChange()" />
<!--在添加按钮上添加点击事件 -->
</body>
</html>
//改变input函数
function inputChange(){
var inputs = document.getElementsByTagName("input");
var inputval = inputs[0].value;
console.log(inputval);
inputs[0].onblur = function(){
var b = document.createElement("p");
b.innerHTML = inputval;
inputs[0].replaceChild(b,inputs[0]);
}
if(inputval != "" && inputval != null && inputval != undefined){
add();
}else{
alert("请输入学生姓名！");
}
}
这是我的代码，加进去，但是不行
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script type="text/javascript">
var a = 3;
var tr = document.getElementsByTagName("tr");
window.onload = function() {
for(var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
//改变颜色函数
function bgcChange(obj) {
obj.onmouseover = function() {
obj.style.backgroundColor = "#f2f2f2";
}
obj.onmouseout = function() {
obj.style.backgroundColor = "#fff";
}
}
//该函数想实现，你必须得输入，不输入会有弹窗，输入之后，点击添加，那么他就由input变为p只能删除，不能修改
function inputChange(){
var inputs = document.getElementsByTagName("input");
var inputval = inputs.value;
if(inputval != " " && inputval != null){
inputs.onblur = function(){
var b = document.createElement("p");
b.innerHTML = inputval;
inputs.replaceChild(b,inputs);
}
}else{
alert("请输入学生姓名！");
}
}//这个函数有问题所以没使用，希望能帮忙修改一下
//我按照别人的，就那个创建tr+3个td,不能删除，提示是没有parentNode，打印后发现是因为this指向了window，用自己的也一样。
function add() {
var tables = document.getElementById("table");
var newtr = document.createElement("tr");
var xh=document.createElement("td");
var xm=document.createElement("td");
var del=document.createElement("td");
if(a<10){
a = "00"+a;
xh.innerHTML = "xh" + a;
xm.innerHTML = "<input type='text' placeholder='请输入学生姓名'/>";
del.innerHTML = "<a href=" + "'javascript:;" + "'" + "onclick=" + "'del(this)'" + ">删除</a>";
a++;
}else if(a< 100) {
a = "0" + a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
'<td><input type="text" placeholder="请输入学生姓名"/></td>' +
"<td><a href=" + "'javascript:;" + "'" + "onclick=" + "'del(this)'" + ">删除</a></td>"
a++;
} else {
a = a;
newtr.innerHTML = "<td>xh" + a + "</td>" +
"<td><input type='text' placeholder='请输入学生姓名'/></td>" +
"<td><a href=" + "'javascript:;" + "'" + "onclick=" + "'del(this)'" + ">删除</a></td>"
a++;
}
tables.appendChild(newtr);
newtr.appendChild(xh);
newtr.appendChild(xm);
newtr.appendChild(del);
for(var i = 1; i < tr.length; i++) {
bgcChange(tr[i]);
}
}
// 创建删除函数
function del(obj) {
var trs = obj.parentNode.parentNode;
trs.parentNode.removeChild(trs);
}
</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="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>
<a href="javascript:;" onclick="del(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" />
<!--在添加按钮上添加点击事件 -->
</body>
</html>