为了账号安全,请及时绑定邮箱和手机立即绑定

我快要疯了!!!!

<!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 指点,或者帮我写出来一个我想实现的效果的代码也可以,谢谢,搞得我头痛!!!

正在回答

4 回答

add()那少个结束~,最主要的问题是td里面的href那,在javascript: ;外围加 ' 就完事了

1 回复 有任何疑惑可以回复我~

<!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>


0 回复 有任何疑惑可以回复我~

//改变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("请输入学生姓名!");

}

}

这是我的代码,加进去,但是不行


0 回复 有任何疑惑可以回复我~

<!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>


1 回复 有任何疑惑可以回复我~
#1

狼王梦0_0 提问者

谢谢,不过还不是很完美,就是我希望点击添加时,如果你没有输入姓名,就提示,且不会添加;如果你填了,则将其由input变成p,就是无法再修改了,希望指点,谢谢你!!!!!!!!!!!!
2019-08-23 回复 有任何疑惑可以回复我~
#2

狼王梦0_0 提问者

看一下我下面的,我把这个函数加进去,但是实现不了功能
2019-08-23 回复 有任何疑惑可以回复我~
#3

慕仙6546457 回复 狼王梦0_0 提问者

你发你本地完整的吧,就看一段有点难受。看下具体的代码
2019-08-23 回复 有任何疑惑可以回复我~
#4

狼王梦0_0 提问者 回复 慕仙6546457

好的,看下面
2019-08-23 回复 有任何疑惑可以回复我~
#5

狼王梦0_0 提问者 回复 慕仙6546457

谢谢您
2019-08-23 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

我快要疯了!!!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信