用Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格示例自己寫(xiě)的
更新時(shí)間：2013年10月21日 16:50:05 作者：
動(dòng)態(tài)增加表格的方法有很多，但大多說(shuō)實(shí)現(xiàn)起來(lái)比較繁瑣，本文的這個(gè)示例是作者自己手寫(xiě)的，經(jīng)測(cè)試效果還不錯(cuò)，但唯獨(dú)不兼容FF，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
function addEvent (o,c,h){
if(o.attachEvent){
o.attachEvent('on'+c,h);
}else{
o.addEventListener(c,h,false);
}
return true;}
var selectRow;//頁(yè)面級(jí)js變量，用來(lái)存被選中的行，好在彈出窗口中對(duì)該行賦值
function addnode()
{
var table=document.getElementById("Dy_table");
var tr=table.insertRow();
var cell0=tr.insertCell();
var cell1=tr.insertCell();
var cell2=tr.insertCell();
var cell3=tr.insertCell();
var cell4=tr.insertCell();
var cell5=tr.insertCell();
var cell6=tr.insertCell();
var cell7=tr.insertCell();
var cell8=tr.insertCell();
var cell9=tr.insertCell();
var hidden1=document.createElement("<input name='Dy_hd_cpdm' onpropertychange='textChange(this)' type='hidden' >");
var hidden2=document.createElement("<input name='Dy_hd_sx' type='hidden' >");
var hidden3=document.createElement("<input name='Dy_hd_mxid' type='hidden' >");
var hidden4=document.createElement("<input name='Dy_hd_rowState' type='hidden' value='1'>");//行狀態(tài)
var hidden5=document.createElement("<input name='Dy_hd_dj' type='hidden' value='0'>");//隱藏單價(jià)
var input1=document.createElement("<Input type='text' ondblclick='selectLj(this)' style='width:100px' name='Dy_text_ljh' >");
var input2=document.createElement("<Input type='text' style='width:100px' name='Dy_text_cpmc' >");
var input3=document.createElement("<Input type='text' onKeyPress='onlyNumberIn1(this)' style='width:40px' value='1' name='Dy_text_sl' >");
var input4=document.createElement("<Input type='text' onKeyPress='onlyNumberIn(this)' style='width:60px' name='Dy_text_dj' >");
var input5=document.createElement("<Input type='text' style='width:100px' name='Dy_text_sccj' >");
var input6=document.createElement("<select name='Dy_select_clly' >");
var input7=document.createElement("<Input type='text' readonly='true' style='width:40px' name='Dy_text_glf' >");
var input8=document.createElement("<Input type='text' readonly='true' style='width:60px' name='Dy_text_je' >");
var input9=document.createElement("<Input type='button' name='del' value='刪 除' class='input-button' onclick='delnode1(this)' >")
var oOption1=document.createElement("option");
var oOption2=document.createElement("option");
var oOption3=document.createElement("option");
var oOption4=document.createElement("option");
input6.options.add(oOption1);
input6.options.add(oOption2);
input6.options.add(oOption3);
input6.options.add(oOption4);
oOption1.innerText="合同件";
oOption1.value="合同件";
oOption2.innerText="外購(gòu)件";
oOption2.value="外購(gòu)件";
oOption3.innerText="備件部";
oOption3.value="備件部";
oOption4.innerText="廠家供件";
oOption4.value="廠家供件";
var rowIndex;
rowIndex = table.rows.length-2;
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//用戶(hù)可見(jiàn)的行數(shù)
cell0.innerText=parseInt(rowCount)+1;
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount)+1;
hidden2.value = parseInt(table.rows[0].cells[0].getElementsByTagName("input")[1].value) + 1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value=hidden2.value;
cell1.appendChild(input1);
cell1.appendChild(hidden1);//產(chǎn)品代碼
cell1.appendChild(hidden2);//內(nèi)部順序
cell1.appendChild(hidden3);//該行的Id，用來(lái)修改和刪除
cell1.appendChild(hidden4);//該行的狀態(tài)
cell2.appendChild(input2);
cell3.appendChild(input3);
cell4.appendChild(input4);
cell4.appendChild(hidden5);
cell5.appendChild(input5);
cell6.appendChild(input6);
cell9.appendChild(input9);
cell8.appendChild(input8);
cell7.appendChild(input7);
var tt=function(obj)
{
return function(){textChange(obj);}
}
var ttt=function(obj)
{
return function(){selectChange(obj);}
}
addEvent(input1,"change",tt(input1));
addEvent(input2,"change",tt(input1));
addEvent(input3,"change",tt(input1));
addEvent(input4,"change",tt(input1));
addEvent(input5,"change",tt(input1));
addEvent(input6,"change",ttt(input6));
addEvent(input7,"change",tt(input1));
// addEvent(input8,"change",tt(input1));
}
function delnode()//刪除時(shí)的事件
{
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//用戶(hù)可見(jiàn)的行數(shù)
var row;//保存最后一個(gè)可見(jiàn)的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")[3].value;
if( rowCount > 1 )
{
if(rowId=="")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí)，直接刪除
{
row.removeNode(true);
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
}
else//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount-1);
}
}
else
{
if(rowId == "")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí)，清空
{
row.cells.item(1).getElementsByTagName("input")[0].value="";
row.cells.item(1).getElementsByTagName("input")[1].value="";
row.cells.item(2).getElementsByTagName("input")[0].value="";
row.cells.item(3).getElementsByTagName("input")[0].value="1";
row.cells.item(4).getElementsByTagName("input")[0].value="";
row.cells.item(7).getElementsByTagName("input")[0].value="";
row.cells.item(5).getElementsByTagName("input")[0].value="";
row.cells.item(6).getElementsByTagName("select")[0].selectedIndex=0;
}
else//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
addnode();
}
}
setClf();
}
function delnode1(o)//刪除時(shí)的事件
{
var tr=o.parentElement.parentElement;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//用戶(hù)可見(jiàn)的行數(shù)
var rowId=tr.cells[1].getElementsByTagName("input")[3].value;
if( rowCount > 1 )
{
if(rowId=="")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí)，直接刪除
{
tr.removeNode(true);
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
}
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount-1);
}
}
else
{
if(rowId=="")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí)，直接清空
{
tr.cells.item(1).getElementsByTagName("input")[0].value="";
tr.cells.item(1).getElementsByTagName("input")[1].value="";
tr.cells.item(2).getElementsByTagName("input")[0].value="";
tr.cells.item(3).getElementsByTagName("input")[0].value="1";
tr.cells.item(4).getElementsByTagName("input")[0].value="";
tr.cells.item(7).getElementsByTagName("input")[0].value="";
tr.cells.item(5).getElementsByTagName("input")[0].value="";
tr.cells.item(6).getElementsByTagName("select")[0].selectedIndex=0;
}
else//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
addnode();
}
}
//以下循環(huán)用于從中間刪除時(shí)更新表格行號(hào)
rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;
for( var i= 1,p = 1; i < table.rows.length ;i++)
{
if(table.rows[i].style.display!="none")
{
table.rows[i].cells[0].innerText = p;
p++;
}
}
setClf();
}
//修改時(shí)發(fā)生的事件
function textChange(o)
{
setClf();
var tr=o.parentElement.parentElement;
var rowState = tr.cells[1].getElementsByTagName("input")[4].value;
if( rowState == "1")
return;
else
tr.cells[1].getElementsByTagName("input")[4].value = "3";
}
//下拉框選項(xiàng)改變setClf()是計(jì)算金額的，這里面沒(méi)有給出來(lái)
function selectChange(o)
{
var tr=o.parentElement.parentElement;
var glf = tr.cells[7].getElementsByTagName("input")[0];
var dj = tr.cells[4].getElementsByTagName("input")[0];
var dj1 = tr.cells[4].getElementsByTagName("input")[1];
if( o.selectedIndex==0)//合同件
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==1)//外購(gòu)件
{
glf.value='0.20';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==2)//備件部
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==3)//廠家供件
{
glf.value='0.00';
dj.value='0.00';
dj.readOnly=true;
setClf();
return;
}
}
//提交前驗(yàn)證數(shù)據(jù)，保證沒(méi)有重復(fù)的行
function checkSameData()
{
var table=document.getElementById("Dy_table");
// var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//用戶(hù)可見(jiàn)的行數(shù)
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ù)的項(xiàng)，不能保存！");return false;}
}
}
return true;
}
//零件窗口是否打開(kāi)
var dialogWin;
function selectLj(o)//選零件
{
if(dialogWin == null)
{
selectRow = o.parentElement.parentElement;//將行賦值給全局變量
dialogWin = window.showModelessDialog("../jddgl/Select_lj.aspx",window,
"center:yes;dialogWidth:550px;dialogHeight:400px;help:no;status:no;");
}
}
=======
前臺(tái)頁(yè)面
復(fù)制代碼 代碼如下:
<table id="Dy_table" width="760" cellpadding="0" style=" border-top:solid 1px #9cf" class="tableStyle" cellspacing="0">
<tr>
<td>序號(hào)<input id="pageState" name="pageState" type="hidden" value="0" /> <%--頁(yè)面狀態(tài)--%>
<input id="pageRows" name="pageRows" type="hidden" value="1" /> <%--總行數(shù)，包括隱藏的--%>
<asp:HiddenField ID="HF_tableRows" runat="server" Value="1" /> <%--用戶(hù)可見(jiàn)行數(shù)--%>
</td>
<td>零件號(hào)</td>
<td>零件名稱(chēng)</td>
<td>數(shù)量</td>
<td>單價(jià)</td>
<td>生產(chǎn)廠家</td>
<td>材料來(lái)源</td>
<td>管理費(fèi)</td>
<td>合計(jì)</td>
<td>操作</td>
</tr>
<tr><td>1</td><td><input name='Dy_text_ljh' style='width:100px' ondblclick='selectLj(this)' onchange='textChange(this)' type='text' />
<input name='Dy_hd_cpdm' type='hidden' onpropertychange='textChange(this)' title='產(chǎn)品代碼' />
<input name='Dy_hd_sx' type='hidden' value='1' title='內(nèi)部順序' />
<input name='Dy_hd_mxid' type='hidden' value='' title='該行的Id，用來(lái)修改和刪除' />
<input name='Dy_hd_rowState' type='hidden' value='1' title='該行的狀態(tài)' />
</td><td><input name='Dy_text_cpmc' style='width:100px' onchange='textChange(this)' type='text' /></td>
<td><input name='Dy_text_sl' value='1' onKeyPress='onlyNumberIn1(this)' onchange='textChange(this)' style='width:40px' type='text' /></td>
<td><input name='Dy_text_dj' onKeyPress='onlyNumberIn(this)' onchange='textChange(this)' style='width:60px' type='text' /><input name='Dy_hd_dj' type='hidden' value='0'/></td>
<td><input name='Dy_text_sccj' onchange='textChange(this)' style='width:100px' type='text' /></td>
<td><select name='Dy_select_clly' onchange='selectChange(this)' ><option value='合同件'>合同件</option>
<option value='外購(gòu)件'>外購(gòu)件</option><option value='備件部'>備件部</option>
<option value='廠家供件'>廠家供件</option></select></td>
<td><input name='Dy_text_glf' readonly='true' onchange='textChange(this)' style='width:40px' type='text' value='0.00' /></td>
<td><input name='Dy_text_je' readonly='true' style='width:60px' type='text' /></td>
<td><input name='del' type='button' value='刪 除' class='input-button' onclick='delnode1(this)' /></td></tr>
</table>
項(xiàng)目需要這種功能，前前后后用了幾種辦法，我覺(jué)得還是這種比較好（畢竟是我花了蠻多時(shí)間寫(xiě)的，呵呵），js不怎么熟練，希望有朋友能指點(diǎn)幫助改進(jìn)和提高。失敗的作品，不兼容ＦＦ，衰！
您可能感興趣的文章:
相關(guān)文章
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09
原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能，本段代碼是基于js 與css實(shí)現(xiàn)的，感興趣的朋友跟隨小編一起看看吧2019-12-12
viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁(yè)面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js，這里為分享一下使用方法，需要的朋友可以參考下2020-04-04
微信小程序時(shí)間軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了微信小程序時(shí)間軸實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序wx:for語(yǔ)句使用與時(shí)間軸縱向布局相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js編寫(xiě)三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例
這篇文章主要為大家分享了JavaScript編寫(xiě)三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)
這篇文章介紹了javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)，有需要的朋友可以參考一下2013-08-08
JS正則匹配URL網(wǎng)址的方法(可匹配www,http開(kāi)頭的一切網(wǎng)址)
這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實(shí)現(xiàn)匹配www,http開(kāi)頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構(gòu)建URL的操作技巧,需要的朋友可以參考下2017-01-01
javascript Range對(duì)象跨瀏覽器常用操作
最近在開(kāi)發(fā)在線代碼編輯器的過(guò)程中頻繁接觸Range對(duì)象，由于跨瀏覽器的需求，使用到ie下TextRange對(duì)象和標(biāo)準(zhǔn)Dom Range對(duì)象。2009-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
本文對(duì)JS判斷鼠標(biāo)移入元素的方向的實(shí)現(xiàn)方法進(jìn)行介紹，并分享了完整的示例代碼，有需要的朋友可以看下2016-12-12