HTML中TDC(Tabular Data Control)显示数据

    今天在CSDN论坛了帮人解决一个JS问题的同时发现IE里竟然嵌入了一个TDC ActiveX,使得html下能够设置Table的数据源动态加载数据。

 

    我把那段代码引用进来,或许以后我也能用到:

 

   HTML:

  1. <?xml version="1.0" encoding="utf-8" ?> 
  2. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
  3. <html> 
  4. <head> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6.     <title>放大镜 </title> 
  7. </head> 
  8. <body> 
  9.     <div id="main" style="visiblity: visible"> 
  10.         <input id="text" type="text" size=32 value="" /> 
  11.         <input type="button" value="click" onclick="show()" /> 
  12.     </div> 
  13.     
  14.     <div id="data" style="position:absolute; border:1pt solid blue; padding:5px; z-index:100; left:50px; top:50px; display:none;"> 
  15.             <!-- 相当于 
  16.             border-top:1pt solid blue; 
  17.             border-bottom:1pt solid blue; 
  18.             border-left:1pt solid blue; 
  19.             border-right:1pt solid blue; 
  20.             --> 
  21.             拖动此处移动层 
  22.             <OBJECT ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" BORDER="0" WIDTH="0" HEIGHT="0"> 
  23.                 <PARAM NAME="DataURL" value="data2.txt"> 
  24.                 <PARAM NAME="UseHeader" VALUE="True"> 
  25.             </OBJECT> 
  26.             <form id="form1"> 
  27.                 <table id="outer_table" border=3 bordercolor="yellow" bgcolor="#green"> 
  28.                     <tr> 
  29.                         <td> 
  30.                             <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="5" bordercolor="blue"> 
  31.                                 <thead> 
  32.                                     <tr> 
  33.                                         <td> </td>
  34.                                         <td>公司名称 </td> 
  35.                                         <td>联系人姓名 </td> 
  36.                                     </tr> 
  37.                                 </thead> 
  38.                                 <tbody> 
  39.                                     <tr height=25px valign="middle"> 
  40.                                         <td width="70"> 
  41.                                                 <label> <input id="radio" type="radio" name="radio" /> </label> 
  42.                                                 <!-- input的check属性 checked="checked" --> 
  43.                                         </td> 
  44.                                         <td width="110"> 
  45.                                                 <div DATAFLD="公司名称"> 
  46.                                         </td> 
  47.                                         <td width="70"> 
  48.                                             <div DATAFLD="联系人姓名"> 
  49.                                         </td> 
  50.                                     </tr> 
  51.                                 </tbody> 
  52.                             </table> 
  53.                             <table align="center" border=2> 
  54.                                 <tr> 
  55.                                     <td align="center"> 
  56.                                             <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
  57.                                             <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()"> 
  58.                                             <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
  59.                                             <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()"> 
  60.                                     </td> 
  61.                                 </tr> 
  62.                                 
  63.                                 <tr> 
  64.                                     <td align="center"> 
  65.                                         <input type="button" value=" 确认 " onclick="confirm()" /> 
  66.                                         <input type="button" value=" 取消 " onclick="hide()" /> 
  67.                                     </td> 
  68.                                 </tr> 
  69.                             </table> 
  70.                         </td> 
  71.                     </tr> 
  72.                 </table>  
  73.             </form> 
  74.         </div> 
  75.         
  76.         <!-- 下面是js --> 
  77.         <script language="JavaScript">  
  78.             dataobj=document.getElementById("data"); 
  79.             mainobj=document.getElementById("main"); 
  80.             document.onmousedown=initializedrag
  81.             document.onmouseup=new Function("dragapproved=false"); 
  82.             function initializedrag()
  83.             { 
  84.                 if(event.srcElement.id=="data")
  85.                 { 
  86.                     offsetx=event.clientX; 
  87.                     offsety=event.clientY; 
  88.                     tempx=parseInt(dataobj.style.left);  
  89.                     tempy=parseInt(dataobj.style.top); 
  90.                     dataobj.style.cursor="hand"
  91.                     dragapproved=true
  92.                     document.onmousemove=drag_drop
  93.                 } 
  94.             } 
  95.   
  96.             function drag_drop()
  97.             { 
  98.                 if(dragapproved)
  99.                 { 
  100.                     dataobj.style.left=tempx+event.clientX-offsetx; 
  101.                     dataobj.style.top=tempy+event.clientY-offsety; 
  102.                     return false; 
  103.                 }  
  104.             } 
  105.     
  106.             function show() 
  107.             { 
  108.                 mainobj.style.display="none"
  109.                 mainobj.style.visibility="hidden"
  110.                 dataobj.style.display="block"
  111.                 dataobj.style.visibility="visible"
  112.             } 
  113.             function hide() 
  114.             { 
  115.                 mainobj.style.visibility="visible"
  116.                 mainobj.style.display="block"
  117.                 dataobj.style.visibility="hidden"
  118.             } 
  119.             function goNextPage() 
  120.             { 
  121.                 myTable1.nextPage(); 
  122.             } 
  123.             function goPrePage() 
  124.             { 
  125.                 myTable1.previousPage(); 
  126.             } 
  127.             function goFirstPage() 
  128.             { 
  129.                 myTable1.firstPage(); 
  130.             } 
  131.             function goLastPage() 
  132.             { 
  133.                 myTable1.lastPage(); 
  134.             } 
  135.             function confirm() 
  136.             {  
  137.                 var myTable = document.getElementById( "myTable1" ) ;
  138.                 for( var r=0; r < myTable.rows.length; r++ )        
  139.                 {
  140.                     var curRow = myTable.rows[r]                    
  141.                     var arrRadios = curRow.getElementsByTagName( "INPUT" )
  142.                     for( var i=0; i< arrRadios.length; i++ )
  143.                     {
  144.                         if( arrRadios[i].type=="radio"&& arrRadios[i].checked )
  145.                         {
  146.                             var companyName = curRow.cells[1].firstChild.innerText;
  147.                             var contactName = curRow.cells[2].firstChild.innerText;
  148.                             
  149.                             document.getElementById( "text" ).value = companyName + "  --  " + contactName;
  150.                             hide();
  151.                             return;
  152.                         }
  153.                     }
  154.                 }
  155.                 alert("没有选中!");
  156.             }  
  157.             function save()
  158.             { 
  159.             } 
  160. </script> 
  161. </body> 
  162. </html> 

其中Data2.txt是一个存放数据的文本文件,内容大致如下:

  1. 1,公司名称,联系人姓名,联系人头衔,地址,城市,地区,邮政编码,电话,传真 
  2. 2,三力实业有限公司,刘小姐,销售代表,大崇明路50号,天津,华北,343567,(030)30074321,(030)30765452 
  3. 3,东少实业,王靓,经理,承德西路80号,天津,华北,234575,(030)35554729,(030)35553744 
  4. 4,行进贸易,王健华,销售经理,黄台北路780号,石家庄,华北,985060,(0321)5553932 
  5. 5,一一有限公司,方先生,销售代表,天府东街30号,深圳,华南,890879,(0571)45557788,(0571)45556750 

 

另外,找了一篇相关的介绍TDC的文章,《Using The Tabular Data Control in Internet Explorer》

你可能感兴趣的:(JavaScript,html,border,button,internet,encoding)