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

Question

I have a table which is dynamically generated. So have no idea on which columns the textbox or dropdown will be present and how many textbox's will be present. Now for each row in the last column there is a details button. On clicking that button I want the data from all cells including the textbox values using jQuery.

For displaying I have hardcoded the table cell values.

My table is as:

<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>

And the script goes as:

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

on button click I need to get the row data as:

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

Now using this I get all the cell values of the row except the textbox values, I get them blank. Now I need to copy the complete row along with the html elements and their values on a button click so that I can create a row in other table and display the values.

Answer 1

Hope this helps..

        <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>