JS動態(tài)創(chuàng)建Table,Tr,Td并賦值的具體實現(xiàn)
更新時間:2013年07月05日 17:28:27 作者:
這篇文章介紹了JS動態(tài)創(chuàng)建Table,Tr,Td并賦值的具體實現(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 排序輸出實現(xiàn)table行號自增前端動態(tài)生成的tr
- JS動態(tài)添加Table的TR,TD實現(xiàn)方法
- JavaScript如何動態(tài)創(chuàng)建table表格
- Js實現(xiàn)動態(tài)添加刪除Table行示例
- js動態(tài)給table添加/刪除tr的方法
- js實現(xiàn)對table動態(tài)添加、刪除和更新的方法
- JS實現(xiàn)動態(tài)修改table及合并單元格的方法示例
- jQuery+json實現(xiàn)動態(tài)創(chuàng)建復(fù)雜表格table的方法
- javascript DOM操作之動態(tài)刪除TABLE多行
- JS實現(xiàn)動態(tài)生成html table表格的方法分析
相關(guān)文章
js實現(xiàn)繼承的方法及優(yōu)缺點總結(jié)
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)繼承的方法及優(yōu)缺點的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05一個不錯的仿攜程自定義數(shù)據(jù)下拉選擇select
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select,對一些比較重要的參數(shù)進行的描述,方便初學(xué)者2014-09-09js關(guān)閉瀏覽器窗口及檢查瀏覽器關(guān)閉事件
js關(guān)閉瀏覽器窗口,不彈出提示框。支持ie6+,火狐,谷歌等瀏覽器,下面以一個示例為大家詳細介紹下具體的實現(xiàn)方法,感興趣的朋友可以參考下2013-09-09