使用javascript从tablesorter表中提取数据

时间：2014-09-23 15:24:23

标签： javascript tablesorter

我有一个使用javascript和ajax动态生成的tablesorter表。用户可以输入更改值，当他们单击按钮转到下一个或上一个记录时，需要将表中的信息保存到MySQL表中。我已经查看了很多这里的帖子并尝试了很多例子，我仍然无法将表格中的任何数据发布到我的PHP页面来保存它。
以下是我表格第一行的示例：

$("#guides").append('<tr><td id="amCodeOld">'+data.amCodeOld+'</td><td><input type="text" class="qty" id="amOldQty"/></td><td>'+data.amOldPrice+
                                            '</td><td>'+data.am+
                                            '</td><td>'+data.amCodeNew+'</td><td><input type="text" class="qty" id="amNewQty"/></td><td>'+data.amNewPrice+
                                            '</td><td><input type="checkbox" id="amS" '+
                                            '"/></td><td><input type="checkbox" id="amR"'+'"/></td><td><input type="checkbox" id="amCall"'+
                                            '"/></td><td><input type="text" id="amComm" value="'+
                                            '"/></td></tr>');

还有更多像这样的行，每个行都用于我正在使用的不同指南。我需要找到的是id为amOldQty，amNewQty等的输入值以及不同的复选框。 我有Next，Prev和Print的按钮，当点击按钮时，我试图调用一个名为save（）的函数来获取信息，并通过ajax将它发送到另一个要保存的PHP页面。
save（）看起来像这样：

function save() {
var amOldQty 
$('#guides tr').each(function(){
alert("searching ");
       amOldQty= $(this).find('#amOldQty').val();
       if (amOldQty=='' || amOldQty== null) {
        amOldQty = "Not Showing Number";
       }
  console.log(amOldQty);  
});// END OF EACH FUNCTION

我试过了：

var amOldQty;
$('#guides tbody tr').each(function() {  
        amOldQty = $(this).find('td:nth-child(1) input').val();
    });
console.log(amOldQty);

并且日志显示未定义。我还尝试使用

更直接的方法 
$('#guides tbody tr').each(function() {  
        amOldQty = $(this).find('#amOldQty').val();
    });

仍然没有。我收到了搜索的警报，但在console.log（amQtyOld）中，它显示的是“不显示数字”。我甚至试图在创建表格时填充输入，但仍然没有找到该数字 更新如果我将td添加到：

$(guides tr td).each(function(){...

它甚至没有给我“搜索”的警报。 如何从该表中获取所有数据以便保存？似乎我正在努力的一切都应该起作用。

3 个答案:

答案 0 :(得分：0)

如果您的用户使用browsers that support contenteditable elements，那么您可以查看contenteditable widget我可用的fork of tablesorter。

如果您不想使用contenteditable元素，那么您可以尝试以下代码（从contenteditable演示中复制和修改，但未测试）

var $table = $('table');

$table.children('tbody').on('change', 'input', function(event){
  var $input = $(this),
    $cell = $input.closest('td'),

    newContent = $input.val(),
    cellIndex = $cell[0].cellIndex, // there shouldn't be any colspans in the tbody
    rowIndex = $this.closest('tr').attr('id'); // unique row id

  // update tablesorter
  $table.trigger("updateCell", [$cell]);

  $.post("mysite.php", {
    "row"     : rowIndex,
    "cell"    : cellIndex,
    "content" : newContent
  });

});

希望您还在该列中使用input parser。

答案 1 :(得分：0)

您不清楚想要呈现数据的内容或方式。但是，here is a JSFiddle可以实现您想要的效果。

函数createRowsForTesting()只是在表格中创建行并填充<input>字段以便于测试。

函数getDataFromTable()遍历＆lt; table＆gt;或所有＆lt; tables＆gt;的行，将您想要的数据发送到控制台。根据你自己对这个问题的回答，很明显你真的想要访问更多＆lt; input＆gt;元素比你的问题中提到的要多。因此，此函数现在构建一个对象数组，其中包含＆lt; input＆gt;中数据的键：值对。领域。每行中有一个Object。该数组返回给调用函数。

函数wrapGetDataFromTable()包装getDataFromTable()提供表ID，我们只查看＆lt; tbody＆gt;中的行。标记，我们希望输出到控制台。输出getDataFromTable()返回的数组，以便我们可以看到数据结构。该功能设置为每次按[打印到控制台]按钮时运行。

对于看起来像（带标题行）的表： Test table

输出结果为：

amOldQty=amOldQty0_text amNewQty=amNewQty0_text amS=on  amR=off amCall=off  amComm=amComm0_text 
amOldQty=amOldQty1_text amNewQty=amNewQty1_text amS=off amR=on  amCall=off  amComm=amComm1_text 
amOldQty=amOldQty2_text amNewQty=amNewQty2_text amS=off amR=off amCall=on   amComm=amComm2_text 

The array of row input data objects is:
[0] Object { amOldQty="amOldQty0_text", amNewQty="amNewQty0_text", amS="on", more...}
        amOldQty:   "amOldQty0_text"
        amNewQty:   "amNewQty0_text"
        amS:        "on"
        amR:        "off"
        amCall:     "off"
        amComm:     "amComm0_text"

[1] Object { amOldQty="amOldQty1_text", amNewQty="amNewQty1_text", amS="off", more...}
        amOldQty:   "amOldQty1_text"
        amNewQty:   "amNewQty1_text"
        amS:        "off"
        amR:        "on"
        amCall:     "off"
        amComm:     "amComm1_text"

[2]  Object { amOldQty="amOldQty2_text", amNewQty="amNewQty2_text", amS="off", more...}
        amOldQty:   "amOldQty2_text"
        amNewQty:   "amNewQty2_text"
        amS:        "off"
        amR:        "off"
        amCall:     "on"
        amComm:     "amComm2_text"

JavaScript的：

/**
 * Runs through a table getting the values from <input> fields.
 * It only looks in the <tbody>, not the <thead>
 * @param  tableId
 *         The DOM ID of the table from which we desire to obtain the
 *         input values.
 *         If tableId is not a string, then look in all table rows in all tables.
 * @param  keyAttr
 *         The attribute of the <input> which contains the value which will
 *         be used as the key for the key:value pair within the Object returned.
 *         This needs to be a value which is unique, wihin the table row.
 *         A normal use would be "id".
 *         If a value is duplicated a message is sent to the console and only
 *         the last value is kept.
 *         The default is "id".
 * @param  justBody
 *         If true, look only within the <tbody> tag, not any other part of
 *         the table (e.g. <thead>).
 *         The default is true.
 * @param  includeBlank
 *         Boolean indicating if the returned array should contain an entry for
 *         rows which are found to be blank.
 *         The default is true.
 * @param  consoleOutput
 *         Send a line to the console with the key:value pairs separated by
 *         tabs for each row.
 *         The default is false.
 * @return Object
 *         Returns an Array of Objects with key:value pairs for the rows.
 *         If there were no <input>
 * Copyright 2014 by Makyen.
 * Released under the MPL 2.0. http://mozilla.org/MPL/2.0/.
 */
function getDataFromTable(tableId, keyAttr, justBody, includeBlank, consoleOutput) {
    //This assumes that within the row each input has a unique attribute keyAttr.
    //Set defaults:
    var tableSelector = (typeof tableId === "string") ? "#" + tableId : "table";
    keyAttr = (typeof keyAttr === "string") ? keyAttr : "id";
    includeBlank = (typeof includeBlank === "boolean") ? includeBlank : true;
    justBody = (typeof justBody === "boolean") ? justBody : true;
    consoleOutput = (typeof consoleOutput === "boolean") ? consoleOutput : false;

    var bodySelector = (justBody) ? " tbody" : "";
    var toReturn = [];
    var selector = tableSelector + bodySelector + ' tr';
    $(selector).each(function () {
        var inputs = {};
        $(this).find('input').each(function () {
            //Get the value for all inputs on this line.
            var attrValue = $(this).attr(keyAttr);
            if (typeof inputs[attrValue] !== "undefined") {
                console.log("Warning: When attempting to get data from the table id=" //
                            + tableId + " the value of the key attribute, " + keyAttr //
                            + ", was not unique for value=" + attrValue);
            }
            //Get the value of the <input>.
            if ($(this).is(':checkbox')) {
                //Special case the checkboxes because .val() does not return
                //the correct informaiton for them.
                //First indicate that all checkboxes are off.
                inputs[attrValue] = "off";
                //Specifically determine if the current one is checked.
                if ($(this).is(':checked')) {
                    inputs[attrValue] = "on";
                }
            } else {
                //Add this input to the object
                inputs[attrValue] = $(this).val();
            }
        });
        var inputKeys = Object.keys(inputs);
        if (inputKeys.length > 0) {
            //There were <input> tags on this row.
            var outputText = "";
            if (consoleOutput) {
                inputKeys.forEach(function (value) {
                    outputText += value + "=" + inputs[value] + "\t";
                });
                console.log(outputText);
            }
            toReturn.push(inputs);
        } else {
            //No <input> tags on this row
            if (includeBlank) {
                if (consoleOutput) {
                    console.log("A row without <input> tags was found.");
                }
                toReturn.push(inputs);
            }
        }
    });
    return toReturn;
}

function wrapGetDataFromTable() {
    //This wraper is so the getDataFromTable() function remains
    //  generic.  The wrapper merely defines which table from which to
    //  get the data,
    //  the attribute to use for unique keys = "id"
    //  to look only in the <tbody>
    //  to not include an object for the lines which are blank
    //  and output the row data to the console.
    var toReturn = getDataFromTable("guides", "id", true, false, true);
    if (typeof console.dir === "function") {
        //Make sure console.dir() exists prior to using it.
        console.log("The array of row input data objects is:");
        console.dir(toReturn); //Let us see the Object in the console for checking.
    }
    return toReturn;
}
$('#to-console-button').click(wrapGetDataFromTable);


//The rest is setup for creating the table header and rows.
//It is only for testing.

function createRowsForTesting() {
    const numRowsToCreate = 3;

    var i;
    var data = {
        amCodeOld: "amCodeOld",
        amOldPrice: "amOldPrice",
        am: "am",
        amCodeNew: "amCodeNew",
        amNewPrice: "amNewPrice"
    };

    //Create the table
    //First add a header.
    $("#guides thead").append('<tr><th>amCodeOld_H</th>' //
                              + '<th>amOldQty_H</th>'    //
                              + '<th>amOldPrice_H</th>'  //
                              + '<th>am_H</th>'          //
                              + '<th>amCodeNew_H</th>'   //
                              + '<th>amNewQty_H</th>'    //
                              + '<th>amNewPrice_H</th>'  //
                              + '<th>amS_H</th>'         //
                              + '<th>amR_H</th>'         //
                              + '<th>amCall_H</th>'      //
                              + '<th>amComm_H</th></tr>');
    //Now the body rows.
    for (i = 0; i < numRowsToCreate; i++) {
        //From stackoverflow question: http://stackoverflow.com/questions/25998929/extract-data-from-a-tablesorter-table-with-javascript
        $("#guides tbody").append('<tr><td id="amCodeOld">'+data.amCodeOld+'</td><td><input type="text" class="qty" id="amOldQty"/></td><td>'+data.amOldPrice+ //
                                            '</td><td>'+data.am+ //
                                            '</td><td>'+data.amCodeNew+'</td><td><input type="text" class="qty" id="amNewQty"/></td><td>'+data.amNewPrice+ //
                                            '</td><td><input type="checkbox" id="amS" '+ //
                                            '"/></td><td><input type="checkbox" id="amR"'+'"/></td><td><input type="checkbox" id="amCall"'+ //
                                            '"/></td><td><input type="text" id="amComm" value="'+ //
                                            '"/></td></tr>');
    }
    //*
    //Fake having the table filled in, as I am tired of entering the input
    //You have to try it without this, but with manual input in order to truly verify
    var row = 0;
    $('#guides tbody tr').each(function () {
        $(this).find('#amOldQty').val("amOldQty" + row + "_text");
        $(this).find('#amNewQty').val("amNewQty" + row + "_text");
        $(this).find('#amComm').val("amComm" + row + "_text");
        row++;
    });
    //*/
}



createRowsForTesting();

HTML：

<table class="tablesorter" id="guides">
    <thead></thead>
    <tbody></tbody>
</table>
<button type="button" id="to-console-button">print to console</button>
<!-- values to use to fill input:
amOldQty0_text
amOldQty1_text
amNewQty0_text
amNewQty1_text
amComm0_text
amComm1_text -->

注意：您的行中用于将表行添加到表中的选择器（$("#guides").append('<tr>...）可能是您的问题。它目前将您的行添加为<table>中的最后一个元素，而不是<tbody>中的最后一个元素。虽然浏览器应该对此进行补偿，但它可能在您的环境中没有这样做。试试$("#guides tbody").append('<tr>...

但是，问题似乎更有可能是<tbody>中的标题行（或没有输入单元格的行）。现在代码解释了这种可能性。

答案 2 :(得分：0)

最后的答案似乎是硬编码输入$（＆＃34; #amOldQty :)。val（）的值，并将它们作为数据通过ajax传递给我的php文件以保存信息。以下是完成的代码，以防任何人遇到类似问题：

function save() {

function GuidesSave(){
this.update();
}

GuidesSave.prototype.list = ['am','fol','tich','book','neb','ster','c','byte','ing'];

GuidesSave.prototype.update = function(){
for( var i = 0 ; i < this.list.length ; i++ ){
var guide = this.list[i];
this[ guide + 'S' ] = $("#" + guide+'S' ).is(":checked") ? 1 : 0;
this[ guide + 'R' ] = $("#" + guide+'R' ).is(":checked") ? 1 : 0;
this[ guide + 'Call' ] = $("#" + guide+'Call' ).is(":checked") ? 1 : 0;
}// end of for loop  
}
var guides = new GuidesSave();

$.ajax({
    type: "POST",
        url: "poSave.php",
        dataType: "json",
        data: ({po: $('#po').val(),isbn:$("#isbn13").val(),amOldQty:$("#amOldQty").val(),amNewQty:$("#amNewQty").val(),amS:guides.amS,amR:guides.amR, amCall:guides.amCall,amComm:$("#amComm").val(),
            folOldQty:$("#folOldQty").val(),folNewQty:$("#folNewQty").val(),folS:guides.folS,folR:guides.folR, folCall:guides.folCall,folComm:$("#folComm").val(),
            tichOldQty:$("#tichOldQty").val(),tichNewQty:$("#tichNewQty").val(),tichS:guides.tichS,tichR:guides.tichR, tichCall:guides.tichCall,tichComm:$("#tichComm").val(),
            bookOldQty:$("#bookOldQty").val(),bookNewQty:$("#bookNewQty").val(),bookS:guides.bookS,bookR:guides.bookR, bookCall:guides.bookCall,bookComm:$("#bookComm").val(),
            nebOldQty:$("#nebOldQty").val(),nebNewQty:$("#nebNewQty").val(),nebS:guides.nebS,nebR:guides.nebR, nebCall:guides.nebCall,nebComm:$("#nebComm").val(),
            sterOldQty:$("#sterOldQty").val(),sterNewQty:$("#sterNewQty").val(),sterS:guides.sterS,sterR:guides.sterR, sterCall:guides.sterCall,sterComm:$("#sterComm").val(),
            cheggOldQty:$("#cOldQty").val(),cheggNewQty:$("#cNewQty").val(),cheggS:guides.cS,cheggR:guides.cR, cheggCall:guides.cCall,cheggComm:$("#cComm").val(),
            byteOldQty:$("#byteOldQty").val(),byteNewQty:$("#byteNewQty").val(),byteS:guides.byteS,byteR:guides.byteR, byteCall:guides.byteCall,byteComm:$("#byteComm").val(),
            ingOldQty:$("#ingOldQty").val(),ingNewQty:$("#ingNewQty").val(),ingS:guides.ingS,ingR:guides.ingR, ingCall:guides.ingCall,ingComm:$("#ingComm").val(),
            qty1: $('#topqty').val(),price1: $('#topVal').html(),comp1:$('#topCo').html(),
            qty2: $('#secqty').val(),price2: $('#secVal').html(),comp2: $('#secCo').html(),
            qty3: $('#thrqty').val(),price3: $('#thrVal').html(),comp3: $('#thrCo').html()}),
        success: function(data){
        }
});
}// END OF SAVE FUNCTION

GuideSave函数循环遍历所有复选框（27个不同的复选框）以查看哪些复选框已被检查，因此我可以将它们保存为1或0，然后在调用记录时检查它们是否。

相关问题
最新问题