【www.hj8828.com】原生JS和JQuery动态增进、删除表格行的形式

function insRow(){var x=document.getElementById.insertRow;var y=x.insertCell;var z=x.insertCell;y.innerHTML="NEW CELL1";z.innerHTML="NEW CELL2";}

JS实现向表格中动态添加行的方法

 这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 

 

本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行

?

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

<!DOCTYPE html>

<html>

<head>

<script>

function insRow()

{

var x=document.getElementById(‘myTable’).insertRow(0);

var y=x.insertCell(0);

var z=x.insertCell(1);

y.innerHTML="NEW CELL1";

z.innerHTML="NEW CELL2";

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br>

<input type="button" onclick="insRow()" value="Insert row">

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定…

原生JS和JQuery动态添加、删除表格行的方法

   本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下:

  下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除)。

  原生态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

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>javascript添加行demo</title>

<script type="text/javascript">

/**验证表单复选框是否有选择*/

function isValidChkSelect(frm){

var chk = frm.chked;

if(chk == undefined){

return;

}

var len = frm.chked.length;

if(chk.length == undefined){

// 只有一个checkbox

if (chk.checked == true) {

return true;

}

} else {

for(var i = 0; i < chk.length; i++) {

if (chk[i].checked == true) {

return true;

}

}

}

return false;

}

/**选择所有文本框*/

function selectAll(frm){

for (var i = 0; i < frm.elements.length; i++){

var e = frm.elements[i];

if (e.name != ‘chkall’ && e.type == ‘checkbox’)

e.checked = frm.chkall.checked;

}

}

/**添加新行*/

function addNew(){

var objMyTable = document.getElementById("tbl");

var index = objMyTable.rows.length – 1;

var nextRow = objMyTable.insertRow(index);// 插入新行

var objCel_0 = nextRow.insertCell(0);// 添加单元格

objCel_0.innerHTML = "<input type=’checkbox’ name=’chked’ value=” />";

var objCel_1 = nextRow.insertCell(1);

// nextRow.rowIndex — 行索引

objCel_1.innerHTML = "<input type=’text’ name=’newRow"+nextRow.rowIndex+"’ /> <a href=’#’ onclick=’delRow(this)’>删除</a>";

}

/**删除行对象*/

function delRow(obj){

//obj.parentNode.parentNode.removeNode(true); // Firefox不兼容

var new_tr = obj.parentNode.parentNode;

var tmp = new_tr.parentNode;

tmp.removeChild(new_tr); // 删除子节点

}

/**将文本框值赋给同一行对应的复选框*/

function setValue(obj, obj_chk){

obj_chk.value = obj.value;

}

function doSubmit(frm){

if(isValidChkSelect(frm) == false){

alert("选择不能少于一项");

return false;

}

for(var i = 0; i < document.getElementsByTagName("input").length; i++) {

var obj = document.getElementsByTagName("input")[i];

if(obj.type == "text" && obj.name.substring(0, 6) == "newRow"){

var obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 复选框对象

if(valid(obj, obj_chk)){

setValue(obj, obj_chk);// 同一行的文本框值 赋值给 复选框

continue;

} else {

return false;

}

}

}

return true;

}

function valid(obj, obj_chk){

if(obj_chk.checked){

var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

if(obj.value == ""){

alert("添加的地址不能为空!");

return false;

}

if(!patrn.test(obj.value)){

alert("请输入正确的邮件地址!");

return false;

}

}

return true;

}

</script>

</head>

<body>

<form method="post" action="" onsubmit="return doSubmit(this)">

<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">

<tr>

<td><input type="checkbox" name=’chkall’ onclick="selectAll(this.form)"/>全部选择</td>

<td>

允许发送地址

<a href="#" onclick="addNew()">添加新地址</a>

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="chked" value="[email protected]">

</td>

<td>[email protected]</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="提交" name="B1">

</td>

</tr>

</table>

</form>

</body>

</html>

  JQuery版:

  ?

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

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery添加行demo</title>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

<script type="text/javascript">

$("document").ready(function(){

// 全部选择的点击事件

$("input[name=’chkall’]").click(function(){

$("input[name=’chked’]").attr("checked", this.checked);

});

});

var row_cur_index = 0;// 插入行的当前索引

/**添加新行*/

function addNew(){

var row_id = "tr" + row_cur_index;// 所插入行的id

var row_obj = "<tr id=’"+row_id+"’><td><input type=’checkbox’ class=’ck_class’ name=’chked’ value=” /></td><td><input type=’text’ name=’newRow"+row_cur_index+"’ /> <a href=’#’ onclick=’delRow("+row_id+")’>删除</a></td></tr>";

$("#topRow").before(row_obj); // 插入行

row_cur_index = row_cur_index + 1;

}

/**将文本框值赋给同一行对应的复选框*/

function setValue(row_index, value){

var row_id = "#tr" + row_index;

$(row_id).find(":checked").val(value);

}

/**删除行对象*/

function delRow(row_id){

$(row_id).remove(); // 删除匹配row_id的元素

}

function doSubmit(frm){

/**判断复选框是否有选*/

if($("input[name=’chked’]:checked").size() == 0){

alert("选择不能少于一项");

return false;

}

try {

$("tr[id^=’tr’]").each(function(){

var tmp_row_index = this.id.substring(2); // 当前行索引

if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){

var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

var input_value = $("input[name=’newRow"+tmp_row_index+"’]").val(); // 文本框值

setValue(tmp_row_index, this.value);

if(input_value == "") throw "Err1";

if (!patrn.test(input_value)) throw "Err2";

}

});

} catch (e) {

if(e == "Err1")

alert("添加的地址不能为空!");

if(e == "Err2")

alert("请输入正确的邮件地址!");

return false;

}

return true;

}

</script>

</head>

<body>

<form method="post" action="" onsubmit="return doSubmit(this)">

<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">

<tr>

<td><input type="checkbox" name=’chkall’ />全部选择</td>

<td>

允许发送地址

<a href="#" onclick="addNew()">添加新地址</a>

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="chked" value="[email protected]">

</td>

<td>[email protected]</td>

</tr>

<tr id="topRow">

<td colspan="2">

<input type="submit" value="提交" name="B1">

</td>

</tr>

</table>

</form>

</body>

</html>

  希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析…

Row1 cell1 Row1 cell2
Row2 cell1 Row2 cell2
Row3 cell1 Row3 cell2

帮客评论