JS动态添加Table行地方法
第一种是适用IE8的，appendChild
后来发现IE6下面不行，原来是DOM支持不一样啊。虽然知道，但是这东西还这麻烦。
为什么JS标准这么不统一！！！
没办法又试着谢了AddRow2等相应的方法，用的insertRow。通用性稍微好一点。
都贴出来给大家
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<!--引入CSS及JS-->
<link rel="stylesheet" rev="stylesheet" href="../css/liststyle0.css" type="text/css" />
<style>a{TEXT-DECORATION:none}</style>
<script src="../js/tangxing.js" type="text/javascript"></script>
<script src="../js/prototype.js"></script>
<script type="text/javascript" src="../FCKeditor/fckeditor.js" charset="gb2312"></script>
<script src="../js/validate.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/chrome.js"></script>
<style type="text/css">
td{font-size: 12px}
th{font-size: 12px}
.btnClass {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
</style>
</head>
<body ><!--οnlοad="showFCK();"οnclick="showOrHidden();"-->
<form name="knowlageInfoActionForm" method="post" action="../service/knowlage/knowlageInfo.do" enctype="multipart/form-data"><div><input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="952db0060d974bf390a03baec9556e3c"></div>
<input type="hidden" name="method" />
<input type="hidden" name="buttonType" value="" id="_ButtonType">
<input type="hidden" name="methodReturn" value="" id="_MethodReturn">
<input type="hidden" name="lgTop" value="0">
<input type="hidden" name="keywords" value="">
<input type="hidden" name="strBillBoardRef" value="">
<input type="hidden" name="categories_code" value="-1">
<input type="hidden" name="isHaveChildCategory" value="true">
<input type="hidden" name="categories_name" value="--知识分类--" id="_Categories_name">
<input type="hidden" name="detailObject.content" value="" id="_Content">
<div>
<div style="margin-top:10px;">
<div class="main_box_top">
<!--系统导航-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="8" class="main_box_left"></td>
<td class="main_box_content_bg">
<span class="main_box_content">
合同录入
</span>
<span class="float_right" id="chromemenu">
<a href="javascript:void(0)" rel="dropmenu1">
<img src="../images/0schedule_white_on.gif" onMouseOver="this.src='../images/0schedule_white_down.gif'" onMouseOut="this.src='../images/0schedule_white_on.gif'" border="0"/>
</a>
</span>
</td>
<td width="3" class="main_box_right"></td>
</tr>
</table>
</div>
<div id="dropmenu1" class="dropmenudiv">
<a onMouseOver="this.style.backgroundColor='#ffffcc';this.style.color='#000000'" onMouseOut="this.style.backgroundColor='';this.style.color=''"><img src="../images/0print.gif" width="16" height="16" border="0"/> 打印</a>
<a onMouseOver="this.style.backgroundColor='#ffffcc';this.style.color='#000000'" onMouseOut="this.style.backgroundColor='';this.style.color=''"><img src="../images/0excel.gif" width="16" height="16" border="0"/> 生成Excel表</a>
<a onMouseOver="this.style.backgroundColor='#ffffcc';this.style.color='#000000'" onMouseOut="this.style.backgroundColor='';this.style.color=''"><img src="../images/0email.gif" width="16" height="16" border="0"/> 发送邮件</a>
<a onMouseOver="this.style.backgroundColor='#ffffcc';this.style.color='#000000'" onMouseOut="this.style.backgroundColor='';this.style.color=''"><img src="../images/0blowup.gif" width="16" height="16" border="0"/> 全屏</a>
</div>
<script type="text/javascript">
//cssdropdown.startchrome("chromemenu")
</script><!--下拉列表end-->
<div class="content">
<table width="100%" height="90%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="8" class="main_box_border_bg"> </td>
<td style=" padding-bottom:15px; text-align:center;"><!--内容top下拉菜单end-->
<!-- <div class="chromestyle" style="float:left; height:30px; line-height:30px;">
<ul>
<li><a οnclick="javascript:toSave('save')">
<em> </em><span class="button_none">保存</span>
</a></li>
<li><a οnclick="javascript:toSave('saveAndNew')">
<em> </em><span class="button_none">保存并新建</span>
</a></li>
<li><a οnclick="javascript:toClear()">
<em> </em><span class="button_none">清空</span>
</a></li>
</ul>
</div> -->
<div style="padding-top:15px;">
<table width="95%" border="0" cellspacing="0" cellpadding="0" class="enregister_box">
<tr>
<th colspan="4">
<span class="float_left"></span>
<span class="main_box_content">
基本信息
</span>
<span class="float_right quiklink">
<img src="../images/0download.gif" οnmοuseοver="this.style.cursor='hand'"/>
</span>
</th>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>合同编号：<font color="ff6600">*</font></strong> </td>
<td colspan="3" align="left">
<input type="text" name="detailObject.kl_title" value="" id="_Kl_title">
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>合同名称：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<input type="text" name="detailObject.keywords" value="" id="_Keywords">
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>合同类型：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<select name="detailObject.effenct_id" style="width:18.5%" >
<option value="00" >采购合同</option>
<option value="01" >销售合同</option>
</select>
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>创建时间：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<input type="text" name="detailObject.keywords" value="" id="_Keywords">
<input type="button" name="detailObject.keywords" value="..." id="_Keywords">
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>创建者：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<input type="text" name="detailObject.keywords" value="" id="_Keywords">
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>设备名称：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<input type="text" name="detailObject.keywords" value="" id="_Keywords">
</td>
</tr>
<tr>
<td width="18%" class="text_right">
<strong>创建者：<font color="ff6600">*</font></strong>
</td>
<td colspan="3" align="left">
<input type="text" name="detailObject.keywords" value="" id="_Keywords">
</td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="0" class="enregister_box">
<tr>
<th colspan="4">
<span class="float_left"></span>
<span class="main_box_content">
设备信息 </span>
<span class="float_right quiklink">
<img src="../images/0download.gif" οnmοuseοver="this.style.cursor='hand'"/> </span> </th>
</tr>
<tr>
<td colspan="4" align="left">
<table id="table" width="100%" border="0" cellspacing="0" cellpadding="0" class="enregister_box">
<tr>
<td width="4%" ><input type="checkbox" /></td>
<td width="13%">设备类型</td>
<td width="28%">设备名称</td>
<td width="13%">数量</td>
<td width="17%">单价</td>
<td width="16%">总价</td>
<td width="8%">管理</td>
</tr>
<!--<tr>
<td width="4%" ><input type="checkbox" /></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
</tr>-->
<!-- <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type = "button" value="添加" οnclick="AddRow()"/></td>
<td><input type = "button" value="删除" οnclick="DelRow()"/></td>
</tr>-->
</table><input type = "button" value="添加" οnclick="AddRow2()"/><input type = "button" value="删除" οnclick="DelRow2()"/>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<div align="center">
<input id="save" name="OP_ADD_SAVE" type="button" value="保 存" onClick="toSave();" class="button_bg" />
<input id="save" name="OP_ADD_SAVE" type="button" value="取 消" onClick="window.history.go(-1);;" class="button_bg" />
</div> </td>
</tr>
</table>
</div>
</td>
<td width="3" class="main_box_border_bg"></td>
</tr>
</table>
</div>
<!--content end-->
<div class="bottom">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="4"><img src="../images/0r_position_left_b.gif" width="8" height="4" /></td>
<td class="main_box_bottom_bg"> </td>
<td width="4"><img src="../images/0r_position_right_b.gif" width="3" height="4" /></td>
</tr>
</table>
</div>
<!--bottom end-->
</div>
</div>
</form>
</body>
<script type="text/javascript">
function AddRow2() {
var tbl = document.getElementById("table");
var rid = "row_"+tbl.rows.length;
var row = tbl.insertRow(tbl.rows.length);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
cell0.innerHTML = "<input type=/"checkbox/" id=/"" + "chk" + "_" + rid + "/"/>";
cell1.innerHTML = "<input type=/"text/" id=/"" + rid + "_" + "txt1" + "/"/>"; // 第一个文本框ID为txt1,一次类推，可以根据需要改
cell2.innerHTML = "<input type=/"text/" id=/"" + rid + "_" + "txt2" + "/"/>"; // 第一个文本框ID为txt1,一次类推，可以根据需要改
cell3.innerHTML = "<input type=/"text/" id=/"" + rid + "_" + "txt3" + "/"/>"; // 第一个文本框ID为txt1,一次类推，可以根据需要改
cell4.innerHTML = "<input type=/"text/" id=/"" + rid + "_" + "txt4" + "/"/>"; // 第一个文本框ID为txt1,一次类推，可以根据需要改
cell5.innerHTML = "<input type=/"text/" id=/"" + rid + "_" + "txt5" + "/"/>"; // 第一个文本框ID为txt1,一次类推，可以根据需要改
cell6.innerHTML = " <input type='button' value='delete' οnclick='delRow(this)'>";
}
function delRow(row){
var tbl = document.getElementById("table");
var rowIndex = row.parentNode.parentNode.rowIndex;
tbl.deleteRow(rowIndex);
}
function DelRow2() {
var tbl = document.getElementById("table");
var length = tbl.rows.length;
//alert(length);
// 倒序遍历，这样才能顺利删除
for (var i = length - 1; i >= 0; i--) {
//alert(table.rows[i].children(0).children(0));
//var chk = table.childNodes(i).children(0).all[0];
var chk = table.rows[i].cells[0].all[0];
//alert(chk.id);
if (chk.id.indexOf("chk") >= 0) {
if (chk.checked) {
//alert(1);
//var rowIndex = table.rows[i].parentNode.parentNode.rowIndex;
tbl.deleteRow(i);
}
}
}
}
</script>
<script type="text/javascript">
// 创建一个TD单元格，里面包含一个文本框
function createTD(txtID,rowid) {
var td0 = document.createElement("td");
td0.innerHTML = "<input type=/"text/" id=/"" + rowid + "_" + txtID + "/"/>"; //不用文本框下面取不出来。 （因遍历的方式需要不带文本框）
return td0;
}
// 创建一个TD单元格，里面是复选框 复选框用chk_Rowid识别
function createChkBox(rowid) {
var td0 = document.createElement("td");
td0.innerHTML = "<input type=/"checkbox/" id=/"" + "chk" + "_" + rowid + "/"/>"; //不用文本框下面取不出来。 （因遍历的方式需要不带文本框）
return td0;
}
// 创建一个TR行，里面按顺序添加TD
function createTR(rowid) {
var tr = document.createElement("tr");
tr.id = rowid;
var tdck = createChkBox(rowid);
tr.appendChild(tdck);
var td0 = createTD("a", rowid);
tr.appendChild(td0);
var td1 = createTD("b", rowid);
tr.appendChild(td1);
var td2 = createTD("c", rowid);
tr.appendChild(td2);
var td3 = createTD("d", rowid);
tr.appendChild(td3);
var td4 = createTD("e", rowid);
tr.appendChild(td4);
return tr;
}
// 设置一个序号，主要用来标识行号，因为删除需要确定行
var index = 0;
// 添加一行
function AddRow() {
alert(navigator.appVersion);
var table = document.getElementById("table");
index = index + 1;
var rowid = "row" + index;
var newRow = createTR(rowid);
table.appendChild(newRow);
}
// 删除一行
function DelRow() {
var table = document.getElementById("table");
var length = table.childNodes.length;
// 倒序遍历，这样才能顺利删除
for (var i = length-1; i >=0 ; i--) {
//alert(table.rows[i].children(0).children(0));
var chk = table.childNodes(i).children(0).all[0];
//alert(chk.id);
if (chk.id.indexOf("chk") >= 0) {
if (chk.checked) {
// var chkid = chk.id;
// var s = chkid.indexOf("_");
// var rowid = chkid.substring(s+1, chkid.length);
// alert(rowid);
table.removeChild(table.childNodes(i));
}
}
}
}
</script>
</html>
<!-- <tr>
<td width="4%" ><input type="checkbox" /></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
<td><input type = "text" value=""/></td>
</tr>-->
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
