Question

我有一个html表，现在我想在按下下一个按钮时加载更多元素。任何人都可以告诉我水平地动态加载行和列吗？

<table class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>Site</th>
                        <th>SO No</th>
                        <th>Customer</th>
                        <th>Customer PO</th>
                        <th>Order Date</th>
                        <th>Customer Part</th>
                        <th>Device</th>
                        <th>Label Device</th>
                        <th>Process</th>
                        <th>Mfg</th>
                        <th>Qty</th>
                        <th>Ship Date</th>
                        <th>Req Date</th>
                        <th>Status</th>    
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                      <tr>
                        <td>ORL</td>
                        <td>5943</td>
                        <td>Texas Instrument</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>IRFC9014B</td>
                        <td>Die</td>
                        <td>TI</td>
                        <td>150</td>
                        <td>10/12/2015</td>
                        <td>10/12/2015</td>
                        <td>Shipped</td>
                      </tr>
                    </tbody>
                </table>    <!-- ./table -->

CodePen： http://codepen.io/anon/pen/Wbzoyy

Answer 1

使用数据表（datatables.net）动态添加行。

<script>
$.fn.dataTable.ext.errMode = 'throw';    
$(document).ready(function()
{
var ETable = $('#simpledatatable').dataTable({
                    "infoEmpty": "No records available",
                    "sProcessing": "DataTables is currently busy",
                    "processing": true,
                    "bSort": false,              
                    "serverSide": true,
                    "sAjaxSource": "URL FOR JSON DATA",
                    "aLengthMenu": [[10, 25, 50,-1], [10, 25, 50,'All']],
                    "aaSorting": [[0, 'asc']],
                    "iDisplayLength": 10,                
                    "dom": 'T<"clear">lfrtip',
                    "bDeferRender": true,
                    "oLanguage": {
                    "sInfoFiltered": "",
                     "sProcessing": "<img style='position:absolute;' src='<?php echo base_url();?>assets/img/new/loading.gif'>"
                    },
                    "tableTools": {
                    "sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
                    }
})

});
</script>

Answer 2

('#MyTable tr:last').after('<tr>...</tr><tr>...</tr>');

在您的表格中添加ID id="MyTable"

如何在html表中动态加载行和列

2 个答案: