佟大为范冰冰淋浴视频,美女视频应用

在頁面中動態(tài)添加一行以及刪除一行列表

2011.04.27

今天要實現(xiàn)一個在頁面中動態(tài)添加以及刪除一行列表的功能,查找了幾種方法,在此備份,以便日后使用:

========================此方法比較簡潔，而且可以解決問題========================
function deleteCurrentRow()//刪除當前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.table10.deleteRow(currRowIndex);//table10--表格id
}

function insertRow()
{
var nRow=document.all.table10.rows.length; //表格的總行數(shù)
var objTheRow=document.all.table10.insertRow(nRow);//在最下邊新增一行
objTheRow.insertCell(0);//新增一個單元格
objTheRow.insertCell(1);
objTheRow.insertCell(2);
objTheRow.cells(0).innerHTML=nRow;//對新增的單元格?容
objTheRow.cells(1).innerHTML=" ";
objTheRow.cells(2).innerHTML="<input type='button' value='del this row' onClick='deleteCurrentRow()'>";
}

====================我的程序代碼======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=GB18030">
<META name="GENERATOR" content="IBM WebSphere Studio">
<TITLE>cfbcard.html</TITLE>
</HEAD>

<SCRIPT language="JavaScript">
var j_1 = 1;
function add_row_family(){
newRow=document.all.family.insertRow(-1)

newcell=newRow.insertCell()
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<input type='text' name='familyname"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
newcell.innerHTML="<SELECT name='thesistogether"+j_1+"'>"+
                        " <option value='請選擇'>"+
      "   請選擇"+
      "  </option>"+
      "  <option value='1'>"+
      "   111"+
      "  </option>"+
      "  <option value='2'>"+
      "   222"+
      "  </option>"+
      "  <option value='3'>"+
      "   333"+
      "  </option>"+
      "  <option value='4'>"+
      "   444"+
      "  </option>"+
      "  <option value='5'>"+
      "   555"+
      "  </option>"+

                       "</SELECT>";
for(var i = 0;i<12;i++){
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
newcell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
}

newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<a href='javascript:delTableRow(\""+1+"\")'>刪除</a>";
newcell.innerHTML="<input type='button' value='刪除' onClick='deleteCurrentRow()'>";

j_1++;
document.all.j_1.value=j_1;
document.all.family.focus();
}

function deleteCurrentRow()//刪除當前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.family.deleteRow(currRowIndex);//table10--表格id
}

</script>

=================================另外一種方法==============
如何刪除表格的行上次講到了如何動態(tài)給表格增加行，那么這次就講講如何刪除表格的行了。首先建立一個表格，
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
<tr id="delCell">
<td>name</td>
<td>address</td>
</tr>
</tbody>
</table>
取得tbody的元素var mailbody = document.getElementById("mainbody");,
接著取得要刪除行的元素var cell = document.getElementById("delCell");
最后就是從tbody中移去要刪除的行就可以了mainbody.removeChild(cell);
完整的代碼如下：
<html>
<head>
<title>動態(tài)刪除表格的行</title>
<script type="text/javascript">
function deleteCell(){
var mailbody = document.getElementById("mainbody");
var cell = document.getElementById("delCell");
if(cell!=undefined){
mainbody.removeChild(cell);
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
<tr id="delCell">
<td>name</td>
<td>address</td>
</tr>
</tbody>
</table>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

動態(tài)生成HTML表單

JS實現(xiàn)對table增加刪除行并自動排序

js抓取HTML的Table 并為表格里每個格賦值

js在制定tr后面添加tr

js添加table的行和列具體實現(xiàn)方法

ie和FF 在insertRow和insertCell的區(qū)別

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看