js实现添加HTML

现在要实现一个功能：

点击 【增加规则】按钮，增加一行输入框。如图所示：

 

实现的方法有多种，这里我讲到的是：用js方法实现。

用到的方法：

1.HTML DOM insertRow() 方法

定义和用法

 insertRow() 方法用于在表格中的指定位置插入一个新行。

语法

tableObject.insertRow(index)

返回值

返回一个 TableRow，表示新插入的行

2. HTML DOM insertCell() 方法

  定义和用法

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

  语法

tablerowObject.insertCell(index)

  返回值

一个 TableCell 对象，表示新创建并被插入的 <td> 元素。

js的源码：

<link href="css/main.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
		function insert(){ 
			var idx = document.getElementsByName("dialpatternsize")[0].value;//这个是为了命名name和id号传来的index
		 	newRow=item_list.insertRow(item_list.rows.length); //得到最后一行的行号
		 	c1=newRow.insertCell(0);//这行的第一列对象
		 	c1.style.cssText="width: 35%;background: white;padding-left: 5px;";//设置css
		 	 //c1.innerHTML="<input type=\"button\" value=\"增加规则\" οnclick=\"delItem("+22+")\">";//test
		 	c1.innerHTML = "(<input title='prepend' type='text' size='8' id='prepend_digit_"+idx+"' name='prepend_digit_"+idx+"' class='bd_class_input_text' value='' tabindex='21'>)+<input title='prefix' type='text' size='6' id='pattern_prefix_"+idx+"' name='pattern_prefix_"+idx+"' class='bd_class_input_text' value='' tabindex='22'> |[<input title='match pattern' type='text' size='16' id='pattern_pass_"+idx+"' name='pattern_pass_"+idx+"' class='bd_class_input_text' value='' tabindex='23'> /<input title='CallerId' type='text' size='10' id='match_cid_"+idx+"' name='match_cid_"+idx+"' class='bd_class_input_text' value='' tabindex='24'>]  <input type='button' value='删除规则' οnclick=''>"; 
			 
			document.getElementById("dialpatternsize").value=parseInt(idx)+1;//index+1

		}