Question

我有这个表，我希望能够使用Jquery动态添加行，但是到目前为止，我已经为添加的行设置了一个循环，我只需要脚本用它。（我使用的是MVC模式设计）

我的循环代码：

<?php
     $viewTableRows = array_merge($device->tableRows, array(new tableRow()));
     foreach ($viewTableRows as $i => $row) { 
  ?>

td的一个例子：

<td>
       <?php echo $htmlRenderer->getProperHtmlForInputText(
           SheetTableOperator::SHEET_POSITION .  "[$i]",
           $row->position);
       ?>
</td>

an Image of my table

Answer 1

使用此代码动态添加数据。

        <button id='mybtn'>Add row</button>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<script  type="text/javascript">
           $(document).on("click",'#mybtn',function(){  

                 var $mytable = $('#table').find("tbody");

                  $last_row = $mytable.find("tr:last");

                  $new_row = $last_row.clone();

                  $last_row.after($new_row);

           });    


</script>

Answer 2

方法1

<body>
        <h4>Number Of Records - <span>@ViewBag.ItemCount</span> </h4>
        <div class="table-responsive" style="padding-left:20%;">
            <table class="table-fill" style="float:left;">
                <thead>
                    <tr>
                        <th class="text-left">                            
                             Select All
                            <div class="checkbox">
                                <input style="margin-left:15px;" type="checkbox" id="cbSelectAll" />
                            </div>
                        </th>
                        <th class="text-left" style="padding-left:27px;">
                            First Name
                        </th>
                        <th class="text-left" style="padding-left:32px;">
                            Last Name
                        </th>
                        <th class="text-left" style="padding-left:40px;padding-right: 60px;">
                            Email-ID
                        </th>
                        <th class="text-left" style="padding-left:30px;padding-right: 40px;">
                            Customer Type
                        </th>
                        <th class="text-left" style="padding-left:15px;">
                            Customer Designation
                        </th>
                    </tr>
                </thead>
            </table>
            <div id="GridRows" style="width:65%;">
            </div>
        </div>

        <div id="pager"></div>
        <input type="hidden" id="currentPage">
        <input type="hidden" id="hfCustomerID"/>
        <input type="hidden" id="hfSelectAll" />
    </body>

方法2

var currentEletd;

$('table').append("<tr class='tr'></tr>").after(
    function() {
        var ele = $('.tr', this);
        currentEletd = (ele[ele.length - 1]);
});

$(currentEleth).append(("<td>" + [your value] + "</td>"));

使用jQuery动态地向表添加行

2 个答案: