<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script language="javascript">// Example: obj = findObj("image1");
function findObj(theObj, theDoc){
var p, i, foundObj;
if(!theDoc)
theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
//添加一个参与人填写行
function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame",document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加列:序号
var newNameTD=newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:姓名
var newNameTD=newTR.insertCell(1);
//添加列内容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
//添加列:电子邮箱
var newEmailTD=newTR.insertCell(2);
//添加列内容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
//添加列:电话
var newTelTD=newTR.insertCell(3);
//添加列内容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
//添加列:手机
var newMobileTD=newTR.insertCell(4);
//添加列内容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";
//添加列:公司名
var newCompanyTD=newTR.insertCell(5);
//添加列内容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";
//添加列:删除按钮
var newDeleteTD=newTR.insertCell(6);
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
//删除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame",document);
var signItem = findObj(rowid,document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for(i=rowIndex;i<signFrame.rows.length;i++){
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}//清空列表
function ClearAllSign(){
if(confirm('确定要清空所有参与人吗？')){
var signFrame = findObj("SignFrame",document);
var rowscount = signFrame.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signFrame.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";
//预添加一行
AddSignRow();
}
}
function insRow()
{
//insertRow 设置为0 表示从第一行开始添加新的行，
var x=document.getElementById('myTable').insertRow();
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="新列1";//添加新的 列1
z.innerHTML="新列2";//添加的新的列2
}
//删除table列：从start列开始删除,共删end列（不包括start）
function removeCells(tab, start, end) {
var rows = tab.rows;
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells;
/*for (var j = 0; j < cells.length; j++) {
if (j >= start && j <= end) {
tab.rows[i].deleteCell(start);
}
}*/
for (var j = 0; j < end; j++) {
tab.rows[i].deleteCell(start);
}
}
}
//删除table行，从start行开始删除，共删end行（不包括start）
function removeRows(tab, start, end) {
var rows = tab.rows;
/*for (var i = 0; i < rows.length; i++) {
if (i >= start && i <= end) {
tab.deleteRow(start);
}
}*/
for (var i = 0; i < end; i++) {
tab.deleteRow(start);
}
}
function deleteCells() {
var tab = document.getElementById("tab");
var start = document.getElementById("startCell").value;
var end = document.getElementById("endCell").value;
if (tab.rows.length > 0) {
var cell = tab.rows[0].cells;
start = start > cell.length ? cell.length : start;
start = start < 0 ? 0 : start;
end = end > cell.length ? cell.length : end;
end = end < 0 ? 0 : end;
}
removeCells(tab, start, end);
}
function deleteRows() {
var tab = document.getElementById("tab");
var start = document.getElementById("startRow").value;
var end = document.getElementById("endRow").value;
start = start > tab.rows.length ? tab.rows.length : start;
start = start < 0 ? 0 : start;
end = end > tab.rows.length ? tab.rows.length : end;
end = end < 0 ? 0 : end;
removeRows(tab, start, end);
}
window.onload = function () {
var showDiv = document.getElementById("show");
var htmlTemplate = "<table id='tab' border='1'>";
for (var i = 0; i < 4; i++) {
htmlTemplate += "<tr>";
for (var j = 0; j < 13; j++) {
htmlTemplate += "<td>" + i + "-" + j + "</td>";
}
htmlTemplate += "</tr>";
}
htmlTemplate += "</table>";
showDiv.innerHTML = htmlTemplate;
}
</script>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
<tr id="trHeader">
<td width="27" bgcolor="#96E0E2" rowspan="2">序号</td>
<td width="64" bgcolor="#96E0E2">用户姓名</td>
<td width="98" bgcolor="#96E0E2">电子邮箱</td>
<td width="92" bgcolor="#96E0E2">固定电话</td>
<td width="86" bgcolor="#96E0E2">移动手机</td>
<td width="153" bgcolor="#96E0E2">公司名称</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加参与人" onClick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onClick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
<BR>
<table id="testTbl" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2"></td>
<td id="b">第二行第一列</td>
<td id="b">第二行第二列</td>
</tr>
<tr bgcolor=#0000FF>
<td width=6%><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
<BR>
<BR>
<input type="text" id="startCell" />
<input type="text" id="endCell" />
<input type="button" value="删除列" onclick="deleteCells()"><br/>
<input type="text" id="startRow" />
<input type="text" id="endRow" />
<input type="button" value="删除行" onclick="deleteRows()">
<div id="show"></div>
<BR>
<html>
<body>
<table id=tb1 border=1 width=100>
<tr><td colspan="2">1</td></tr>
</table>
<button onclick=run()>插入行</button>
</body>
<script>
function run(){
insTable(document.getElementById("tb1"),"<tr><td>2</td><td>33</td></tr><tr><td colspan=\"2\">3</td></tr>")
}
function insTable(tb,str){
var o=document.createElement("div"),ol
o.innerHTML="<table>"+str+"</table>"
ol=o.childNodes[0].tBodies[0].rows
while(ol.length>0){
tb.tBodies[0].appendChild(ol[0])
}
}
</script>
<html>
<head>
<script language="javascript">
var r=-1;
function addrow(){
r++;
//alert(r);
var tbody = document.getElementById("tb");
var row = tbody.insertRow();
// var innerHTML1 = "<input type='text' name='cusername' size='15' value=''>";
var innerHTML2 = "<input type='text' name='cpassword' size='15' value=''>";
var innerHTML3 = "<input type='button' name='cpassword2' value='删除' onclick='remove("+r+")'>";
// row.insertCell(0).innerHTML = innerHTML1;
cellCon = row.insertCell(0);
cellCon.rowSpan = 2;
cellCon.innerHTML = "资金援助1";
row.insertCell(1).innerHTML = innerHTML2;
row.insertCell(2).innerHTML = innerHTML3;
tbody.appendChild(row);
var row1 = tbody.insertRow();
row1.insertCell(1).innerHTML = "2";
row1.insertCell(2).innerHTML = "3A";
tbody.appendChild(row1);
}
function remove(ind){
//alert(ind);
var tbody = document.getElementById("tb");
r--;
var oTr = tbody.childNodes[ind];
// alert(tbody.childNodes.length);
// alert(oTr.tagName);
//alert(oTr.innerHTML);
tbody.removeChild(oTr);
var trRows = tbody.childNodes;
for (var i = ind; i < trRows.length; i++) {
var sibingTr = trRows[i];
//alert(sibingTr.innerHTML);
if (sibingTr == null) {
continue;
}
var cells = sibingTr.childNodes;
for (var j = 0; j < cells.length; j++) {
var oldContent = cells[j].innerHTML;
if (j == 0) {
var replaceRegx = "(\d+)/g";
oldContent = oldContent.replace(replaceRegx, "" + (i + 1));
}
cells[j].innerHTML = ProcessStrIndex(oldContent, i);
}
//alert(sibingTr.innerHTML);
}
}
function ProcessStrIndex(str, index) {
//alert(index);
var replaceRegx = /\(\d+\)/g;
str = str.replace(replaceRegx, "(" + index + ")");
replaceRegx = /\[\d+\]/g;
str = str.replace(replaceRegx, "[" + index + "]");
return str;
}
</script>
</head>
<table border = "1" width="55%">
<tbody id = "tb">
<thead><td colspan = "3">addAndRemoveRows</td></thead>
</tbody>
<tr align = "left"><td align = "right" colspan="3"><input type="button" value="添加" onclick="addrow()"/></td></tr>
</table>
<script type="text/javascript">
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
function insertRowInTable(){
var table = document.getElementById("myTable");
var newRow = table.insertRow(-1);
cellCon = newRow.insertCell(0);
cellCon.innerHTML = "<table border=\"1\"> <tr> <td width=\"277\" rowspan=\"2\">资金援助</td> <td width=\"147\">时间</td> <td width=\"135\">资金额</td> <td width=\"113\">无资金援助</td> </tr> <tr> <td>援助简介</td> <td>情况反馈</td> <td>继续添加删除</td> </tr> </table>";
}
</script>
</head>
<body>
<table width="700" height="107" border="1" id="myTable">
<tr>
<td>
<table border="1">
<tr>
<td width="277" rowspan="2">资金援助</td>
<td width="147">时间</td>
<td width="135">资金额</td>
<td width="113">无资金援助</td>
</tr>
<tr>
<td>援助简介</td>
<td>情况反馈</td>
<td>继续添加删除</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="button" onclick="insertRowInTable();" value="插入一行" />
<script src="file:///E|/ly/Alltest/2012/YuanZang/JS/jquery.js" type="text/javascript"></script>
<script>
//注意input的id和tr的id要一样
function addRowByID(currentRowID){
//遍历每一行，找到指定id的行的位置i,然后在该行后添加新行
$.each( $('table:first tbody tr'), function(i, tr){
if($(this).attr('id')==currentRowID){
//获取当前行
var currentRow=$('table:first tbody tr:eq('+i+')');
//要添加的行的id
var addRowID=currentRowID+1;
str = "<tr id = '"+addRowID+"'><td>"+addRowID+"</td><td>row"+addRowID+"</td>"+
"<td><input id= '"+addRowID+"' type='button' value='添加行' onclick='addRowByID(this.id);' /></td></tr>";
//当前行之后插入一行
currentRow.after(str);
}
});
}
</script>
<table border="1" bordercolor="green">
<thead>
<tr>
<th>id</th>
<th>value</th>
<th>button</th>
</tr>
</thead>
<tbody>
<!-- 这里是input的id和tr的id要一样 -->
<tr id='aaa'>
<td>0</td>
<td>row0</td>
<td><input id='aaa' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
</tr>
<tr id='bbb'>
<td>1</td>
<td>row1</td>
<td><input id='bbb' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
</tr>
<tr id='ccc'>
<td>2</td>
<td>row2</td>
<td><input id='ccc' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
</tr>
</tbody>
</table>
</body>
</html>
浙公网安备 33010602011771号