HTML的table結(jié)構(gòu)如下：

復(fù)制代碼 代碼如下:

<table cellpadding="0"
class="tableStyle1" cellspacing="0">
<tr>
<th>序號<input type="hidden" value="1" />
<input type="hidden" value="1" /></th>
<th>零件型號</th>
<th>零件名稱</th>
<th>數(shù)量</th>
<th>無稅價</th>
<th>含稅價</th>
<th>稅額</th>
<th>貨款</th>
<th>整額</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><input ondblclick='selectLj(this)' type='text'
readonly='true' /><input type='hidden' onpropertychange='textChange(this)'
title='產(chǎn)品代碼' /><input type='hidden' value='' /><input
name='Dy_hd_rowState' type='hidden' value='1' /><input
type='hidden' value='0' /></td>
<td><input readonly='true' type='text' /></td>
<td><input value='1' onkeypress='onlyNumberIn1(this)' onkeyup='textChange(this)'
style='width: 35px' type='text' /></td>
<td><input type='text' readonly='true' /></td>
<td><input type='text' readonly='true' /></td>
<td><input type='text' readonly='true' /></td>
<td><input type='text' readonly='true' /></td>
<td><input type='text' readonly='true' /></td>
<td><input type='button' value='刪 除' /></td>
</tr>
</table>

復(fù)制代碼 代碼如下:

function addEvent (o,c,h){
if(o.attachEvent){
o.attachEvent('on'+c,h);
}else{
o.addEventListener(c,h,false);
}
return true;
}
var selectRow;//頁面級js變量，用來存被選中的行，好在彈出窗口中對該行賦值
function addnode(){
var table=document.getElementById("Dy_table");
var tr=table.rows[1].cloneNode(true);
for(var i=1;i<tr.childNodes.length-1;i++){
for(var p=0;p<tr.childNodes[i].getElementsByTagName("input").length;p++){
if(tr.childNodes[i].getElementsByTagName("input")[p].name=="Dy_hd_rowState")//行狀態(tài)特殊對待
tr.childNodes[i].getElementsByTagName("input")[p].value="1";
else
tr.childNodes[i].getElementsByTagName("input")[p].value="";
}
}
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù)
tr.firstChild.innerHTML=parseInt(rowCount)+1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//可見行數(shù)+1
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//總行數(shù)，包含隱藏的
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].appendChild(tr);
}else
table.appendChild(tr);
}
//刪除時的事件
function delnode(){
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù)
var row;//獲取最后一個可見的row
for( var i=table.rows.length-1; i>=0 ;i--){
if(table.rows[i].style.display!="none")
{
row=table.rows[i];
break;
}
}
var rowId=row.cells[1].getElementsByTagName("input")[2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未寫入數(shù)據(jù)庫時，直接刪除
{
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].removeChild(row);
}else
table.removeChild(row);
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
else//需要從數(shù)據(jù)庫刪除的，置上刪除標(biāo)記
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)-1;
}
}else{
if(rowId == ""){//新增的行未寫入數(shù)據(jù)庫時，清空
row.cells[1].getElementsByTagName("input")[0].value="";
row.cells[1].getElementsByTagName("input")[1].value="";
row.cells[1].getElementsByTagName("input")[2].value="";
row.cells[1].getElementsByTagName("input")[3].value="";
row.cells[1].getElementsByTagName("input")[4].value="";
row.cells[2].getElementsByTagName("input")[0].value="";
row.cells[3].getElementsByTagName("input")[0].value="1";
row.cells[4].getElementsByTagName("input")[0].value="";
row.cells[5].getElementsByTagName("input")[0].value="";
row.cells[6].getElementsByTagName("input")[0].value="";
row.cells[7].getElementsByTagName("input")[0].value="";
row.cells[8].getElementsByTagName("input")[0].value="";
}else{//需要從數(shù)據(jù)庫刪除的，置上刪除標(biāo)記
row.style.display="none";
row.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
addnode();
}
}
setClf();
}
//刪除時的事件
function delnode1(o){
var tr=o.parentNode.parentNode;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù)
var rowId=tr.cells[1].getElementsByTagName("input")[2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未寫入數(shù)據(jù)庫時，直接刪除
{
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].removeChild(tr);
}else
table.removeChild(tr);
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
}else{
if(rowId==""){//新增的行未寫入數(shù)據(jù)庫時，直接清空
tr.cells[1].getElementsByTagName("input")[0].value="";
tr.cells[1].getElementsByTagName("input")[1].value="";
tr.cells[1].getElementsByTagName("input")[2].value="";
tr.cells[1].getElementsByTagName("input")[3].value="";
tr.cells[1].getElementsByTagName("input")[4].value="";
tr.cells[2].getElementsByTagName("input")[0].value="";
tr.cells[3].getElementsByTagName("input")[0].value="1";
tr.cells[4].getElementsByTagName("input")[0].value="";
tr.cells[5].getElementsByTagName("input")[0].value="";
tr.cells[6].getElementsByTagName("input")[0].value="";
tr.cells[7].getElementsByTagName("input")[0].value="";
tr.cells[8].getElementsByTagName("input")[0].value="";
}else{//需要從數(shù)據(jù)庫刪除的，置上刪除標(biāo)記
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
addnode();
}
}
//以下循環(huán)用于從中間刪除時更新表格行號
for( var i= 1,p = 1; i < table.rows.length ;i++){
if(table.rows[i].style.display!="none")
{
table.rows[i].cells[0].innerHTML = p;
p++;
}
}
setClf();
}
//修改時發(fā)生的事件，改變行狀態(tài)
function textChange(o){
var tr=o.parentElement.parentElement;
if(o.parentElement.parentElement.parentElement==null)return;//如果是新增加的行則返回
var rowState = tr.cells[1].getElementsByTagName("input")[3].value;
if( rowState == "1")
return;
else
tr.cells[1].getElementsByTagName("input")[3].value = "3";
setClf();
}
//提交前驗證數(shù)據(jù)，保證沒有重復(fù)的行
function checkSameData(){
var table=document.getElementById("Dy_table");
for( var i= 1; i < table.rows.length ;i++){
if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value=="") continue;
for( var p= i + 1; p < table.rows.length ;p++){
if(table.rows[p].style.display == "none") continue;
if(table.rows[i].cells[1].getElementsByTagName("input")[1].value.replace(//s+$/g,"") ==
table.rows[p].cells[1].getElementsByTagName("input")[1].value.replace(//s+$/g,""))
{alert("零件部分存在重復(fù)的項，不能保存！");return false;}
}
}
return true;
}
var dialogWin;//零件窗口是否打開
//選零件
function selectLj(o){
if(dialogWin == null){
selectRow = o.parentNode.parentNode;//將行賦值給全局變量
var cpxh = selectRow.cells[1].getElementsByTagName("input")[0].value;
dialogWin = winOpen('selectLj.aspx?ljh='+cpxh);
// window.open("../jddgl/Select_lj.aspx?ljh=" + cpxh,window,
// "center:yes;dialogWidth:600px;dialogHeight:400px;help:no;status:no;");
}
}
function winOpen(url){
return window.open(url,'selectLj','resizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px');
}

//計算table內(nèi)費用
function setClf(){}