javascript中table怎么删除行


当前第2页 返回上一页

< tr>中的常用属性:tablerowObject.rowIndex

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<style type="text/css">

    table{

        border:1px solid #000;

        border-collapse: collapse;

    }

    th,td{

        border:1px solid #000;

        padding:6px;

    }

</style>

<script type="text/javascript">

    function addRow1(){

        var userInfo = document.getElementById("userInfo");

        var row = document.createElement("tr");

        var td1 = document.createElement("td");

        td1.innerHTML = "李四";

        var td2 = document.createElement("td");

        td2.innerHTML = "102";

        var td3 = document.createElement("td");

        td3.innerHTML = "北海";

        var td4 = document.createElement("td");

        td4.innerHTML = "<a onclick='delete(this)'>删除</a>";

        row.appendChild(td1);

        row.appendChild(td2);

        row.appendChild(td3);

        row.appendChild(td4);

        userInfo.appendChild(row);             

    }

    function addRow2(){

        var userInfo = document.getElementById("userInfo");

        var rowLength = userInfo.rows.length;

        //新行将被插入index所在行之前。若index等于表中的行数,则新行将被附加到表的末尾。

        //返回一个TableRow,表示新插入的行。

        var tableRow = userInfo.insertRow(rowLength);

        tableRow.innerHTML = "<td>李四</td><td>102</td><td>四海</td><td><a onclick='deleteRow(this)'>删除</a></td>";

    }

    function addRow3(){

        var userInfo = document.getElementById("userInfo");

        //计算rows.length时会把表头包含在内

        var rowLength = userInfo.rows.length;

        var tableRow = userInfo.insertRow(rowLength);

        //新单元格将被插入当前位于 index 指定位置的表元之前

        //如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。

        var tableCell0 = tableRow.insertCell(0);

        var tableCell1 = tableRow.insertCell(1);

        var tableCell2 = tableRow.insertCell(2);

        var tableCell3 = tableRow.insertCell(3);

        tableCell0.innerHTML = "李四";

        tableCell1.innerHTML = "103";

        tableCell2.innerHTML = "黑海";

        tableCell3.innerHTML = "<a onclick='deleteRow(this)'>删除</a>";

    }

    //不能传初始化时当前元素所在行的rowIndex,因为删除操作之后当前元素所在行的rowIndex会发送变化

    function deleteRow(_this){

        var userInfo = document.getElementById("userInfo");

        var rowIndex = getTrIndex(_this);

        //deleteRow() 方法用于从表格删除指定位置的行

        //参数 index 指定了要删除的行在表中的位置

        userInfo.deleteRow(rowIndex);

    }

    function getTrIndex(element){

        if(element.tagName.toLowerCase() == "tr"){

            //rowIndex属性返回某一行在表格的行集合中的位置(row index)

            return element.rowIndex;

        }else{

            return getTrIndex(element.parentNode);

        }

    }

</script>

推荐学习:《javascript高级教程

以上就是javascript中table怎么删除行的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

nodejs的npm常用命令集合

javascript是一门什么样的语言

vue刷新404的问题解决方法

javascript some()方法怎么用

javascript函数式编程中纯函数的理解(代码)

javascript怎么把字符串转换为数组

javascript如何关闭子窗口

除了 async 速度翻 10 倍,javascript 还带来了什么?

深入讨论javascript中set对象如何让代码更快

promise是什么?怎么用?

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...