课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

我快要疯了！！！！

来源：9-22 编程练习

狼王梦0_0

2019-08-21 11:14

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

  • 慕仙6546457
    2019-08-23 14:17:49
    已采纳

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

    0 1
  • 狼王梦0_0
    2019-08-23 17:36:07

    <!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 0
  • 狼王梦0_0
    2019-08-23 15:52:22

    //改变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 0
  • 慕仙6546457
    2019-08-23 14:15:28

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


    5 1

    狼王梦0_0 回复慕仙6546...

    谢谢您

    2019-08-23 17:36:35

    共 5 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468198 学习 · 21891 问题

查看课程

相似问题

大神在哪里？请问：为什么我的不能删除啊，快疯了。。。。

回答 1

真的好纠结 不知道哪里错了 就是不执行 要疯了

回答 3

疯狂找错中。。。。。。

回答 5

请问我这是错在哪里 ？？快哭了= =

回答 1

求解啊？快吐血了！

回答 2

打开慕课网App查看更多内容