如何使用Jquery从数据表中的所有页面获取选定的行

Question

我有一个数据表，其中包含数据列表，我希望所选行显示在弹出窗口中，另一个数据表应显示所选行。

以下是我的数据表的图片

从数据表中选择两行后，我想在用户单击按钮时在单独的弹出窗口中显示它们

我想要像这样的弹出窗口

在弹出窗口中我要显示所选行应显示在其中。

我正在尝试这些代码，但它对我不起作用

  $("#table-sparkline").dataTable().fnDestroy();    
        var oTable2 = $('#table-sparkline').dataTable({
                    "aaSorting": []
        });//popup datatable

//maintable
    $("#example1 tr.selected>td").each(function() {
               //alert("in nth child");
               var values = $(this).html(); 
for(var j=i;j<values.length;j++){
       oTable2.fnAddData([
                values [i]
                ]);

 }
       });

弹出HTML代码：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Tests' performance</h4>
            </div>
            <div class="modal-body">
                <div id="result"></div>
                <table id="table-sparkline" class="display table table-bordered num-right-alignct">
    <thead>
        <tr>
            <th>TestName</th>
            <th>Oct-2014</th>
             <th>Nov-2014</th>
              <th>Dec-2014</th>
               <th>Jan-2014</th>
                <th>Feb-2014</th>
                 <th>Mar-2014</th>

        </tr>
    </thead>
    <tbody id="tbody-sparkline">

</tbody>
                </table>
            </div>

    </div>
  </div>
</div>

Answer 1

var tablevalues =[];

    $("#table-sparkline").dataTable().fnDestroy();  
    var oTable2 = $('#table-sparkline').dataTable({
                "aaSorting": []
    });
    oTable2.fnClearTable();

               //alert("in nth child");
               //var values = $(this).html();        
               //alert(values);
        var table = $('#example1').DataTable(); 
        tablevalues.length=0;
        tablevalues=(table.rows('.selected').data());
        for(var i=0;i<tablevalues.length;i++){

        oTable2.fnAddData([
                tablevalues[i]
                ]);


        }

Answer 2

使用您的一些代码，我能够从一行中提取数据。检查它应该可以帮助你完成任务;）

tr:hover {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Tests' performance</h4>

            </div>
            <div class="modal-body">
                <div id="result"></div>
                <table id="table-sparkline" class="display table table-bordered num-right-alignct">
                    <thead>
                        <tr>
                            <th>TestName</th>
                            <th>Oct-2014</th>
                            <th>Nov-2014</th>
                            <th>Dec-2014</th>
                            <th>Jan-2014</th>
                            <th>Feb-2014</th>
                            <th>Mar-2014</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                        </tr>
                    </thead>
                    <tbody id="tbody-sparkline"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{1}}