使用jquery更改下拉列表的值时,向表中添加行

时间:2014-05-02 17:05:39

标签: jquery

当使用jquery更改下拉列表的值时向表中添加行。我希望首先根据下拉列表的值向表中添加一些行,之后更改下拉列表值的值时,更改行数根据下拉列表值计算。我的代码不是很有用。任何人都帮帮我?

我的代码是

  <html>
  <head>
 <script>
function AddRow(id)
{
for(var i=0;i<id;i++)
{
 var text_box = "<tr><td><input type='text' name='dest[]'  value='' size='30' />
</td>      <td>
<input type='text' name='destsub[]'  value='' size='35' /></td></tr>";
   $('#myTable').append(text_box)   ;
 text_box += text_box;
}
$('#myTable').replaceWith(text_box) 
 }
 </script>
<title></title>
</head>
 <body>
<select name="" onChange="AddRow(this.value)">
<option>1</option>
<option>2</option>
 <option>3</option>
<option>4</option>
  </select>
<table id="myTable">

 </table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你想要这样的东西吗? http://jsfiddle.net/9bCbk/

$(function() {
    $('select').change(function() {
        $('#myTable').html('');
        for (var i = 0; i<parseInt($(this).val()); i++) {
            var row = '<tr>\
                <td>\
                    <input type="text" name="dest[]" size="30" />\
                </td>\
                <td>\
                    <input type="text" name="destsub[]" size="35" />        \
                </td>\
            </tr>';
            row = $(row);
            $('#myTable').append(row);
        }
    });
});