动态创建HTML内容

动态表格生成器

     <HTML>
     <HEAD>
     <META      NAME="GENERATOR"      Content="Microsoft      Visual      Studio      6.0">
     <TITLE></TITLE>
     <SCRIPT      ID=clientEventHandlersJS      LANGUAGE=JScript>
     
     </SCRIPT>
     <SCRIPT      LANGUAGE=JScript      FOR=document      EVENT=oncontextmenu>
     
     </SCRIPT>
     </HEAD>
     <LINK      href=""      rel=stylesheet      type=text/css>
     <SCRIPT      LANGUAGE=JScript>
     
     </SCRIPT>
     <BODY>
     <TABLE      cellSpacing=1      cellPadding=1      width="100%"      border=0      Height="100%">
         <TR      Height="1%">
             <TD></TD>
             <TD      align=middle><FONT      face=黑体
                 size=5><STRONG>动态表格生成器</STRONG></FONT></TD>
             <TD></TD>
             </TR></TR>
         <TR      Height="50%">
             <TD></TD>
             <TD      align=middle><DIV      ID=BASE> </DIV></TD>
             <TD></TD></TR>
         <TR      Height="49%">
             <TD></TD>
             <TD      align=middle><DIV      ID=INPUT></DIV></TD>
             <TD></TD></TR>
         <TR      Height="1%">
             <TD></TD>
             <TD      align=middle><INPUT      type="button"      value="增加行"      OnClick="AddH(1)"><INPUT      type="button"      value="减少行"      OnClick="AddH(-1)">      <INPUT      type="button"      value="                    提交                    "      OnClick="Ok()">      <INPUT      type="button"      value="增加列"      OnClick="AddW(1)"><INPUT      type="button"      value="减少列"      OnClick="AddW(-1)"></TD>
             <TD></TD>
             </TR></TR>
     </TABLE>        </BODY>
     <SCRIPT      LANGUAGE=JScript>
     
     </SCRIPT>
     </HTML>

/t/20060320/13/

第二种方法：

<form     name="form1"     method="post"     action="">
        <input     type="button"     name="Submit"     value="-"       οnclick="deleteRow()">
        <input     name="num"     type="text"     value="3"     size="4"     maxlength="4">
        <input     type="button"     name="Submit2"     value="+"     οnclick="insertRow()">
        <br>
        <table          width="500"     border="0"     cellspacing="0"     cellpadding="0">
            <tr>
                <td     width="87"><select     name="select"></select></td>
                <td     width="277"><input     type="text"     name="textfield1"></td>
                <td     width="136"><input     type="button"     name="1"     value="1"></td>
            </tr>
            <tr>
                <td><select     name="select2"></select></td>
                <td><input     type="text"     name="textfield2"></td>
                <td><input     type="button"     name="2"     value="2"></td>
            </tr>
            <tr>
                <td><select     name="select3"></select></td>
                <td><input     type="text"     name="textfield3"></td>
                <td><input     type="button"     name="3"     value="3"></td>
            </tr>
        </table>
    </form>
    <script     language=javascript>
    function     deleteRow()
    {
    var     obj=("table1")
    var     rowIndex=[0].;
    if(rowIndex>3)
    {
    ("num").value=("num").value-parseInt(1)
    (rowIndex-parseInt(1));
    }
    }
    function     insertRow()
    {
    var     obj=("table1")
    var     rowIndex=[0].;
    var     objTR=(rowIndex);
    var     objTD1=();
    var     objTD2=();
    var     objTD3=();
    rowIndex2=parseInt(rowIndex)+parseInt(1)
    =[0].childNodes[rowIndex-1].childNodes[0].(/(name=)(/")*(select)(/d)(/2)/gi,"$1$2$3"+rowIndex2+"$5")
    =[0].childNodes[rowIndex-1].childNodes[1].(/(name=)(/")*(textfield)(/d)(/2)/gi,"$1$2$3"+rowIndex2+"$5")
    =[0].childNodes[rowIndex-1].childNodes[2].(/(=)(/")*(/d)(/2)/gi,"$1$2"+rowIndex2+"$4")
    ("num").value=parseInt(("num").value)+parseInt(1)
    }
    </script>

1，动态删除Table     里面内容技巧，不需要写太多代码，一行：
    (true)

    2,动态增加行,除了CreateElement方法，还可以这样比较短小：

    <table     id=tb1></table>
    <SCRIPT>
    function     addTable(){
          var     row1     =     ();
          var     cell1=();
          var     cell2=();
          ="灰豆宝宝";
          ="超级大笨狼"
    }
    </SCRIPT>
    <INPUT     TYPE     =     "button"     VALUE     =     "AddTable"     onclick     =     "addTable()">

    3，在DIV中动态增加Table

    <SCRIPT>
    function     addTable(){
          var     tb1     =     ("table");
          ="1px";
          var     row1     =     ();
          var     cell1=();
          var     cell2=();
          (tb1);
          ="wanghr100";
          ="panyuguang962"
    }
    </SCRIPT>
    <BODY>
    <div     id=mydiv     style="width:400;height:300;"></div>
    <INPUT     TYPE     =     "button"     VALUE     =     "AddTable"     onclick     =     "addTable()">

    4,在DIV中删除Table，简单只要=""就可以。

    以上是部分实用相对短小的代码，当然有其他各种办法实现，不过一般都比上面的长，比如组合使用DIV对象的insertAdjacentHTML     方法等，在不同需要下使用不同方法，前提是研究好浏览器模型     的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。

    以下是以Document对象为例，相关方法有：

    Method     Description
    attachEvent
    createAttribute
    createComment
    createDocumentFragment
    createElement
    createEventObject
    createStyleSheet
    createTextNode
    detachEvent
    getElementById
    getElementsByName
    getElementsByTagName
    mergeAttributes
    recalc
    write
    writeln
    以DIV对象为例相关方法有：
    addBehavior
    appendChild
    applyElement
    attachEvent
    clearAttributes
    cloneNode
    contains
    detachEvent
    getAdjacentText
    getAttribute
    getAttributeNode
    getElementsByTagName
    hasChildNodes
    insertAdjacentElement
    insertAdjacentHTML
    insertAdjacentText
    insertBefore
    mergeAttributes
    normalize
    removeAttribute
    removeAttributeNode
    removeBehavior
    removeChild
    removeExpression
    removeNode
    replaceAdjacentText
    replaceChild
    replaceNode
    setActive
    setAttribute
    setAttributeNode
    setExpression
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

现在进入实际的操作了.我们先动态地生成一个行
var cell = ("tr");
接着动态生成两个列和要放入列中的值.
var row1 = ("td");
var row2 = ("td");
var text1 = ("zidoing")
var text2 = ("xiamen");
这些都做完以后下面就很简单了。
把值放入列中.
(text1);
(text2);
把列放入行中
(row1);
(row2);
最后取得tbody，把行放入就可以了。
var mainbody = ("mainbody");
(cell);
完整的代码如下：



<script type="text/javascript">
   function addCell(){
    var cell = ("tr");
    var row1 = ("td");
    var row2 = ("td");
    var text1 = ("zidoing")
    var text2 = ("xiamen");
    (text1);
    (text2);
    (row1);
    (row2);
    var mainbody = ("mainbody");
    (cell);
   }
</script>

addEditRow(tableObject)具体看《》

秒客网

动态创建HTML内容

相关文章