JS動態(tài)創(chuàng)建Table,Tr,Td并賦值的具體實(shí)現(xiàn)
更新時間:2013年07月05日 17:28:27 作者:
這篇文章介紹了JS動態(tài)創(chuàng)建Table,Tr,Td并賦值的具體實(shí)現(xiàn),有需要的朋友可以參考一下
成果庫修改:
要求主題列表隨成果類型改變而改變
網(wǎng)上查詢資料后開工,在成果類型下拉框添加change()事件觸發(fā)Dwr,查詢主題集合——動態(tài)創(chuàng)建/編輯Table
概要代碼如下:
JS
//動態(tài)獲取主題數(shù)據(jù)
function getzts(){
parentId = document.getElementById("bselect1").value;
if(parentId!=""){
dwrMethod.getZtList(parentId,callback5);
}else{
//清空主題Table的數(shù)據(jù)
var t=document.getElementById("zhutiTable"); //獲取Table
var length= t.rows.length; //獲得Table下的行數(shù)
if(length!=0){ //如果有行,則清空
for(var i=length-1;i>=0;i--)
{
t.deleteRow(i);
}
}
var r = t.insertRow();
var c = r.insertCell();
c.innerHTML="暫無主題列表";
document.getElementById('zhutiTable').appendChild(t);
}
}
function callback5(provinces){
var t=document.getElementById("zhutiTable"); //獲取Table
var length= t.rows.length; //獲得Table下的行數(shù)
if(length!=0){ //如果有行,則清空
for(var i=length-1;i>=0;i--)
{
t.deleteRow(i);
}
}
if(provinces.length>0){
for (var i = 0; i < provinces.length; i++) {
//tr
if(i%4==0){
var r = t.insertRow(t.rows.length);//創(chuàng)建新的行
}
//td
var c = r.insertCell(); //創(chuàng)建新的列
c.innerHTML = "<input type='checkbox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1];
}
}else{
var r = t.insertRow();
var c = r.insertCell();
c.innerHTML="暫無主題列表";
}
document.getElementById('zhutiTable').appendChild(t);
}
html
<tr>
<td class="add_tit">成果類型</td>
<td>
<s:select id="bselect1" name="pruType1" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="-- 請選擇 --" />
<label class="note4">*</label>
</td>
</tr>
[html]
<tr>
<td class="add_tit">主題</td>
<td id="table1" style="padding-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;">
<table id="zhutiTable" border="0" cellpadding="0" cellspacing="0" width=100% class="table_table">
<tr>
<td style="color: red;">注:請先選擇成果類型</td>
</tr>
</table>
</td>
</tr>
要求主題列表隨成果類型改變而改變
網(wǎng)上查詢資料后開工,在成果類型下拉框添加change()事件觸發(fā)Dwr,查詢主題集合——動態(tài)創(chuàng)建/編輯Table
概要代碼如下:
JS
復(fù)制代碼 代碼如下:
//動態(tài)獲取主題數(shù)據(jù)
function getzts(){
parentId = document.getElementById("bselect1").value;
if(parentId!=""){
dwrMethod.getZtList(parentId,callback5);
}else{
//清空主題Table的數(shù)據(jù)
var t=document.getElementById("zhutiTable"); //獲取Table
var length= t.rows.length; //獲得Table下的行數(shù)
if(length!=0){ //如果有行,則清空
for(var i=length-1;i>=0;i--)
{
t.deleteRow(i);
}
}
var r = t.insertRow();
var c = r.insertCell();
c.innerHTML="暫無主題列表";
document.getElementById('zhutiTable').appendChild(t);
}
}
function callback5(provinces){
var t=document.getElementById("zhutiTable"); //獲取Table
var length= t.rows.length; //獲得Table下的行數(shù)
if(length!=0){ //如果有行,則清空
for(var i=length-1;i>=0;i--)
{
t.deleteRow(i);
}
}
if(provinces.length>0){
for (var i = 0; i < provinces.length; i++) {
//tr
if(i%4==0){
var r = t.insertRow(t.rows.length);//創(chuàng)建新的行
}
//td
var c = r.insertCell(); //創(chuàng)建新的列
c.innerHTML = "<input type='checkbox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1];
}
}else{
var r = t.insertRow();
var c = r.insertCell();
c.innerHTML="暫無主題列表";
}
document.getElementById('zhutiTable').appendChild(t);
}
html
復(fù)制代碼 代碼如下:
<tr>
<td class="add_tit">成果類型</td>
<td>
<s:select id="bselect1" name="pruType1" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="-- 請選擇 --" />
<label class="note4">*</label>
</td>
</tr>
[html]
<tr>
<td class="add_tit">主題</td>
<td id="table1" style="padding-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;">
<table id="zhutiTable" border="0" cellpadding="0" cellspacing="0" width=100% class="table_table">
<tr>
<td style="color: red;">注:請先選擇成果類型</td>
</tr>
</table>
</td>
</tr>
您可能感興趣的文章:
- JS 排序輸出實(shí)現(xiàn)table行號自增前端動態(tài)生成的tr
- JS動態(tài)添加Table的TR,TD實(shí)現(xiàn)方法
- JavaScript如何動態(tài)創(chuàng)建table表格
- Js實(shí)現(xiàn)動態(tài)添加刪除Table行示例
- js動態(tài)給table添加/刪除tr的方法
- js實(shí)現(xiàn)對table動態(tài)添加、刪除和更新的方法
- JS實(shí)現(xiàn)動態(tài)修改table及合并單元格的方法示例
- jQuery+json實(shí)現(xiàn)動態(tài)創(chuàng)建復(fù)雜表格table的方法
- javascript DOM操作之動態(tài)刪除TABLE多行
- JS實(shí)現(xiàn)動態(tài)生成html table表格的方法分析
相關(guān)文章
js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)總結(jié)
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05javascript實(shí)現(xiàn)小型區(qū)塊鏈功能
這篇文章主要介紹了javascript實(shí)現(xiàn)小型區(qū)塊鏈功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04一個不錯的仿攜程自定義數(shù)據(jù)下拉選擇select
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select,對一些比較重要的參數(shù)進(jìn)行的描述,方便初學(xué)者2014-09-09JavaScript設(shè)計(jì)模式之單體模式全面解析
單體模式可以說是javascript中最基本也是最有用的模式之一,接下來通過本文給大家解析js設(shè)計(jì)模式之單體模式,非常不錯,感興趣的朋友一起看看吧2016-09-09基于javascript實(shí)現(xiàn)圖片左右切換效果
這篇文章主要為大家介紹了基于javascript實(shí)現(xiàn)圖片左右切換效果,感興趣的小伙伴們可以參考一下2016-01-01js關(guān)閉瀏覽器窗口及檢查瀏覽器關(guān)閉事件
js關(guān)閉瀏覽器窗口,不彈出提示框。支持ie6+,火狐,谷歌等瀏覽器,下面以一個示例為大家詳細(xì)介紹下具體的實(shí)現(xiàn)方法,感興趣的朋友可以參考下2013-09-09