首頁 > web前端 > js教程 > 分享一個用js 寫一個可變的表格的程式碼

分享一個用js 寫一個可變的表格的程式碼

PHPz
發布: 2017-04-04 14:09:01
原創
1595 人瀏覽過

本文分享一個用js 寫一個可變的表格的程式碼,希望對大家有幫助!

table.html

1

2

3

4

5

6

7

8

9

10

11

<html>

<head>

    <title>js table</title>

    <meta charset="utf-8">

<script  src="js.js"></script>

</head>

<body>

    <button onclick="jianbiao()">创建表格</button>

    <button onclick="jianhang()">添加行</button>

</body>

</html>

登入後複製

js.js

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

/**************************************

任务:

    1.创建Table,并将Table添加到Body当中

    2.向Table中添加行TableRow

    3.向TableRow中添加单元格TableCell

    4.在TableCell中,添加innerHTML的内容,比如数字,文本,编辑框,按钮等

    5.从table中删除一行

    6.可视化编辑TableRow中的内容

 

***************************************/

 function jianbiao() {

// body...

var mytable=document.createElement('table');

mytable.border='1';

mytable.id='mytable';

document.body.appendChild(mytable);

var row=mytable.insertRow(0);

var cell1=row.insertCell(0);

cell1.innerHTML="描述1";

var cell2=row.insertCell(1);

cell2.innerHTML="描述1";

var cell3=row.insertCell(2);

cell3.innerHTML="描述1";

var cell4=row.insertCell(3);

cell4.innerHTML="描述1";

}

function jianhang(){

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

var rowCount=mytable.rows.length;

var row=mytable.insertRow(rowCount);

var cell1=row.insertCell(0);

cell1.innerHTML="这个单元格的坐标是(0,"+ rowCount +")";

var cell2=row.insertCell(1);

cell2.innerHTML="(1,"+ rowCount +")";

var cell3=row.insertCell(2);

cell3.innerHTML="<input type=&#39;text&#39; />";

var cell4=row.insertCell(3);

cell4.innerHTML="<button onclick=&#39;gengxin(this.parentNode.parentNode.rowIndex)&#39;/>修改</button><button onclick=&#39;delet(this.parentNode.parentNode.rowIndex)&#39;>删除</button>";

}

function gengxin (argument) {

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

var row=mytable.rows[argument];

var cell=row.cells[1];

cell.innerHTML="修改之后";

}

function delet (argument) {

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

    mytable.deleteRow(argument);

}

登入後複製

       

以上是分享一個用js 寫一個可變的表格的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板