jQuery 数据表：从动态生成的数据表中获取整行数据以及可用的文本框值

Question

我有一个动态生成的表。 所以不知道文本框或下拉列表将出现在哪些列上以及将出现多少个文本框。 现在对于最后一列中的每一行都有一个详细信息按钮。 单击该按钮时，我想要来自所有单元格的数据，包括使用 jQuery 的文本框值。

为了显示，我对表格单元格值进行了硬编码。

我的表是这样的：

<table id="example">
 <thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>

    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="text"/></td>
        <td>Internet Explorer 4.0</td>
        <td><select><option value="1">1</option>
        <option value="2">2</option></select>
        </td>
        <td> 4</td>
        <td> A</td>

    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet
             Explorer 5.0</td>
        <td>Win 95+</td>
        <td>5</td>
        <td>C</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet
             Explorer 5.5</td>
        <td>Win 95+</td>
        <td>5.5</td>
        <td>A</td>
    </tr>
    <tr>
        <td><select><option value="1">1</option>
        <option value="2">2</option></select></td>
        <td>Internet
             Explorer 6</td>
        <td>Win 98+</td>
        <td>6</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td>7</td>
        <td>A</td>
    </tr>
</tbody>
</table>

脚本如下：

 var table = $('#example').DataTable({
  ordering: false,
 "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button class='addbtn'>Add</button>"
    } ]
});

单击按钮我需要将行数据获取为：

var rowdata=[];
rowdata=table.row(3).data();

现在使用它我得到除了文本框值之外的行的所有单元格值，我把它们设为空白。 现在我需要在单击按钮时复制完整的行以及 html 元素及其值，以便我可以在其他表中创建一行并显示这些值。

Answer 1

希望这可以帮助..

        <table id="example">
     <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
            <th>Add</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text"/></td>
            <td>Internet Explorer 4.0</td>
            <td><select><option value="1">1</option>
            <option value="2">2</option></select>
            </td>
            <td> 4</td>
            <td> A</td>
            <td><button class='addbtn'>Add</button></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
            <td><button class='addbtn'>Add</button></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
            <td><button class='addbtn'>Add</button></td>
        </tr>
        <tr>
            <td><select><option value="1">1</option>
            <option value="2">2</option></select></td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
            <td><button class='addbtn'>Add</button></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
            <td><button class='addbtn'>Add</button></td>
        </tr>
    </tbody>
    </table>
        <script>               
            $( document ).ready(function() {                                      

                $( ".addbtn" ).click(function() {
                    console.log( "add button clicked" );
                    var rowData = 0;
                    var t = 0;
                    $(this).parent().prevAll().each(function(){
                        if ($(this).find('input').length) {                                 
                            var thisInput = $(this).find('input');

                            rowData += parseFloat(thisInput.val()) || 0;
                            console.log(thisInput.val());
                        }
                        else if($(this).find('select').length) {
                            console.log("td has select box");
                            var thisInput = $(this).find('select');
                            rowData += parseFloat(thisInput.val()) || 0;
                            console.log(thisInput.val());
                        }
                        else {
                            console.log($(this).text());
                            rowData += parseFloat($(this).text(),0) || 0;                                
                        }
                    });   
                    rowData = rowData.toFixed(2);
                    console.log("total = " + rowData);                   

                });                    
            });

        </script>