动态向表格添加行并且填充数据应该怎么搞啊！！！

<html> 
<head> 
<title>1</title> 
<script type="text/JavaScript"> //获取下拉列表选中项的文本function getSelectedText(name){var obj=document.getElementById(name);for(i=0;i<obj.length;i++){   if(obj[i].selected==true){    return obj[i].innerText;      //关键是通过option对象的innerText属性获取到选项文本   }
  }
}//获取下拉列表选中项的值function getSelectedValue(name){var obj=document.getElementById(name);return obj.value;      //如此简单，直接用其对象的value属性便可获取到}function inputValue(){
var obj=document.getElementById("txt");
obj.value=getSelectedText("sheng");
}
//删除一行
    function delrow(row_index){ //这边的row_index为行号
       testTbl.deleteRow(row_index);
    }//增加行
function addRow() 
{ 
//添加一行 
var newTr = testTbl.insertRow(); 
//添加两列 
var newTd0 = newTr.insertCell(); 
var newTd1 = newTr.insertCell(); 
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();newTd0.innerHTML =getSelectedText("sheng");
newTd1.innerHTML =getSelectedText("shi");
newTd2.innerHTML =getSelectedText("qu");
//设置列内容和属性 
/*newTd0.innerHTML = "<input type=\"text\" id=\"box4\" value=\"\">"; 
newTd1.innerHTML = "<input type=\"text\" id=\"box4\" value=\"\">"; 
newTd2.innerHTML = "<input type=\"text\" id=\"box4\" value=\"\">"; */
newTd3.innerHTML = "<input type=\"button\" id=\"box4\" value=\"删除\" onClick=\"delrow(this.parentNode.parentNode.rowIndex)\">"; 
}                    
</script> 
</head> <body>
<p><br><select name="sheng" id="sheng">
       <option>湖北省</option>
       <option>湖南省</option>
       <option>河北省</option>
       </select><p><br><select name="shi" id="shi">
       <option>武汉市</option>
       <option>上海市</option>
       <option>北京市</option>
       </select><p><br><select name="qu" id="qu">
       <option>武昌区</option>
       <option>洪山区</option>
       <option>青山区</option>
       </select>
<p><br>
   <input type="button" name="add" value="添加" onClick="inputValue()"><p><br>
   <input type="text" id="txt" name="txt" >
<p><br>
<table id="testTbl" border=1> 
<tr id="tr1"> 
<td >省</td> 
<td >市</td>
<td >区</td>
<td >删除</td>
</tr> 
</table> 
<br /> 
<input type="button" id="add" onclick="addRow();" value="Add Row" />  
</body> 
<html> 

解决方案 »

  1.   

    是否是汝所需？<html> 
    <head> 
    <title>1</title> 
    <script type="text/JavaScript"> //获取下拉列表选中项的文本function getSelectedText(name){var obj=document.getElementById(name);for(i=0;i<obj.length;i++){   if(obj[i].selected==true){    return obj[i].innerText;      //关键是通过option对象的innerText属性获取到选项文本   }
      }
    }//获取下拉列表选中项的值function getSelectedValue(name){var obj=document.getElementById(name);return obj.value;      //如此简单，直接用其对象的value属性便可获取到}function inputValue(){
    var obj=document.getElementById("txt");
    obj.value=getSelectedText("sheng");
    }
    //删除一行
        function delrow(row_index){ //这边的row_index为行号
           document.getElementById("testTbl").deleteRow(row_index);
        }//增加行
    function addRow() 
    { 
    //添加一行 
    var newTr = testTbl.insertRow(); 
    //添加两列 
    var newTd0 = newTr.insertCell(); 
    var newTd1 = newTr.insertCell(); 
    var newTd2 = newTr.insertCell();
    var newTd3 = newTr.insertCell();
    //设置列内容和属性 
    newTd0.innerHTML = "<input type=\"text\" id=\"box4\" value=\""+document.getElementById("sheng").value+"\">"; 
    newTd1.innerHTML = "<input type=\"text\" id=\"box4\" value=\""+document.getElementById("shi").value+"\">"; 
    newTd2.innerHTML = "<input type=\"text\" id=\"box4\" value=\""+document.getElementById("qu").value+"\">"; 
    newTd3.innerHTML = "<input type=\"button\" id=\"box4\" value=\"删除\" onclick=\"delrow(this.parentNode.parentNode.rowIndex)\">"; 
    }                    
    </script> 
    </head> <body>
    <p><br><select name="sheng" id="sheng">
           <option value="湖北省">湖北省</option>
           <option value="湖南省">湖南省</option>
           <option value="河北省">河北省</option>
           </select><p><br><select name="shi" id="shi">
           <option value="武汉市">武汉市</option>
           <option value="上海市">上海市</option>
           <option value="北京市">北京市</option>
           </select><p><br><select name="qu" id="qu">
           <option value="武昌区">武昌区</option>
           <option value="洪山区">洪山区</option>
           <option value="青山区">青山区</option>
           </select>
    <p><br>
       <input type="button" name="add" value="添加" onClick="inputValue()"><p><br>
       <input type="text" id="txt" name="txt" >
    <p><br>
    <table id="testTbl" border=1> 
    <tr id="tr1"> 
    <td >省</td> 
    <td >市</td>
    <td >区</td>
    <td >删除</td>
    </tr> 
    </table> 
    <br /> 
    <input type="button" id="add" onclick="addRow();" value="Add Row" />  
    </body> 
    <html> 
      

  2.   

    <html> 
    <head> 
    <title>1</title>
    <script type="text/javascript">//function:get element by its Id
    function $(e) 
    {
       return document.getElementById ? document.getElementById(e) : null;
    }function AddRow(){
        var _pron = GetSelText("sheng");
        var _city = GetSelText("shi");
        var _addr = GetSelText("qu");
        var _table = $("testTbl");
        var _tr = _table.insertRow(1);
        AddTextNode(_tr,_pron,0);
        AddTextNode(_tr,_city,1);
        AddTextNode(_tr,_addr,2);
        var _td = _tr.insertCell(3);
        var _bt = document.createElement("input");
        _bt.type = "button";
        _bt.value="DelRow";
        _bt.onclick=function(){
            var parent = this.parentNode.parentNode;
            _table.firstChild.removeChild(parent);
        }
        _td.appendChild(_bt);
    }
    function AddTextNode(tr,txt,index){
        var _td = tr.insertCell(index);
        var _tn =document.createTextNode(txt);
        _td.appendChild(_tn);
    }   function GetSelText(elem){
        var sel = $(elem);
        for(var i=0;i<sel.options.length;i++){
            if(sel.options[i].selected =true){
                return sel.options[i].innerHTML;
            }
        }
    }function DelRow(elem){
    }
    </script>  
    </head> <body>
    <p><br><select name="sheng" id="sheng">
           <option>湖北省</option>
           <option>湖南省</option>
           <option>河北省</option>
           </select></p><p><br><select name="shi" id="shi">
           <option>武汉市</option>
           <option>上海市</option>
           <option>北京市</option>
           </select></p><p><br><select name="qu" id="qu">
           <option>武昌区</option>
           <option>洪山区</option>
           <option>青山区</option>
           </select></p>
    <p><br>
       <input type="button" name="add" value="添加" onclick="AddRow()" /></p><p><br>
       <input type="text" id="txt" name="txt" ></p>
    <p><br>
    <table id="testTbl" border=1> 
    <tr id="tr1"> 
    <td >省</td> 
    <td >市</td>
    <td >区</td>
    <td >删除</td>
    </tr> 
    </table> 
    <br /> </p>
    </body> 
    <html> 
      

  3.   

    <!--
     * @author jonde
     * @version 1.0.1 修改将下拉列表选择框中内容增加到增加的表中
     * 
    -->
    <html> 
    <head> 
    <title>1</title> 
    <script type="text/JavaScript"> //获取下拉列表选中项的文本
    function getSelectedText(name){
    var obj=document.getElementById(name);
    for(i=0;i<obj.length;i++){
       if(obj[i].selected==true){
        return obj[i].innerText;      //关键是通过option对象的innerText属性获取到选项文本
       }
      }
    }//获取下拉列表选中项的值
    function getSelectedValue(name){
      var obj=document.getElementById(name);
      return obj.value;      //如此简单，直接用其对象的value属性便可获取到
    }function inputValue(){
      var obj=document.getElementById("txt");
      obj.value=getSelectedText("sheng");
    }//删除一行
    function delrow(row_index){ //这边的row_index为行号
    if(window.confirm("确定要删除吗?")){
        testTbl.deleteRow(row_index);
      }
    }//增加行
    function addRow() { //添加一行 
    var newTr = testTbl.insertRow(); 
    //添加两列 
    var newTd0 = newTr.insertCell(); 
    var newTd1 = newTr.insertCell(); 
    var newTd2 = newTr.insertCell();
    var newTd3 = newTr.insertCell();
    //设置列内容和属性 
    //v1.0.1 mod by jonde
    //newTd0.innerHTML = "<input type=\"text\" id=\"box4\" value=\"aaaa\">"; 
    newTd0.innerHTML = "<input tpe='text' id='box4' value='"+document.all.sheng.options[document.all.sheng.selectedIndex].innerText+"'>";
    //newTd1.innerHTML = "<input type=\"text\" id=\"box4\" value=\"\">"; 
    newTd1.innerHTML = "<input type='text' id='box4' value='"+document.all.shi.options[document.all.shi.selectedIndex].innerText+"'>";
    //newTd2.innerHTML = "<input type=\"text\" id=\"box4\" value=\"\">"; 
    newTd2.innerHTML = "<input type='text' id='box4' value='"+document.all.qu.options[document.all.qu.selectedIndex].innerText+"'>";
    newTd3.innerHTML = "<input type=\"button\" id=\"box4\" value=\"删除\" onClick=\"delrow(this.parentNode.parentNode.rowIndex)\">"; 
    } 
    </script> 
    </head> <body>
    <p><br><select name="sheng" id="sheng">
           <option>湖北省</option>
           <option>湖南省</option>
           <option>河北省</option>
           </select><p><select name="shi" id="shi">
           <option>武汉市</option>
           <option>上海市</option>
           <option>北京市</option>
           </select><p><select name="qu" id="qu">
           <option>武昌区</option>
           <option>洪山区</option>
           <option>青山区</option>
           </select>
    <p><br>
       <input type="button" name="add" value="添加" onClick="inputValue()"><p><br>
       <input type="text" id="txt" name="txt" >
    <p><br>
    <table id="testTbl" border=1> 
    <tr id="tr1"> 
    <td  width="10%">省</td> 
    <td  width="10%">市</td>
    <td  width="10%">区</td>
    <td  width="5%">删除</td>
    </tr> 
    </table> 
    <br/> 
    <input type="button" id="add" onclick="addRow();" value="Add Row" />  
    </body> 
    <html>