问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用原生JS选中表格中某个单元格里的A标签，并触发点击事件？

头像
平凡__
    33054565

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

    下面是我做的删除已存在表格行的代码：

    <!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[0].innerHTML);
                    
                    aA[0].onclick = function(){
                        oTable.tbody_1.removeChild(this.parentNode.parentNode);
                    }
                    
                    
                    

                    /* 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>
    表格javascript
    阅读 4k
    2 个回答
    得票最新
    头像
    Justin
      1.4k41232
      ✓ 已被采纳
      <!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');
            var id = oTable.tBodies[1].rows.length + 1;
            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 oX = oTable.getElementsByTagName('a');
            for (let i = 0; i < oX.length; i++) {
                oX[i].onclick = function () {
                    oTable.tBodies[1].removeChild(this.parentNode.parentNode)
                };
            }

        }
    </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>
      头像
      Yooloo
        9672615

        alert(aA.innerHTML);这儿aA是通过getElementsByTagName来获取的，这个方法返回的是一个HTMLCollection类数组对象，需要使用aA[0].innerHTML来获取里面的html片段。

        查看全部 2 个回答
        推荐问题