用jQuery将行添加到表中 [英] Add rows to a table with jQuery

问题描述

我有一个由5列组成的HTML表格。在HTML表格上方有一个名为HowManyRows的文本框，用户可以在其中输入他们想要添加到表格中的行数。这些行实际上是在添加行时添加的按钮被点击。

我认为创建此功能的最佳方式是使用for循环，但是在浏览互联网后，人们说使用jQuery方法 。每个。我已经尝试过，但不能按要求工作。无论HowManyRows中的数字如何，它只是在表中添加一行。有人可以纠正我错误的地方吗？

以下是我的HTML：

 < input type =textid =HowManyRows/> 
< table id =MainTable> 
< tr< tr id =FirstRow> 
< td> 
< select> 
< option>牛奶< / option> 
< option> Coffee< / option> 
< option> Tea< / option> 
< / select> 
< / td> 
< td> 
< select> 
< option> 1 sugar< / option> 
< option> 2 sugar< / option> 
< option> 3糖< / option> 
< / select> 
< / td> 
< td> 
< input type =text/> 
< / td> 
< td> 
< input type =text/> 
< / td> 
< td> 
< input type =text/> 
< / td> 
< / tr> 
< / table> 
< button type =buttonid =btnAdd>添加行！< / button> 
  

这是我的jQuery：

（$＃$）$（$＃$）$函数（索引）{
 $（'＃FirstRow'）。clone（）。appendTo（'＃MainTable'）; 
}）; 
}）; 
}）; 
  

我在JSFiddle上创建了一个演示 here 。

解决方案

b
$ b

  $（document）.ready（function（）{
 $（'＃btnAdd'）。click（function（）{
 var count = parseInt（$（'＃HowManyRows'）。val（）），first_row = $（'＃FirstRow'）; 
 while（count  - > 0）
 first_row.clone （）.appendTo（'＃MainTable'）; 
}）; 
}）; 
  

小提琴： http://jsfiddle.net/iambriansreed/QWpdr/

I have a HTML table which consists of 5 columns. Above the HTML table, there is a textbox called "HowManyRows" where the user may enter how many rows they would like to add to the table. The rows are actually added when the "Add Row!" button is clicked.

I thought the best way to create this functionality would be with a for loop, but after browsing the internet, people have said to use jQuery method .each. I've tried that, but it doesn't work as desired. It just adds one row to the table regardless of the number in "HowManyRows". Can someone correct where I have gone wrong please?

Here's my HTML:

    <input type="text" id="HowManyRows"/>
    <table id="MainTable">
        <tr id="FirstRow">
            <td>
            <select>
              <option>Milk</option>
              <option>Coffee</option>
              <option>Tea</option>
            </select>
            </td>
             <td>
            <select>
              <option>1 sugar</option>
              <option>2 sugar</option>
              <option>3 sugar</option>
           </select>
            </td>
             <td>
                 <input type="text"/>           
            </td>   
               <td>
                 <input type="text"/>           
            </td>
               <td>
                 <input type="text"/>           
            </td>
        </tr>  
    </table>
<button type="button" id="btnAdd">Add Row!</button>

Here's my jQuery:

$(document).ready(function () {
    $('#btnAdd').click(function () {
        $('#HowManyRows').each(function(index) {
            $('#FirstRow').clone().appendTo('#MainTable');
        });
    });   
});

I have created a demo on JSFiddle here.

解决方案

Here you go:

 $(document).ready(function () {
     $('#btnAdd').click(function () {
            var count = parseInt($('#HowManyRows').val()), first_row = $('#FirstRow');
            while(count-- > 0)
                first_row.clone().appendTo('#MainTable');
     });   
 });​

Fiddle: http://jsfiddle.net/iambriansreed/QWpdr/

这篇关于用jQuery将行添加到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！