您的位置：首页 > Web前端 > JavaScript

JavaScript 动态操作表格

2008-11-02 22:47 239 查看

<html>

<head>

<title></title>

<script language="javascript">

function createTable(){

var tbody=document.createElement("TBODY");//创建表格主体

roleTable.appendChild(tbody);//加入到表格中

row=document.createElement("TR");//添加行

row.align="center";//设置对齐方式

tbody.appendChild(row);

emp_code=document.createElement("TD");//创建单元格

emp_code.innerHTML="单元格1";

row.appendChild(emp_code);

emp_code=document.createElement("TD");

emp_code.innerHTML="单元格2";

row.appendChild(emp_code);

emp_code=document.createElement("TD");

emp_code.innerHTML="单元格3";

row.appendChild(emp_code);

emp_code=document.createElement("TD");

emp_code.innerHTML="单元格4";

row.appendChild(emp_code);

emp_code=document.createElement("TD");

emp_code.innerHTML='<input name="button" type="button" onclick="DeleteRow(this)" value="删除" />';

row.appendChild(emp_code);

}

function DeleteRow(element){

var tr=element.parentNode.parentNode;//先拿到按钮所在行，再拿到行所在的单元格

roleTable.deleteRow(tr.rowIndex);//删除行

}

</script>

</head>

<body>

<TABLE width="60%" border=1 cellSpacing=0 cellPadding=2 id="roleTable">

<TBODY>

<THEAD align="middle" bgColor="#ffcc00">

<TH title="列1">列1</TH>

<TH title="列2">列2</TH>

<TH title="列3">列3</TH>

<TH title="列4">列4</TH>

<TH title="列5">列5</TH>

</THEAD>

</TBODY>

</TABLE>

<input name="button" type="button" onclick="createTable()" value="click" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航