javascript 动态添加表格行

inserRow() insertCell() 函数

insertRow() 函数可以带参数,形式如下:

insertRow(index)

这个函数将新行添加到 index 的那一行前,比如 insertRow(0), 是将新行添加到第一行之前。默认的 insertRow() 函数相当于 insertRow(-1), 将新行添加到表的最后。

insertCell() insertRow 的用法相同。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>..</title>
</head>
<body>

<table id="test0">
<table>

<table id="test1">
	<tr>
		<td>内容:<input id="content" name="content" type="text"></td>
		<td>时间:<input id="time" name="time" type="text"></td>
		<td><input id="add" type="button" value="添加"></td>
	</tr>
</table>

<script type="text/javascript">
document.getElementById("add").onclick = addC;
	function addC(){
		
		var table1 = document.getElementById("test0");
		var content = document.getElementById("content").value;
		var time = document.getElementById("time").value;

		//添加一行
		var newTr = table1.insertRow(0);
		//添加两列
		var newTd0 = newTr.insertCell(0);
		newTd0.innerHTML = "内容:"+ content  ;

		var newTd1 = newTr.insertCell(1);
		newTd1.innerHTML= "时间 :"+ time  ;
	}
</script>

</body>
</html>
 

 

.

你可能感兴趣的:(JavaScript,html,XHTML)