js 动态table

最新推荐文章于 2024-06-28 15:04:44 发布
最新推荐文章于 2024-06-28 15:04:44 发布
阅读量488 收藏
点赞数
分类专栏： js 文章标签： table button class function input div
<html>
<head>
<title>add</title> 
<script>
<!--
var ListUtil = new Object(); 
ListUtil.add = function(oListbox,sName,sValue)
{
 var oOption = document.createElement("option");
 oOption.appendChild(document.createTextNode(sName)); 
 if(arguments.length == 3)
 {
  oOption.setAttribute("value",sValue);
 }
 oListbox.appendChild(oOption);
}


ListUtil.remove = function(oListbox,iIndex)
{
 oListbox.remove(iIndex);
}


ListUtil.clear = function(oListbox)
{
 for(var i = oListbox.options.length - 1; i>=0;i--)
 oListbox.remove(oListbox,i);  
}


function listRecordTime(timeData,type)// rcv a parameter ok 
{
 var first;
 var divs;
 
 if(type==1)
 {
   var oListbox = document.getElementById("avitable");
  ListUtil.add(oListbox,timeData,timeData);
 }
 else
 {
  var oListbox = document.getElementById("avListEnd");
  var oListbox2 = document.getElementById("avListStart"); 
  var obgDiv = document.getElementById("page");
  var tem = new Array();
  var tem2 = new Array();
  var first = new Array();
  
  first = timeData.split("|");
  var totallist=first[0];
  var currentpage=first[1]; 
  var globalPara2=first[2];
  
  //alert(timeData);
  if ((divs=(2*20)%totallist) > 0)
  {
   totalpages = totallist/(2*20); 
   //alert(totalpages);
  } 
  tem = globalPara2.split(";");
  
  ListUtil.clear(oListbox);
  ListUtil.clear(oListbox2);
  
  for(var j= 0; j< tem.length; j++)
  {
   tem2 = tem[j].split(",");
   for(var i= 0; i<tem2.length;i++)
   {
    if(i%2==0)
     ListUtil.add(oListbox2,tem2[i],tem2[i]);
    else    
     ListUtil.add(oListbox,tem2[i],tem2[i]);
   }  
  }
  var inHtml = genaratePageDiv(currentpage, totalpages);
  obgDiv.innerHTML=inHtml;  
  obgDiv.style.display="";  
  if (totalpages == 0)
  {
   document.getElementById("pre").disabled = true;
   document.getElementById("next").disabled = true;
  }
  if(currentpage==1)
   document.getElementById("pre").disabled = true;
  
  if(Math.ceil(totallist/eachpage)==currentpage)  
   document.getElementById("next").disabled = true;
  
  document.getElementById("record_button").style.display = "inline"; 
  } 
}


function genaratePageDiv(current, totalpages)
{
 var inHtml = "";  
 inHtml +="<input type='button' name='pre' value='prevpage' onClick='dividePage(("+current+"-1),"+eachpage+")'>&nbsp;&nbsp;"; 
 inHtml +="<input type='button' name='next' value='nextpage' onClick='dividePage(("+current+"+1),"+eachpage+")'>&nbsp;&nbsp;"; 
 inHtml +="<input type='button' name='clean' value='clear all' onClick='jsCtrlDevice(6,\"\")'>"; 
 return inHtml;


}


function dividePage(current,page)
{
 alert(current);
 alert(page);
 var timeData = Player.GetDeviceRecordList(current,page);
 listRecordTime(timeData,2);
 //listRecordTime("20|3|2005-09-19 12:56,2006-08-12 05:13");
}


function hiddenDiv(div_id){
   var obgDiv = document.getElementById(div_id);
   obgDiv.style.display="none";
}


var indx=0; 


function addTabRow(){    
 var schedule_tab = document.getElementById("mybody");    
 var schedule_tr = schedule_tab.insertRow();    
 schedule_tr.setAttribute("id","tr"+indx);   
  var scheduletd_1=schedule_tr.insertCell();    
  var scheduletd_2=schedule_tr.insertCell();    
  var scheduletd_3=schedule_tr.insertCell(); 
  var scheduletd_4=schedule_tr.insertCell();    
  var scheduletd_5=schedule_tr.insertCell(); 
  var scheduletd_6=schedule_tr.insertCell();     
 
   scheduletd_1.innerHTML=indx;    
   scheduletd_2.innerHTML="<input type='type' name='time"+indx+"' size='4' value=''/>";  
   scheduletd_3.innerHTML="<input type='radio' name='type"+indx+"' value='1' checked/>off_all<input type='radio' name='type"+indx+"' value='2'/>on_all<input type='radio' name='type"+indx+"' value='3'/>Shedule"; 
   indx+=1;   
   scheduletd_4.innerHTML=indx;    
   scheduletd_5.innerHTML="<input type='type' name='time"+indx+"' size='4' value='' />";  
   scheduletd_6.innerHTML="<input type='radio' name='type"+indx+"' value='1' checked/>off_all<input type='radio' name='type"+indx+"' value='2'/>on_all<input type='radio' name='type"+indx+"' value='3'/>Shedule";  
   indx+=1; 
 }    
   
function delTabRow(j){    
 var schedule_tab = document.getElementById("mybody");    
 var tabrow = document.getElementById("tr"+j);    
  schedule_tab.deleteRow(tabrow.rowIndex-1);    
 }   


function delAllTabRow(){    
 var schedule_tab = document.getElementById("mybody");    
 var rowlen=schedule_tab.rows.length;    
 for(var i=rowlen-1;i>=0;i--){    
   schedule_tab.deleteRow(i);    
  }
  indx = 0;    
 }   


// -->
</script>


</head>
<body bgcolor="white" leftmargin="15" topmargin="20"  onLoad="onLoad()" marginwidth="0" marginheight="0" class="bodyBg">


<form name="aviList">
 <input type="hidden" name="avi" value="">
</form>
<div id="gif" style="position:absolute; display:none; background:url(loading_32x32.gif) no-repeat; left: 50%; width: 100%; height: 100%"></div>
<div>
 <div>
 
 <form name="remote_playbk" id="1">
 <table>
   <tr valign=""><td class="subTitle" align="left" colspan="3"><u><h3><b>Remote AVI File List<br><br></b></h3></u></td></tr>
      <tr>
     <td valign="top">
   <div id="avi_download_table">     
    &nbsp;<span class="fixedTitle"><b><script>writeList(0,true);</script></b></span><br>
    <span class="fixed"><select class="fixed" style="width:310px" size="17" name="avitable" multiple οndblclick="ButtonPlay_onclick(this.value);">
    <script>writeList(0,false);</script></select></span>
    </div>
      <div id="div_time">
     <table>
    <tr>
     <td>
     <div>
      <span class="fixedTitle"><b><script>writeList(1,true);</script></b></span><br>
      <span class="fixed"><select class="fixed" style="width:150px" size="16" name="avListStart" multiple οndblclick="txTimeValue(this.value,1);">
      <script>writeList(1,false);</script></select></span>
     </div>
     </td>
     <td>
     <div>
      <span class="fixedTitle"><b><script>writeList(2,true);</script></b></span><br>
      <span class="fixed"><select class="fixed" style="width:150px" size="16" name="avListEnd" multiple οndblclick="txTimeValue(this.value,2);">
      <script>writeList(1,false);</script></select></span>
     </div>
     </td>
    </tr>
    <tr>
      <td align="left" nowrap colspan="3">
      <div id="page"></div> 
      </td>
      </tr>
     </table>   
    </div>
    </td>
    <td colspan="2" valign="top">
    <div>
     <table>
    <tr>
     <td> <div>
      <OBJECT classid="CLSID:e62d1a95-8299-4b94-85d0-731dc125a60d" 
       CODEBASE = "/ocx/IMMP4.cab#Version=1,0,0,0" width=352 height=288 align="middle" BORDER="0" id="Player2" >
        <PARAM NAME="AutoPlay" VALUE="0">
        <PARAM NAME="DisplayRate" VALUE="0">
        <PARAM NAME="Source" VALUE="">
        <FONT COLOR=red SIZE=5> Can't find object</FONT>
      </OBJECT>
       </div>
      </td>
     <td></td>
    </tr>
   </table>
      <div>
              <table>
                <tr>
                  <td width="352">  
         <p>
       <h3>Select a interval time that you want to download these videos recorded between it.</h3></p>
                        <input type="text" name="time_start" size="15">
                      &nbsp;Double click the start time listed.<br/>
                      <br/>
                     <!-- <input name="time_end" type="text" size="15">
                      &nbsp;Double click the end time listed..
       <br/>
       <br/>    -->     </td>
                </tr>
                <tr>
                  <td><input name="record_button" type="button" width="100" onClick='JavaScript:jsCtrlDevice(7,"")' value="Get record clip"></td>
                </tr>
     <tr>
                  <td height="20"></td>
                </tr>
    <td align="left" nowrap colspan="3">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
     <!--<td class="button"><input name="button2" type="button"  class="btnNormal" onClick='JavaScript:jsCtrlDevice(4,"")' value="record_schedule" width="75"></td>-->   
     <td class="button"><input type="button" name="tmlst" value="Get time list" width="100" class="btnNormal" onClick='jsCtrlDevice(5,"")'><br/></td>
     <td></td>
     <td></td>           
     </tr>
     <tr>
      <td colspan="3">
       <div id="record_type_hid" style="display:none">
        <table>
         <tr>
          <td colspan="3" height="10"></td>
         </tr>
         <tr>
          <td colspan="3"><h3>Set the record type.</h3></td>
         </tr>
         <tr>   
          <td class="oddItem" height="10" colspan="3">   
          off_all<input type="radio" name="record_type" value="1" checked="checked">
          on_all<input type="radio" name="record_type" value="2"  >
          on_schedule<input type="radio" name="record_type" value="3" >
          <input type="button" value="record type" width="75" class="btnNormal" onClick='JavaScript:jsCtrlDevice(1,"")'>          </td>
         </tr>
        </table>
       </div>      </td>
     </tr>   
    </table>    </td>
              </table>
       </div>
    </div>    
  </td>
     </tr>
 </table>
 </form>
 </div>
 <div>
 <input type="button" value="Add" onClick="addTabRow();"><input type="button" value="Del all" onClick="delAllTabRow();">   
        <table border="1">   
            <thead>   
                <tr>   
                    <td align="center" width="25"> Hour</td>   
                    <td align="center" width="25">Time</td>   
                    <td align="center" width="100">Record Type</td>
     <td align="center" width="25"> Hour</td>   
                    <td align="center" width="25">Time</td>   
                    <td align="center" width="100">Record Type</td>
                </tr>   
            </thead>   
            <tbody id="mybody"> 
            </tbody>
   <tr>   
                   <td align="center" width="25" colspan="6"><input type="button" name="schedule" value="schedule"/></td>
   </tr>   
        </table> 
 </div>
  </div>
  <div id="div_table" class="class_title" style="display:none" ondbClick='hiddenDiv("div_table")'>  
  </div>
</div> 
<OBJECT id="Player" width="0" height="0" BORDER=0 classid="CLSID:e62d1a95-8299-4b94-85d0-731dc125a60d">
</OBJECT>  
</body>
</html>
zhanghgsr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
js动态创建Table
06-26
利用纯javascript来实现的动态表格！！！超级实用知识点大概包括，jq、基本dom的获取、创建节点、innerHTML添加内容、js给标签创建属性、动态在表格中添加按钮。
js对table的动态操作
weixin_33806914的博客
03-22 185
一、js动态生成、删除tr 在页面的操作中，我们往往会对table进行操作，例如增加一行，删除一行。查过好多资料，有好多方法。在具体实践中，我所涉及的需求是： 通过对js方法add（）传参数，然后把参数按照顺序分别具体的自动添加在所tr上，然后点击tr的“删除”button来出发moveTr()对这一行进行删除操作。 具体代码如下，仅供参考： //增加table中的“tr”，并给“td”赋...
前端JS 创建动态Table表格
最新发布
qq_48765361的博客
06-28 269
前端JS 创建动态Table表格
js动态操作table
weixin_39080038的博客
02-24 238
在项目中遇到对table中的数据进行动态调整，弹框修改/新增，并对选定某行移动且实时显示，所以对js进行二次探索，需引入jqurey.js、弹框使用layer.js就ok了 js代码如下: function add_line(key,value) { // var key = prompt('请输入列表后台value值，并确认'); //var ...
javascript 动态table添加colspan\rowspan 参数的方法
12-01
解决方法：取得表对象，并取得他下面对应的行对象下的某个元素，这里如document.tableId.rows[i].cells[j]即取得表下第i行下的第j个元素，然后document.tableId.rows[i].cells[j].colspan=n即可。 eg: dempTHFirst为...
js动态控制table的tr、td增加及删除的具体实现
12-12
html： 代码如下: <table id=’wifi_clients_table’ xss=removed class=”table> <thead> ”success”> 序号</th> 机器名</th> <th>IP地址</th> <th>MAC地址</th> 上行/下行速率</th> </tr> </thead>...</table> js：
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
JS动态创建Table,Tr,Td并赋值的具体实现
10-27
文档展示了通过JavaScript函数getzts()和callback5()来动态生成表格（Table），以及表格的行（Tr）和单元格（Td）。利用DOM操作方法如insertRow()和insertCell()，可以根据条件创建新的行和列，为表格添加新的数据项...
js动态生成html表格,JS动态添加table表格元素
weixin_42122988的博客
06-10 249
// Last updated 2006-02-21function addRowToTable(){var tbl = document.getElementById('tblSample');var lastRow = tbl.rows.length;// if there's no header row in the t...
JS 动态增加table
09-19
动态的增加JSP页面的table,此代码可以动态增加此页面同类型的table
js动态 在table任一位置加减行
zling工作室
09-08 834
最近在开发项目的过程中，需要用到js动态添加删除行列，而且不单是要在最后加，而且要在任意位置加。         花了一个上午，找了不少资料，搞了一个小例子，在此分享给大家， 小例子放在我的资源里面，希望能帮到有需要的人。
JavaScript动态创建table表格
weixin_54366356的博客
06-08 2005
平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐… 使用如下方法，直接调用即可生成table <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
浅谈js中如何动态添加表头/表列/表格内容
sxs161028的博客
07-04 8063
浅谈js中如何动态添加表头/表列/表格内容我想很多童鞋用js动态向表格中添加数据很熟悉，而且也觉得非常简单！是的，对于写页面的童鞋来说，最喜欢写查询的页面了，动态向表格绑定数据。用for循环就可以轻松搞定。 如果我们的业务需求有所变化，可能我们要的数据就不是这样一条一条的中规中矩的。如果你还是新手，又没有人教你，在网上又搜不到方法，可以告诉你一个简便的方法，那就是让后台写服务的同事在后台把数
js动态创建table、读取table
weixin_39418164的博客
04-17 3376
创建：                                        var mytable = document.getElementById("mytable"); var mytr = ""; for(var i=0;i&lt;data.length;i++){ var tr = document.createElement("tr"); ...
HTML通过使用JS动态显示table内容
weixin_30916125的博客
06-18 336
HTML： <table border="1" id="tb"> 　　 <thead> 　　　　<caption>历史知识点对比</caption> 　　　　<tr> 　　　　　　<th rowspan="2">知识点</th> 　　　　　　<th rowspan="2">全校得分率&l...
js动态生成table 经典
热门推荐
wearegouest的专栏
01-24 3万+
<br /><script language="javascript" type="text/javascript"> <br /> function createTable(){ <br /><br />     var div = document.getElementById("dd"); <br />     var table = document.createElement("table");//创建table <br />     var row = table.insertRow();//创
js 动态创建table
05-09
可以通过以下代码动态创建一个 table 元素： ```javascript // 创建 table 元素 var table = document.createElement('table'); // 创建表头 var thead = document.createElement('thead'); var tr = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值