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

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

javascript jquery html datatables

Javascript jQuery datatable：从动态生成的datatable中获取完整的行数据以及可用的文本框值,javascript,jquery,html,datatables,Javascript,Jquery,Html,Datatables,我有一个动态生成的表。因此，不知道文本框或下拉列表将出现在哪些列上，以及将出现多少文本框。现在，最后一列中的每一行都有一个details按钮。单击该按钮后，我希望使用jQuery从所有单元格中获取数据，包括文本框值对于显示，我已硬编码表格单元格值我的表格如下： <table id="example"> <thead> <tr> <th>Rendering engine</th> <th

我有一个动态生成的表。因此，不知道文本框或下拉列表将出现在哪些列上，以及将出现多少文本框。现在，最后一列中的每一行都有一个details按钮。单击该按钮后，我希望使用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>

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

希望这有帮助

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


渲染引擎
浏览器
月台
引擎版本
CSS等级
添加
Internet Explorer 4.0
1.
2.
4.
A.
添加
三叉戟
互联网
浏览器5.0
赢得95分+
5.
C
添加
三叉戟
互联网
探索者5.5
赢得95分+
5.5
A.
添加
1.
2.
Internet Explorer 6
赢98+
6.
A.
添加
三叉戟
Internet Explorer 7
赢XP SP2+
7.
A.
添加
$（文档）.ready（函数（）{
$（“.addbtn”）。单击（函数（）{
log（“单击添加按钮”）；
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；
log（thisInput.val（））；
}
else if（$（this）.find（'select'）.length）{
log（“td有选择框”）；
var thisInput=$（this.find（'select'）；
rowData+=parseFloat（thisInput.val（））| | 0；
log（thisInput.val（））；
}
否则{
console.log（$（this.text（））；
rowData+=parseFloat（$（this）.text（），0）| | 0；
}
});   
rowData=rowData.toFixed（2）；
console.log（“total=“+rowData”）；
});                    
});

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

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