A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

synchronize

初级黑马

  • 黑马币:52

  • 帖子:17

  • 精华:0

本帖最后由 synchronize 于 2017-12-14 23:39 编辑

第一段代码中的方法可以添加新的行,也可以用removeChild()删除添加之后的行以及页面加载时就有的行。
而在第二段代码中,使用table的情况下removeChild()方法就不能删除页面加载时已存在的行了,需要用deleteRow()这个方法才可以(在代码中注释的那一行)。
请问原理是怎样的?
<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function  addElement() {
                                var city = document.getElementById("city");
                                var liEl = document.createElement("li");
                                var text = document.createTextNode("深圳");
                                liEl.appendChild(text);
                                city.appendChild(liEl);
                        }

                        function delElement() {
                                var city = document.getElementById("city");
                                var liEl = document.getElementsByTagName("li");
                                city.removeChild(liEl[liEl.length - 1]);
                        }
                </script>
        </head>

        <body>
                <ul id="city">
                        <li><input type="button" value="添加元素" /></li>
                        <li><input type="button" value="删除元素" /></li>
                        <li>北京</li>
                        <li>上海</li>
                </ul>
        </body>

</html>

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function addLine() {
                                var table = document.getElementById("table1");
                                var tr = document.createElement("tr");
                                var td1 = document.createElement("td");
                                var td2 = document.createElement("td");
                                var td3 = document.createElement("td");
                                var td4 = document.createElement("td");
                                var input = document.createElement("input")
                                input.type = "checkbox";
                                input.name = "ids";
                                td4.appendChild(input);
                                td1.innerHTML = table.rows.length - 2;
                                tr.appendChild(td1);
                                td2.align="center";
                                td2.innerHTML = "数据1";
                                tr.appendChild(td2);
                                td3.align="center";
                                td3.innerHTML = "数据2";
                                tr.appendChild(td3);
                                td4.appendChild(input);
                                tr.appendChild(td4);

                                table.appendChild(tr);
                        }
                        function delLine() {
                                var table = document.getElementById("table1");
                                var del = document.getElementsByTagName("tr");

                                table.removeChild(del[del.length - 1]);
//                                table.deleteRow(del.length - 1);
                        }
                </script>
        </head>

        <body>
                <table id="table1" border="1" width="80%" align="center">
                        <tr>
                                <td colspan="3" align="center">清单        </td>
                                <td width="100px" align="right">
                                        <input type="button" value="添加" />
                                        <input type="button" value="删除" />
                                </td>
                        </tr>
                        <tr>
                                <th>ID</th>
                                <th>数据1</th>
                                <th>数据2</th>
                                <th>
                                        全选<input type="checkbox" id="selectAll" name="selectAll" />
                                </th>
                        </tr>
                        <tr>
                                <td>1</td>
                                <th>数据1</th>
                                <th>数据2</th>
                                <td>
                                        <input type="checkbox" name="ids" />
                                </td>
                        </tr>
                        <tr>
                                <td>2</td>
                                <th>数据1</th>
                                <th>数据2</th>
                                <td>
                                        <input type="checkbox" name="ids" />
                                </td>
                        </tr>
                        <tr>
                                <td>3</td>
                                <th>数据1</th>
                                <th>数据2</th>
                                <td>
                                        <input type="checkbox" name="ids" />
                                </td>
                        </tr>
                </table>
        </body>

</html>

而在table中用removeChild()方法就不能删除页面加载时已存在的行了,需要用deleteRow()这个方法才可以(在代码中注释的那一行)。
请问原理是怎样的?

1 个回复

正序浏览
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马