搞定马上给分！！~！

如何用javascript来操作select选项动态生成<table>   默认方案 生成<table>为4行方案2为<table>前三3行
方案3为<table>前2行
方案1为<table>前1行

解决方案 »

  1.   

    <select onchange="CreateTable(this.value,4)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" selected="selected">4</option>
    </select>
    <div id="TableContainer"></div>
    <script type="text/javascript">
    function CreateTable(rows, cols)
    {
    var strTable ;
    strTable = "<table cellpadding=\"5\" border=\"1\">";
    for(var i = 0; i < rows; i++)
    {
    strTable += "<tr>";
    for(var k = 0; k < cols; k++)
    {
    strTable += "<td>";
    strTable += "&nbsp;";
    strTable += "</td>";
    }
    strTable += "</tr>";
    }
    strTable += "</table>";
    document.getElementById("TableContainer").innerHTML = strTable;
    }
    CreateTable(4,4);
    </script>
      

  2.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            function createEventTable(rows) {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<rows; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="col1"+colno
                    col2.id = "col2"+colno;
                    col3.id = "col3"+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
               
                }
            }
            function alertMe(){
                this.bgColor=NEW_COLOR;
            }
            window.onload=function(){
                createEventTable(4);
            }
    function setrows(rows){
    createEventTable(rows);
    }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    <div><select id=tbsel onchange=setrows(this.value)>
    <option value=4>默认方案</option>
    <option value=3>方案一</option>
    <option value=2>方案二</option>
    <option value=1>方案三</option>
    </select>
    </div>
    </body>
    </html>
      

  3.   


    //这个不要。。写多了
    function alertMe(){
                this.bgColor=NEW_COLOR;
            }
      

  4.   

    http://topic.csdn.net/u/20090817/23/4fafb015-84ca-4f59-a343-6f16b5b384cc.html
    前段时间回复个相似的
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>无标题页</title>
        <script type="text/javascript">
    function selectedchange(obj){
      var n = obj.options[obj.selectedIndex].text;
      var tbl = document.getElementById("tb");
      var tr = tbl.getElementsByTagName("tr");
      var k = tr.length;
      if(tr.length>1) for(var i=1;i<k;i++){
          tr[1].parentNode.removeChild(tr[1],true);
      }     
      for(var i=0;i<n;i++){
        var newtr = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML = "供选答案" + (i+1);
        newtr.appendChild(td);
        td = document.createElement("td");
        td.innerHTML = "<input type=\"text\" name=\"t\"" + i + "\"/>";
        newtr.appendChild(td);
        tbl.appendChild(newtr);
      }
      if(document.all) tbl.outerHTML = tbl.outerHTML;
    }</script>
    </head>
    <body><table id="tb" width="98%" align="center" border="1" cellpadding="2" cellspacing="1">
    <tr>
       <td>
           <div align="right">候选个数</div>
       </td>
       <td>
             <select id="dropChoicesCount" onchange="selectedchange(this)" name="sel" runat="server" class="commdrop">
                    <option>4</option>
                    <option>2</option>
                    <option>3</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                     <option>10</option>
              </select>
        </td>
    </tr>
    </table>
    </body>
    </html>