JS 动态创建Table,Tr,Td并赋值的简单示例

前端之家收集整理的这篇文章主要介绍了JS 动态创建Table,Tr,Td并赋值的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
修改
要求主题列表随成果类型改变而改变
网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table
JS部分: 经测试代码如下:
  1. /**
  2. * 动态创建Table,Tr,Td并赋值
  3. *
  4. * @param
  5. * @arrange (512.笔记) jb51.cc
  6. **/
  7. //动态获取主题数据
  8. function getzts(){
  9. parentId = document.getElementById("bselect1").value;
  10. if(parentId!=""){
  11. dwrMethod.getZtList(parentId,callback5);
  12. }else{
  13. //清空主题Table的数据
  14. var t=document.getElementById("zhutiTable"); //获取Table
  15. var length= t.rows.length; //获得Table下的行数
  16. if(length!=0){ //如果有行,则清空
  17. for(var i=length-1;i>=0;i--)
  18. {
  19. t.deleteRow(i);
  20. }
  21. }
  22. var r = t.insertRow();
  23. var c = r.insertCell();
  24. c.innerHTML="暂无主题列表";
  25. document.getElementById('zhutiTable').appendChild(t);
  26. }
  27. }
  28. function callback5(provinces){
  29. var t=document.getElementById("zhutiTable"); //获取Table
  30. var length= t.rows.length; //获得Table下的行数
  31. if(length!=0){ //如果有行,则清空
  32. for(var i=length-1;i>=0;i--)
  33. {
  34. t.deleteRow(i);
  35. }
  36. }
  37. if(provinces.length>0){
  38. for (var i = 0; i < provinces.length; i++) {
  39. //tr
  40. if(i%4==0){
  41. var r = t.insertRow(t.rows.length);//创建新的行
  42. }
  43. //td
  44. var c = r.insertCell(); //创建新的列
  45. c.innerHTML = "<input type='checkBox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1];
  46. }
  47. }else{
  48. var r = t.insertRow();
  49. var c = r.insertCell();
  50. c.innerHTML="暂无主题列表";
  51. }
  52. document.getElementById('zhutiTable').appendChild(t);
  53. }


html部分: 经测试代码如下:
  1. <tr>
  2. <td class="add_tit">成果类型</td>
  3. <td>
  4. <s:select id="bselect1" name="pruType1" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="-- 请选择 --" />
  5. <label class="note4">*</label>
  6. </td>
  7. </tr>
  8. [html]
  9. <tr>
  10. <td class="add_tit">主题</td>
  11. <td id="table1" style="padding-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;">
  12. <table id="zhutiTable" border="0" cellpadding="0" cellspacing="0" width=100% class="table_table">
  13. <tr>
  14. <td style="color: red;">注:请先选择成果类型</td>
  15. </tr>
  16. </table>
  17. </td>
  18. </tr>

猜你在找的JavaScript相关文章