recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Ajouter une balise tr à une balise table Lorsque la balise table est affichée sur la console, il y a 2 éléments enfants? Ce que je veux c'est que la balise tr soit incluse dans la balise table

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <mata http-equiv=”content-type” content=”text/html; charset=gb2312” />
    <style type="text/css">
        #table1 {
            margin: 0 auto;
            border: 1px solid gray;
        }

            #table1 td {
                border: 1px solid gray;
                height: 60px;
                width: 120px;
                text-align: center;
                line-height: 60px;
            }

            #table1 tr:hover {
                background: #efe5e5;
            }

            #table1 .delete:hover {
                background: #ff6a00;
            }

        #input {
            height: 100px;
            width: 200px;
            margin: 20px auto;
            font-size: 50px;
            display: block;
        }

        p {
            width: 250px;
            margin: 0 auto;
            display: none;
        }
    </style>
</head>
<body>

    <table id="table1">
        <tr>
            <td>姓名</td>
            <td>年纪</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>A</td>
            <td>21</td>
            <td>男</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>B</td>
            <td>11</td>
            <td>女</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>C</td>
            <td>23</td>
            <td>男</td>
            <td><a href="#">删除</a></td>
        </tr>

    </table>

    <input id="input" type="button" name="name" value="添加" />

    <p>
        <p>姓名:<input id="name" type="text" placeholder="请输入姓名" /></p>
        <p>年龄:<input id="age" type="text" placeholder="请输入年龄" /></p>
        <p>性别:<input id="gender" type="text" placeholder="请输入性别" /></p>
        <p><input id="add" type="button" value="添加" /></p>
    </p>
</body>
</html>

<script>
   
    

    //取出所有的A标签
    var aTags = document.getElementsByTagName('a');

    //给取出的A绑定点击事件
    deleteTr(aTags);

    var input = document.getElementById('input');
    input.onclick = function () {

        var p = document.getElementsByTagName('p');
        p[0].style.display = "block";
    }

    var add = document.getElementById('add');

    add.onclick = function () {

        var name = document.getElementById('name').value;

        var age = document.getElementById('age').value;

        var gender = document.getElementById('gender').value;

        var tr = document.createElement('tr');

        var html = "<td>" + name + "</td><td>" + age + "</td><td>" + gender + "</td><td><a href=\"#\">删除</a></td>";

        tr.innerHTML = html;

        var p = document.getElementsByTagName('p');

        p[0].style.display = "none";

        var table1 = document.getElementById('table1');

        table1.appendChild(tr)
            ;
        var allTr = table1.getElementsByTagName('tr');

        console.log(allTr.length)

        console.log(table1);//为什么取出开的table1里面有2个子元素,我想要的是一个子元素,tr标签包含到table标签里面

     


        //if (tr.length > 6) {

           
        //}
        deleteTr(aTags);

    }


    function deleteTr(tag) {


        for (var i = 0; i < aTags.length; i++) {
            tag[i].onclick = function () {

                //判断是否确定要删除
                if (confirm('确定要删除我?')) {

                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                }


            }
        }

    }


</script>
阿神阿神2699 Il y a quelques jours844

répondre à tous(2)je répondrai

  • 漂亮男人

    漂亮男人2017-07-05 10:44:04

    Il restituera automatiquement la couche supérieure de la balise tbody entre tr et table. Vous le saurez si vous regardez F12

    .
        <table>
            <tr>
                <td>111</td>
                <td>删除</td>
            </tr>
        </table>
    <script>
    const td = document.getElementsByTagName('td')[1];
            td.onclick = function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
            }<
    /script>

    répondre
    0
  • 三叔

    三叔2017-07-05 10:44:04

    Vous ne comprenez peut-être pas le niveau de dom. tr n'est pas un sous-élément du tableau. La réponse modifiée ci-dessus peut facilement atteindre la fonction que vous souhaitez.

    répondre
    0
  • Annulerrépondre