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>