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>

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

1 个答案: