wfyihai
平凡-_-
2019-06-12 22:55
采纳率: 100%
浏览 230

求教大神,原生JS,我想选中表格中的A标签。我写的代码怎么写都不对,求帮助。

1、我要做的效果是,点击删除时删除当前一行表格;也可也添加一行表格;麻烦前辈们帮我看一下哪里出错了,谢谢哈。

2、我的代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script>
            window.onload = function(){
                var oTable = document.getElementById('aTab_1');
                var oName = document.getElementById('name_inpt');
                var oNian = document.getElementById('nian_ipnt');
                var oBut = document.getElementById('iBut_1');
                //alert(oTable.tBodies[0].rows.length);
                //alert(oTable.tBodies[1].rows.length);
                var id = oTable.tBodies[1].rows.length+1;
                //alert(id);
                //alert(oTable.tBodies[0]);
                oBut.onclick = function(){


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

                    var oTd = document.createElement('td');
                    oTd.innerHTML=id++;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML=oName.value;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML=oNian.value;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML = '<a href="javascript:;">'+'删除'+'</a>'
                    oTr.appendChild(oTd);

                    oTable.tBodies[1].appendChild(oTr);

                    var oX = oTd.getElementsByTagName('a')[0];
                    oX.onclick = function(){
                        oTable.tBodies[1].removeChild(this.parentNode.parentNode)
                    };
                };

                var tbody_1 = oTable.getElementsByTagName('tbody');
                var otrs = tbody_1[1].getElementsByTagName('tr');
                //var ottd = otrs.getElementsByTagName('td');

                //alert(otds);
                //alert(oX.innerHTML);
                //alert(oX.length);
                for(var i=0;i<otrs.length;i++){
                    var otd_1 = otrs[i].getElementsByTagName('td');
                    var aA = otd_1[3].getElementsByTagName('a');
                    alert(aA.innerHTML);


                    /* for(var i=0;i<otd_1.length;i++){
                        var aA = otd_1[i].getElementsByTagName('a');
                        alert(aA.innerHTML);
                    } */


                };


            }
        </script>
    </head>

    <body>
        姓名:<input type="text" id="name_inpt" />
        年龄: <input type="text" id="nian_ipnt" />
        <input type="button" value="插入" id="iBut_1" />
        <table border=1 width="500" id="aTab_1">
            <tbody>
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>28</td>
                    <td><a href="javascript:;">删除1</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>31</td>
                    <td><a href="javascript:;">删除2</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王二</td>
                    <td>19</td>
                    <td><a href="javascript:;">删除3</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵薇</td>
                    <td>28</td>
                    <td><a href="javascript:;">删除4</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>赵薇</td>
                    <td>28</td>
                    <td><a href="javascript:;">删除5</a></td>
                </tr>
            </tbody>

        </table>
    </body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • q95548854
    张兴华(MarsXH.Chang) 2019-06-13 10:19
    已采纳
    <!DOCTYPE html>
    <html>
    <head>
      <title> new document </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
      姓名:<input type="text" id="name_input" />
      年龄: <input type="text" id="age_input" />
      <!--在添加按钮上添加点击事件 -->
      <input type="button" value="插入" onclick="add()" />
      <table border="1" width="50%" id="table">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>28</td>
          <td><a href="javascript:;" onclick="del(this);">删除</a></td>
          <!--在删除按钮上添加点击事件 -->
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>31</td>
          <td><a href="javascript:;" onclick="del(this);">删除</a></td>
        </tr>
      </table>
    
    
      <script type="text/javascript">
        // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
        var num = document.getElementsByTagName('tr').length - 1;
        function add() {
          num++;
          var name = document.getElementById('name_input').value;
          var age = document.getElementById('age_input').value;
          var tr = document.createElement("tr");
          var str = '<td>' + num + '</td>';
          str += '<td>' + name + '</td>';
          str += '<td>' + age + '</td>';
          str += '<td><a href="javascript:;" onclick="del(this)" >删除</a></td>';
          tr.innerHTML = str;
          var tab = document.getElementById("table");
          tab.appendChild(tr);
        }
    
        // 创建删除函数
        function del(obj) {
          var tr = obj.parentNode.parentNode;
          tr.parentNode.removeChild(tr);
        }
      </script>
    </body>
    </html>
    
    点赞 评论
  • qq_27323623
    Yirujet 2019-06-13 10:30

    功能是没有问题的啊,通过新增按钮添加的行点击删除都是可以的,因为新增行的删除标签你绑定了删除事件;如果你说的是前五行静态数据
    无法删除,是因为,这五行数据中的删除标签根本就没有绑定事件,你看下呢?

    点赞 评论

相关推荐