动态操作html table
2008-03-27 00:03
246 查看
1.动态操作表的一行:
<html>
<head>
<title>动态操作表的行</title>
</head>
<body>
<table border="0" width="681" bgcolor="#709EC0" cellSpacing=1
cellPadding=3 id="DemoTable">
<tr>
<td width="35" bgcolor="#a4c2e8" align="center">
<b>序号</b>
</td>
<td width="377" bgcolor="#a4c2e8" align="center">
<b>内容</b>
</td>
<td clospan='2' width="143" bgcolor="#a4c2e8" align="center"
colspan="2">
<b>程度</b>
</td>
<td width="96" bgcolor="#a4c2e8" align="center">
<b>选择</b>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
1
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu1" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu1" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai">
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
2
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu2" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu2" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai" value="0">
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
3
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu3" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu3" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai">
</td>
</tr>
</table>
<div>
<p>
<a href="#" onclick="addRow();">继续添加</a>
<a href="#" onclick="deleteObj();">删除</a>
<div>
</body>
</html>
<script type="text/javascript">
var index = 3;
var tableObj = document.getElementById('DemoTable');
function addRow()
{
id=parseInt(index)+1;
//增加行及属性
var newTr = tableObj.insertRow();
newTr.id = id;
newTr.bgColor ="#FFFFFF";
newTr.align="center";
//增加列及属性
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd4 = newTr.insertCell();
newTd0.innerText = parseInt(index)+1;
newTd1.innerHTML = "<input name='neirong' size='50' style='float: left'>";
newTd2.innerHTML = "<input type='radio' name='"+id+"' value='重大' > 重大";
newTd3.innerHTML = "<input type='radio' name='"+id+"' value='一般' checked > 一般";
newTd4.innerHTML = "<input type='checkbox' name='zhenggaizhuangtai"+id+"'>";
index++;
}
function deleteObj(){
//如果到达表的最后一行，则不能删除
if(tableObj.rows.length==1){
alert("提示：已到表的最后一行，不能再删除！");
return false;
}
tableObj.deleteRow(-1);
--index;
}
</script>
2.遍历表中的每一个列的第一个物件
function parse(){
var tableObj = document.getElementById("demoTab");
var hiddenStr = "";
for(i=1;i<tableObj.rows.length;i++){
var trs = tableObj.rows[i];
//遍历每一行的每一列第一个物件
for(j=1;j<trs.cells.length;j++){
var td = trs.cells[j];
if(td.childNodes[0].type=='text')
{
.....
}else if(td.childNodes[0].type=='radio'){
.....
}else if(td.childNodes[0].type=='checkbox'){
.....
}
}
hiddenStr +="...";
}
//将处理后的结果放入一个hidden域中
hiddenObj = document.createElement("<input type='hidden' name='hiddenStrVal'>");
hiddenObj.value=hiddenStr;
paichaInfo.appendChild(hiddenObj);
}
<html>
<head>
<title>动态操作表的行</title>
</head>
<body>
<table border="0" width="681" bgcolor="#709EC0" cellSpacing=1
cellPadding=3 id="DemoTable">
<tr>
<td width="35" bgcolor="#a4c2e8" align="center">
<b>序号</b>
</td>
<td width="377" bgcolor="#a4c2e8" align="center">
<b>内容</b>
</td>
<td clospan='2' width="143" bgcolor="#a4c2e8" align="center"
colspan="2">
<b>程度</b>
</td>
<td width="96" bgcolor="#a4c2e8" align="center">
<b>选择</b>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
1
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu1" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu1" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai">
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
2
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu2" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu2" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai" value="0">
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="35" align="center">
3
</td>
<td bgcolor="#FFFFFF" width="377" align="center">
<input name="neirong" type="text" size="50" style="float: left">
</td>
<td bgcolor="#FFFFFF" width="71" align="center">
<input type="radio" name="chengdu3" value="重大">
重大
</td>
<td bgcolor="#FFFFFF" width="65" align="center">
<input type="radio" name="chengdu3" value="一般" checked>
一般
</td>
<td bgcolor="#FFFFFF" width="96" align="center">
<input type="checkbox" name="zhenggaizhuangtai">
</td>
</tr>
</table>
<div>
<p>
<a href="#" onclick="addRow();">继续添加</a>
<a href="#" onclick="deleteObj();">删除</a>
<div>
</body>
</html>
<script type="text/javascript">
var index = 3;
var tableObj = document.getElementById('DemoTable');
function addRow()
{
id=parseInt(index)+1;
//增加行及属性
var newTr = tableObj.insertRow();
newTr.id = id;
newTr.bgColor ="#FFFFFF";
newTr.align="center";
//增加列及属性
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd4 = newTr.insertCell();
newTd0.innerText = parseInt(index)+1;
newTd1.innerHTML = "<input name='neirong' size='50' style='float: left'>";
newTd2.innerHTML = "<input type='radio' name='"+id+"' value='重大' > 重大";
newTd3.innerHTML = "<input type='radio' name='"+id+"' value='一般' checked > 一般";
newTd4.innerHTML = "<input type='checkbox' name='zhenggaizhuangtai"+id+"'>";
index++;
}
function deleteObj(){
//如果到达表的最后一行，则不能删除
if(tableObj.rows.length==1){
alert("提示：已到表的最后一行，不能再删除！");
return false;
}
tableObj.deleteRow(-1);
--index;
}
</script>
2.遍历表中的每一个列的第一个物件
function parse(){
var tableObj = document.getElementById("demoTab");
var hiddenStr = "";
for(i=1;i<tableObj.rows.length;i++){
var trs = tableObj.rows[i];
//遍历每一行的每一列第一个物件
for(j=1;j<trs.cells.length;j++){
var td = trs.cells[j];
if(td.childNodes[0].type=='text')
{
.....
}else if(td.childNodes[0].type=='radio'){
.....
}else if(td.childNodes[0].type=='checkbox'){
.....
}
}
hiddenStr +="...";
}
//将处理后的结果放入一个hidden域中
hiddenObj = document.createElement("<input type='hidden' name='hiddenStrVal'>");
hiddenObj.value=hiddenStr;
paichaInfo.appendChild(hiddenObj);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html table tr 动态加减行操作
- C++操作HTML TABLE元素
- TableView的动态更新操作（无需重新加载数据源）
- HTML中的<table>标签及其子元素标签，JS中DOM对<table>的操作
- c# DataTable重新调整成新DataTable，然后动态显示在HTML Table中
- 在ASP.NET中利用HtmlTable动态创建表格
- HTML--通过JavaScript操作HTML的Table
- js实现动态操作table
- js 动态操作table 表格 在指定行后添加行 删除行
- jquery操作html，table。点击按钮，逐行滚动显示，自动选中下一行数据
- html中table中动态添加单元格示例
- ios TableView那些事（三十 五）TableView 单选操作使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）
- 动态创建HTML之Table
- jquery操作html文档（table添加行，IE 中遇到的bug问题）
- HTML--通过JavaScript操作HTML的Table
- 动态操作table-2
- 使用js内置对象document对html的标签做一些动态的操作
- JavaScript后台代码操作HTML TABLE的方法
- ajax动态增加html节点时，jqm样式未加载出来，须实现refresh操作