从dataTable中的文本框中获取价值

时间:2015-04-30 08:49:02

标签: javascript jquery datatables jquery-datatables tabletools

我有一个动态创建的表格,我正在使用DataTables和TableTools - 除了我有一个输入文本框,我需要在点击一个按钮时获取值时,它的效果很好,但它只是给了我html,例如 的 <input size="3" type="text">

我已经创建了一个DataTables live来尝试重新创建这个问题,但奇怪的是那里返回的html给出了它不适合我的价值(在html中,但至少我可以解析它) - 它仍然如果您更改数量,则不会为您提供正确的价值 - 请参阅此处http://live.datatables.net/bidetoku/1/

这是表的创建方式:

var tr = [];

var sorTable = document.getElementById('tblSORS');

for (var i = 0; i < sorresults.length; i++) {

    tr[i] = document.createElement('tr');
    var tdsorID = document.createElement('td');
    var tdCode = document.createElement('td');
    var tdDesc = document.createElement('td');
    var tdClient = document.createElement('td');
    var tdCreated = document.createElement('td');
    var tdQuantity = document.createElement('td');
    var inputQty = document.createElement('input');

    inputQty.type = "text";
    inputQty.value = "1";
    inputQty.size = "3";



    tdsorID.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_scheduleofratesid').nodeTypedValue));
    tdCode.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_code').nodeTypedValue));
    tdDesc.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_description').nodeTypedValue));
    tdClient.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_clientcontractid.itt_description').nodeTypedValue));
    tdQuantity.appendChild(inputQty);
    tdCreated.appendChild(document.createTextNode(returnDate(sorresults[i].selectSingleNode('./createdon').nodeTypedValue)));


    tr[i].appendChild(tdsorID);
    tr[i].appendChild(tdCode);
    tr[i].appendChild(tdDesc);
    tr[i].appendChild(tdClient);
    tr[i].appendChild(tdQuantity);
    tr[i].appendChild(tdCreated);

    sorTable.getElementsByTagName('tbody')[0].appendChild(tr[i]);
}

var sors = $('#tblSORS').DataTable({
    "destroy": true,
    "info": false,
    "lengthChange": true,
    dom: 'T<"clear">lfrtip',
    tableTools: {
        "sRowSelect": "multi",
        "aButtons": ""
    }

});

// hide scheduleofratesid column

sors.column(0).visible(false);

任何帮助都会很棒,现在已经挣扎了一段时间。

编辑:这里有一些代码看起来像我想要的那样但不完全

function getQuantity(){

var table = $('#example').dataTable();
var data = table.$('input').serialize();
var oTT = $.fn.dataTable.TableTools.fnGetInstance('example');

var rows = oTT.fnGetSelectedData();

if (rows.length > 0) {
    var selectedRows = oTT.fnGetSelectedIndexes();

    selectedRows.forEach(function (i) {

        alert(document.getElementById('example')
            .rows[i]
            .cells[0]
            .firstChild
            .value
        );

    });
}
}

1 个答案:

答案 0 :(得分:0)

这是一个可以帮助你的jQuery:

        $(".test").each(function () {
            //Example: add a click event for every item that has the class .test
            $(this).click(function (){
                //This will get you the value from the clicked element
                valueOfElement = $(this).val();
            });
        }); 

但是,您可能必须为所有这些输入添加公共类。

jQuery参考https://api.jquery.com/each/

尝试下一个代码:

<!doctype html>
<html lang="es">

<head>
    <title>Stack Overflow</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#simpleButton").click(function(){
                $(".fields").each(function () {
                    value = $(this).val();
                    alert(value);
                });  
            });
        });
    </script>
</head>

<body>
    <div id="texts">
        <input type="text" size="25" value="1" class="fields">
        <br/>
        <input type="text" size="25" value="2" class="fields">
        <br/>
        <input type="text" size="25" value="3" class="fields">
        <br/>
        <input type="text" size="25" value="4" class="fields">
        <br/>
        <input type="text" size="25" value="5" class="fields">
        <br/>
        <input type="button" value="Get the values" id="simpleButton">
    </div>
</body></html>