<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>采购订单</title>
<script type="text/javascript">
   function addRow(){
     var tableObj = document.getElementById("test");
     var rowLength = tableObj.rows.length;
     var newTr = document.createElement("tr");
     var newTd0 = document.createElement("td");
     var newTd1 = document.createElement("td");
     var newTd2 = document.createElement("td");
     var newTd3 = document.createElement("td");
     var newTd4 = document.createElement("td");
     var newTd5 = document.createElement("td");
     var newTd6 = document.createElement("td");
     var newTd7 = document.createElement("td");
     var newTd8 = document.createElement("td");
   
     newTd0.innerHTML = "测试数据" +(rowLength-1); 
     newTd1.innerHTML = rowLength-2;  //=select  的 indexselect
     newTd2.innerHTML ="document.myform.goodsnumber.option.selected";
     newTd3.innerHTML = "测试数据" +(rowLength-1); 
     newTd4.innerHTML = "测试数据" +(rowLength-1); 
     newTd5.innerHTML = "测试数据" +(rowLength-1); 
     newTd6.innerHTML = "测试数据" +(rowLength-1); 
     newTd7.innerHTML = "测试数据" +(rowLength-1); 
     newTd8.innerHTML = "测试数据" +(rowLength-1); 
   
   
   
   
     newTr.appendChild(newTd0);
     newTr.appendChild(newTd1);
     newTr.appendChild(newTd2);
     newTr.appendChild(newTd3);
     newTr.appendChild(newTd4);
     newTr.appendChild(newTd5);
     newTr.appendChild(newTd6);
     newTr.appendChild(newTd7);
     newTr.appendChild(newTd8);   /*
   var lastTr = tableObj.rows[rowLength+1];
         lastTr.parentNode.insertBefore(newTr,lastTr);
  */
   tableObj.appendChild(newTr);
  }
 
  //删除行
 function deleteRow(){
   var tableObj = document.getElementById("test");
   var lastTrIndex = tableObj.rows.length - 1; //表格最后一行索引
  if(lastTrIndex > 0){
          tableObj.deleteRow(lastTrIndex);
   }
  }</script>
</head><body>   
    <form  name="myform" method="post">
    <table width="700" border="0" align="center" id="choice">    <tr>
      <td width="100">
        商品编号:
      </td>
      <td>
        <select name="goodsnumber" style="width:80%">
            <option value="">————请选择————</option>
            <option value="xxsg01">xxsg01</option>
            <option value="hgyl02">hgyl02</option>
            <option value="gzrl03">gzrl03</option>
            <option value="xmhx04">xmhx04</option>
            <option value="gdtc05">gdtc05</option>
            <option value="mwxc66">mwxc66</option>
            <option value="skyy07">skyy07</option>
            <option value="xxsc08">xxsc08</option>
            <option value="xgbg09">xgbg09</option>
            <option value="gzsp10">gzsp10</option>
            
        </select>
      </td>
      <td width="100">
        商品名称:
      </td>
      <td>
         <select name="goodsname" style="width:80%">          
            <option value="">————请选择————</option>
            <option value="">新鲜水果</option>
            <option value="">火锅原料</option>
            <option value="">各种肉类</option>
            <option value="">鲜美海鲜</option>
            <option value="">各地特产</option>
            <option value="">美味小吃</option>
            <option value="">爽口饮料</option>
            <option value="">新鲜蔬菜</option>
            <option value="">雪糕冰棍</option>
            <option value="">罐装食品</option>
        </select>
      </td>
      </tr>
      <tr>       
      <td width="50">
        货运方式:
      </td>
      <td>
         <select name="sendway" style="width:80%">
            <option value="">————请选择————</option>
            <option value="">公路运输</option>
            <option value="">铁路运输</option>
            <option value="">航空运输</option>
        </select>
        </td>
      <td width="100">
         供应商:
      </td>
      <td>
         <select name="provider" style="width:80%">
            <option value="">————请选择————</option>
            <option value="">当当网</option>
            <option value="">亚马逊</option>
            <option value="">淘宝</option>
            <option value="">京东</option>
            <option value="">食味网</option>
            <option value="">聪慧网</option>
            <option value="">3158采购网</option>
            <option value="">奇异网</option>
        </select>
      </td>
      </tr>
      <tr>
      <td width="100">
        采购部门:
      </td>
      <td>
         <select name="buyclass" style="width:80%">
            <option value="">————请选择————</option>
            <option value="">质量部门</option>
            <option value="">财务部门</option>
            <option value="">生产部门</option>
            <option value="">仓库部门</option>
            <option value="">管理部门</option>
            <option value="">采购部门</option>
            <option value="">销售部门</option>
        </select>
        </td>
      <td width="100">
        采购员:
      </td>
      <td>
         <select name="client" style="width:80%">
            <option value="">————请选择————</option>
            <option value=""></option>
            <option value="">/option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
        </select>   
      </td>
      </td>
      </tr>
      <tr>
      
       <td width="100">
        数&nbsp;&nbsp;&nbsp;&nbsp;量:
      </td>
      <td><input type="text" name="adress" />
      </td>
        <td width="100">
        收货地址:
      </td>
      <td><input type="text" name="adress" /></td>
      </tr>
      <tr height="20"></tr>
      <tr align="center">
      <td colspan="2"><input type="button" value="确定" onclick="addRow()"/>&nbsp;<input type="button" value="删除一行" onclick="deleteRow()"/></td>      <tr height="40"></tr>
      </table>
    </form>
    
    <table width="800" cellpadding="0" cellspacing="0" border="2" align="center" id="test" font-size:12px;text-align:center;">
    
    <tr align="center"><font size="5"> <b>采购订单</b></font> </tr>
        <tr><td colspan=5><font color="#FF0000">订单编号:</font></td>           
            <td colspan=5><font color="#FF0000">创建日期:</font></td>
    </tr>
        <tr align="center">                
            <th width="10"><input type="checkbox" value="全选"></th>
            <th width="100">序号</th>
            <th width="100">商品编号</th>
            <th width="200">商品名称</th>
            <th width="50">数量</th>
            <th width="150">供应商</th>
            <th width="150">采购部门</th>
            <th width="100">货运方式</th>
            <th width="100">收货地址</th>
            <th width="100">采购员</th>
    </tr>
</table>
</body>
</html>
javascriptselectoptiontable动态获取值

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>采购订单</title>
    <script type="text/javascript">
    var getSelectedOptionValue=function (selectObj){
    //if(selectObj=='')
    //return '';
    selectObj=$$one(selectObj);
    var selectedIndex=selectObj.selectedIndex;
    if(selectedIndex>=0){
    var selectOption=selectObj.options[selectedIndex];
    return selectOption.text;
        }
        else {
    return "";
    }

    };
    var $$one=function(name22){

    return document.getElementsByName(name22)[0];

    };
    var index2=1;
       function addRow(){
         var tableObj = document.getElementById("test");
         var rowLength = tableObj.rows.length;
         var newTr = document.createElement("tr");
         var newTd0 = document.createElement("td");
         var newTd1 = document.createElement("td");
         var newTd2 = document.createElement("td");
         var newTd3 = document.createElement("td");
         var newTd4 = document.createElement("td");
         var newTd5 = document.createElement("td");
         var newTd6 = document.createElement("td");
         var newTd7 = document.createElement("td");
         var newTd8 = document.createElement("td");
        var newTd9 = document.createElement("td");

         newTd0.innerHTML = index2++; 
         newTd1.innerHTML = rowLength-2;  //=select  的 indexselect 
         newTd2.innerHTML =getSelectedOptionValue("goodsnumber");
         newTd3.innerHTML = getSelectedOptionValue("goodsname"); 
         newTd4.innerHTML = $$one("number_sum").value;
         newTd5.innerHTML = getSelectedOptionValue("provider");
         newTd6.innerHTML =getSelectedOptionValue("buyclass");
         newTd7.innerHTML = getSelectedOptionValue("sendway");
         newTd8.innerHTML = $$one("address").value;
     newTd9.innerHTML = getSelectedOptionValue("client");
       
       
       
       
         newTr.appendChild(newTd0);
         newTr.appendChild(newTd1);
         newTr.appendChild(newTd2);
         newTr.appendChild(newTd3);
         newTr.appendChild(newTd4);
         newTr.appendChild(newTd5);
         newTr.appendChild(newTd6);
         newTr.appendChild(newTd7);
         newTr.appendChild(newTd8);
     newTr.appendChild(newTd9);   /*
       var lastTr = tableObj.rows[rowLength+1];
             lastTr.parentNode.insertBefore(newTr,lastTr);
      */
       tableObj.appendChild(newTr);
      }
     
      //删除行
     function deleteRow(){
       var tableObj = document.getElementById("test");
       var lastTrIndex = tableObj.rows.length - 1; //表格最后一行索引
      if(lastTrIndex > 0){
              tableObj.deleteRow(lastTrIndex);
       }
      }</script>
    </head><body>   
        <form  name="myform" method="post">
        <table width="700" border="0" align="center" id="choice">    <tr>
          <td width="100">
            商品编号:
          </td>
          <td>
            <select name="goodsnumber" style="width:80%">
                <option value="">————请选择————</option>
                <option value="xxsg01">xxsg01</option>
                <option value="hgyl02">hgyl02</option>
                <option value="gzrl03">gzrl03</option>
                <option value="xmhx04">xmhx04</option>
                <option value="gdtc05">gdtc05</option>
                <option value="mwxc66">mwxc66</option>
                <option value="skyy07">skyy07</option>
                <option value="xxsc08">xxsc08</option>
                <option value="xgbg09">xgbg09</option>
                <option value="gzsp10">gzsp10</option>
                
            </select>
          </td>
          <td width="100">
            商品名称:
          </td>
          <td>
             <select name="goodsname" style="width:80%">          
                <option value="">————请选择————</option>
                <option value="">新鲜水果</option>
                <option value="">火锅原料</option>
                <option value="">各种肉类</option>
                <option value="">鲜美海鲜</option>
                <option value="">各地特产</option>
                <option value="">美味小吃</option>
                <option value="">爽口饮料</option>
                <option value="">新鲜蔬菜</option>
                <option value="">雪糕冰棍</option>
                <option value="">罐装食品</option>
            </select>
          </td>
          </tr>
          <tr>       
          <td width="50">
            货运方式:
          </td>
          <td>
             <select name="sendway" style="width:80%">
                <option value="">————请选择————</option>
                <option value="">公路运输</option>
                <option value="">铁路运输</option>
                <option value="">航空运输</option>
            </select>
            </td>
          <td width="100">
             供应商:
          </td>
          <td>
             <select name="provider" style="width:80%">
                <option value="">————请选择————</option>
                <option value="">当当网</option>
                <option value="">亚马逊</option>
                <option value="">淘宝</option>
                <option value="">京东</option>
                <option value="">食味网</option>
                <option value="">聪慧网</option>
                <option value="">3158采购网</option>
                <option value="">奇异网</option>
            </select>
          </td>
          </tr>
          <tr>
          <td width="100">
            采购部门:
          </td>
          <td>
             <select name="buyclass" style="width:80%">
                <option value="">————请选择————</option>
                <option value="">质量部门</option>
                <option value="">财务部门</option>
                <option value="">生产部门</option>
                <option value="">仓库部门</option>
                <option value="">管理部门</option>
                <option value="">采购部门</option>
                <option value="">销售部门</option>
            </select>
            </td>
          <td width="100">
            采购员:
          </td>
          <td>
             <select name="client" style="width:80%">
                <option value="">————请选择————</option>
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
            </select>   
          </td>
          </td>
          </tr>
          <tr>
          
           <td width="100">
            数&nbsp;&nbsp;&nbsp;&nbsp;量:
          </td>
          <td><input type="text" name="number_sum" />
          </td>
            <td width="100">
            收货地址:
          </td>
          <td><input type="text" name="address" /></td>
          </tr>
          <tr height="20"></tr>
          <tr align="center">
          <td colspan="2"><input type="button" value="确定" onclick="addRow()"/>&nbsp;<input type="button" value="删除一行" onclick="deleteRow()"/></td>      <tr height="40"></tr>
          </table>
        </form>
        
        <table width="800" cellpadding="0" cellspacing="0" border="2" align="center" id="test" font-size:12px;text-align:center;">
        
        <tr align="center"><font size="5"> <b>采购订单</b></font> </tr>
            <tr><td colspan=5><font color="#FF0000">订单编号:</font></td>           
                <td colspan=5><font color="#FF0000">创建日期:</font></td>
        </tr>
            <tr align="center">                
                <th width="10"><input type="checkbox" value="全选"></th>
                <th width="100">序号</th>
                <th width="100">商品编号</th>
                <th width="200">商品名称</th>
                <th width="50">数量</th>
                <th width="150">供应商</th>
                <th width="150">采购部门</th>
                <th width="100">货运方式</th>
                <th width="100">收货地址</th>
                <th width="100">采购员</th>
        </tr>
    </table>
    </body>
    </html>