jQuery datatable：從動態生成的數據表中獲取全行數據以及可用的文本框的值

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>