DOM操作表格
关键词:dom ,dom操作表格,表格,dom 例子
<!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=gb2312" />
<title>Dom 操作菜单</title>
<style type="text/css">
<!--
body {
font-size: 12px;
}
-->
</style>
</head>
<script language="javascript">
<!--
function addevent(Cname,Cnum,Cprice)
{
if(document.createElement)
{
var obj=document.getElementById("dingdan");
row = obj.insertRow(0);
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.setAttribute("width","96");
td1.innerHTML=Cname;
tr.appendChild(td1);
var td2=document.createElement("td");
td2.setAttribute("width","78");
td2.innerHTML=Cnum;
tr.appendChild(td2);
var td3=document.createElement("td");
td3.setAttribute("width","62");
td3.innerHTML=Cprice;
tr.appendChild(td3);
var td4=document.createElement("td");
td4.setAttribute("width","37");
td4.innerHTML="删";
tr.appendChild(td4);
row.appendChild(tr);
}
}
-->
</script>
<body>
<table width="720" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td width="275" height="339" align="center" valign="top" bgcolor="#FFFFFF"><table width="275" height="50" cellpadding="0" cellspacing="0">
<tr>
<td width="96" height="22">名称</td>
<td width="78">数量</td>
<td width="62">单价</td>
<td width="37">删</td>
</tr>
</table>
<table width="275" height="28" cellpadding="0" cellspacing="0" id="dingdan"></table>
</td>
<td width="528" align="center" valign="top" bgcolor="#FFFFFF">
<table width="445" cellspacing="0" cellpadding="0">
<tr>
<td width="97" height="117"> </td>
<td width="97"> </td>
<td width="97"> </td>
<td width="144"> </td>
</tr>
<tr>
<td height="25"><a href="#" onclick="addevent('苹果','1','8')" >添加</a></td>
<td><a href="#" onclick="addevent('白菜','1','7')" >添加</a></td>
<td><a href="#" onclick="addevent('香蕉','2','6')" >添加</a></td>
<td><a href="#" onclick="addevent('雪梨','3','5')" >添加</a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>