HTML中TDC（Tabular Data Control）显示数据_综合

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

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

HTML：

 
  <?xml version="1.0" encoding="utf-8" ?> 
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>放大镜 </title> 
</head> 
<body> 
    <div id="main" style="visiblity: visible"> 
        <input id="text" type="text" size=32 value="" /> 
        <input type="button" value="click" onclick="show()" /> 
    </div> 
    
    <div id="data" style="position:absolute; border:1pt solid blue; padding:5px; z-index:100; left:50px; top:50px; display:none;"> 
            <!-- 相当于 
            border-top:1pt solid blue; 
            border-bottom:1pt solid blue; 
            border-left:1pt solid blue; 
            border-right:1pt solid blue; 
            --> 
            拖动此处移动层 
            <OBJECT ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" BORDER="0" WIDTH="0" HEIGHT="0"> 
                <PARAM NAME="DataURL" value="data2.txt"> 
                <PARAM NAME="UseHeader" VALUE="True"> 
            </OBJECT> 
            <form id="form1"> 
                <table id="outer_table" border=3 bordercolor="yellow" bgcolor="#green"> 
                    <tr> 
                        <td> 
                            <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="5" bordercolor="blue"> 
                                <thead> 
                                    <tr> 
                                        <td> </td>
                                        <td>公司名称 </td> 
                                        <td>联系人姓名 </td> 
                                    </tr> 
                                </thead> 
                                <tbody> 
                                    <tr height=25px valign="middle"> 
                                        <td width="70"> 
                                                <label> <input id="radio" type="radio" name="radio" /> </label> 
                                                <!-- input的check属性 checked="checked" --> 
                                        </td> 
                                        <td width="110"> 
                                                <div DATAFLD="公司名称"> 
                                        </td> 
                                        <td width="70"> 
                                            <div DATAFLD="联系人姓名"> 
                                        </td> 
                                    </tr> 
                                </tbody> 
                            </table> 
                            <table align="center" border=2> 
                                <tr> 
                                    <td align="center"> 
                                            <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
                                            <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()"> 
                                            <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
                                            <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()"> 
                                    </td> 
                                </tr> 
                                
                                <tr> 
                                    <td align="center"> 
                                        <input type="button" value=" 确认 " onclick="confirm()" /> 
                                        <input type="button" value=" 取消 " onclick="hide()" /> 
                                    </td> 
                                </tr> 
                            </table> 
                        </td> 
                    </tr> 
                </table>  
            </form> 
        </div> 
        
        <!-- 下面是js --> 
        <script language="JavaScript">  
            dataobj=document.getElementById("data"); 
            mainobj=document.getElementById("main"); 
            document.onmousedown=initializedrag; 
            document.onmouseup=new Function("dragapproved=false"); 
            function initializedrag()
            { 
                if(event.srcElement.id=="data")
                { 
                    offsetx=event.clientX; 
                    offsety=event.clientY; 
                    tempx=parseInt(dataobj.style.left);  
                    tempy=parseInt(dataobj.style.top); 
                    dataobj.style.cursor="hand"; 
                    dragapproved=true; 
                    document.onmousemove=drag_drop; 
                } 
            } 
  
            function drag_drop()
            { 
                if(dragapproved)
                { 
                    dataobj.style.left=tempx+event.clientX-offsetx; 
                    dataobj.style.top=tempy+event.clientY-offsety; 
                    return false; 
                }  
            } 
    
            function show() 
            { 
                mainobj.style.display="none"; 
                mainobj.style.visibility="hidden"; 
                dataobj.style.display="block"; 
                dataobj.style.visibility="visible"; 
            } 
            function hide() 
            { 
                mainobj.style.visibility="visible"; 
                mainobj.style.display="block"; 
                dataobj.style.visibility="hidden"; 
            } 
            function goNextPage() 
            { 
                myTable1.nextPage(); 
            } 
            function goPrePage() 
            { 
                myTable1.previousPage(); 
            } 
            function goFirstPage() 
            { 
                myTable1.firstPage(); 
            } 
            function goLastPage() 
            { 
                myTable1.lastPage(); 
            } 
            function confirm() 
            {  
                var myTable = document.getElementById( "myTable1" ) ;
                for( var r=0; r < myTable.rows.length; r++ )        
                {
    
                    var curRow = myTable.rows[r]                    
                    var arrRadios = curRow.getElementsByTagName( "INPUT" )
                    for( var i=0; i< arrRadios.length; i++ )
                    {
    
                        if( arrRadios[i].type=="radio"&& arrRadios[i].checked )
                        {
    
                            var companyName = curRow.cells[1].firstChild.innerText;
                            var contactName = curRow.cells[2].firstChild.innerText;
                            
                            document.getElementById( "text" ).value = companyName + "  --  " + contactName;
                            hide();
                            return;
                        }
                    }
                }
                alert("没有选中！");
            }  
            function save()
            { 
            } 
</script> 
</body> 
</html> 
 
 

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

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

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