javascript - 使用 javascript 从 tablesorter 表中提取数据

Question

我有一个使用 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 等的输入的值，以及不同的复选框。我有“下一个”、“上一个”和“打印”按钮，当单击按钮时，我尝试调用一个名为 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(){...

它甚至没有给我“正在搜索”的警报。如何从该表中获取所有数据以便保存？看来我正在尝试的一切都应该有效。

Answer 1

如果您的用户使用 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对于该列。