js与页面InnerHTML用法

最新推荐文章于 2022-07-25 23:30:05 发布

djddup_0508_cn

最新推荐文章于 2022-07-25 23:30:05 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/djddup_0508_cn/article/details/84341096

Web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格操作方法，包括初始化表格、插入表头与数据行、根据搜索结果动态更新表格内容等功能。通过具体示例展示了如何创建表头、插入带有复选框的数据行，并在获取到数据后更新表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script lanager="javascript">
/**
* 设置checkBox选择状态
*/
function checkAll(checked,selName){
   var selOper = document.getElementsByName(selName);
   var len = selOper.length;
   for(var i=0; i<len;i++)
   {
     if(checked==true)
     {
        selOper[i].checked = true;
     }else{
       selOper[i].checked = false;
     }
   }
}

function insertTabRow(){
   var tab=document.getElementById("ctrltab");
   var tbody=tab.tBodies.item(0);
   var rowsLen = tbody.rows.length;
   if(rowsLen>0){
      for(var i=rowsLen-1;i>=0;i--){
         tbody.deleteRow(i);//删除行
      }
   }
var trobjTitle=tbody.insertRow(tbody.rows.length);
trobjTitle.className="";
var oTCellT=trobjTitle.insertCell(0);
oTCellT.innerHTML="<input type=checkbox   name='chkAll' onClick=checkAll(this.checked,'chkIds') checked class='radio'>";
var trobj=tbody.insertRow(tbody.rows.length);
var oTCell=trobj.insertCell(0);
oTCell.className = "";
oTCell.innerHTML="<input type=checkbox name='chkIds' value='001' checked class='radio'>";
}

function doSearch(){
DataManager.getCtrlFiles(sbrq,bwlx,callbackMethod)
}

function callbackMethod(data){
   var tab=document.getElementById("ctrltab");
   var tbody=tab.tBodies.item(0);
   var rowsLen = tbody.rows.length;
   if(rowsLen>0){
      for(var i=rowsLen-1;i>=0;i--){
         tbody.deleteRow(i);
      }
   }
    var trobjTitle=tbody.insertRow(tbody.rows.length);
    trobjTitle.className="ListTdSeq";
    var oTCellT=trobjTitle.insertCell(0);
    oTCellT.innerHTML="<lable>全选</lable><input type=checkbox   name='chkAll' onClick=checkAll(this.checked,'chkIds') checked class='radio'>";
    oTCellT=trobjTitle.insertCell(1);
    oTCellT.innerHTML="名称";
    oTCellT=trobjTitle.insertCell(2);
    oTCellT.innerHTML="类型";
    var k=1;
    if(data!=''){
       for(var property in data){
          if(data[property].wjbs!=null && data[property].apptype!='')
          {
              var wjbs = data[property].wjbs;
              var apptype = data[property].apptype;
              var trobj=tbody.insertRow(tbody.rows.length);
              if(k%2){
                  trobj.className="ListTrJi";
              }else{
                 trobj.className="ListTrOu";
              }
              var oTCell=trobj.insertCell(0);
              oTCell.className = "ListTdSeq";
              oTCell.innerHTML="<input type=checkbox name='chkIds' value='"+wjbs+"' checked class='radio'>";
              oTCell=trobj.insertCell(1);
              oTCell.innerHTML="<img src='/BankCapitalWeb/includes/images/folder.gif' border='0' align='AbsBottom'> <lable name='wjbs'>"+wjbs+"</lable>";
              oTCell=trobj.insertCell(2);
              oTCell.innerHTML="<lable name='apptype'>"+apptype+"</lable>";
          }
          k++;
      }
    }else if(data==''){
       var trobj=tbody.insertRow(tbody.rows.length);
       trobj.className="NoResultTr";
       var oTCell=trobj.insertCell(0);
       oTCell.className = "NoResultTd";
       oTCell.colSpan = "3";
       oTCell.innerHTML="<bean:message key='prompt.noresult'/>";
    }
}

</script>
<body>
<table id="ctrltab" border=0 cellspacing=1 cellpadding=2 width="80%">
</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。