根据页面元素的自定义属性对页面进行功能渲染，哪位大侠帮忙看看怎么搞

页面上初始的时候有这么一段html代码，如下所示        <tr>
            <td>自我简介</td>
            <td><textarea rows="4" cols="50" name="自我简介"></textarea></td>
        </tr>
        <tr>
            <td>当前日期</td>
            <td><input fieldtype="SYS_DATE" name="当前日期" value="{宏控件}" type="text" /></td>
        </tr>
        <tr>
            <td>所属部门</td>
            <td><select fieldtype="LIST_DEPARTMENT" style="width: 155px" name="所属部门">
            <option selected="selected">{宏控件}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
            </select></td>
        </tr>我现在希望的效果是，当我页面加载完的时候根据元素的fieldtype属性来给其指定不同的功能，比如当前日期，本身只是一个input框，当加上fieldtype="sys_date"这个自定义属性之后，当页面渲染完毕的时候，点击它，就会弹出个日期选择控件，相当于是调用了onclick="Calendar(this)"，后面的方法已经写好了，只是不知道页面在加载时如何渲染，让其具备这个功能。
还有下面的一个select框，我希望是根据fieldtype属性，自动填充option列表键值对。
页面元素中不是每个都有fieldtype属性，如果没有，则不做任何操作。敢问各位大侠，怎么用js实现这种功能...

解决方案 »

  1.   


    <table id="otable">
    <tr>
    <td>自我简介</td>
    <td><textarea rows="4" cols="50" name="自我简介"></textarea></td>
    </tr>
    <tr>
    <td>当前日期</td>
    <td><input fieldtype="SYS_DATE" name="当前日期" value="{宏控件}" type="text" /></td>
    </tr>
    <tr>
    <td>所属部门</td>
    <td><select fieldtype="LIST_DEPARTMENT" style="width: 155px" name="所属部门">
    <option selected="selected">{宏控件}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
    </select></td>
    </tr>
    </table>
    <script type="text/javascript">
    <!--
    var bindCalendar = function(){
    alert("bindCalendar");
    } var initOption = function(){
    alert("initOption");
    }
    var getType = function(){
    var otbl = document.getElementById('otable');
    var orows = otbl.rows;
    for(var i = 0; i < orows.length; i++){
    var ocells = orows[i].cells[1].childNodes[0];
    if(ocells.getAttribute("fieldtype") != null){
    switch(ocells.getAttribute("fieldtype")){
    case "SYS_DATE":
    ocells.onclick = bindCalendar;
    break;
    case "LIST_DEPARTMENT":
    initOption();
    break;
    default:
    alert("please define the type");
    }
    } }
    }
    window.onload = function(){
    getType();
    }
    //-->
    </script>
      

  2.   

    刚刚做完,却发现已经有例子了...
    不管了,还是发出来瞅瞅
    <html>
    <head>
    <script>function CallInput(ctype,fieldtype){
    var list = document.getElementsByTagName("input");
    for(var i=0;i<list.length;i++){
    //判断是是否是textbox 
    if(list[i].type==ctype&&list[i].fieldtype==fieldtype) {
    list[i].onclick = Show;
    }
    }
    }
    function CallSelect(fieldtype){
    var list = document.getElementsByTagName("select");
    for(var i=0;i<list.length;i++){
    if(list[i].fieldtype==fieldtype)
    for(var j=0;j<5;j++){
    list[i].options.add(new Option(j.toString(),j.toString()));
    }
    }
    }
    function Show(){
    //做你想做的事情
    alert(this.value);
    }
    function init(){
    CallInput("text","aa");
    CallSelect("LIST_DEPARTMENT");
    }
    </script></head>
    <body onload = "init()">
    <input id="asd" type="text" fieldtype="aa"/>
    <input id="v12" type="text" fieldtype="bb"/>
    <input id="as3d" type="text" check="true"/>
    <input id="d412" type="text"/>
    <input id="s12" type="text"/>
    <hr/>
    <select fieldtype="LIST_DEPARTMENT" style="width: 155px" name="所属部门"></select>

    <select  style="width: 155px" name="所属部门"></select>
    </body>
    <html>