使用jquery、php编辑html表并将记录保存到mysql

我有一个html表格（网格），它为我显示了一些记录。我希望它是可编辑的，即用户可以编辑值并按enter键保存它们。 我的表是这样的。我使用php动态显示记录

 <a class="grayBucketBtn noMargin none" id="unpublish" href="#.">Unpublish</a>
 <a class="grayBucketBtn" id="publish" href="#.">Publish</a>
 <a class="grayBucketBtn" id="delete" href="#.">Delete</a>
 <a class="grayBucketBtn" id="modify" href="#.">Modify</a>
<?php while ()//loop through ?>
<tr>  
    <td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
    <td class="tableShape">Round</td>
    <td class="tableCarst">0.30</td>
    <td class="tableColor">j</td>
    <td class="tableClarity">SI1</td>
    <td class="tableDimension">4.35x4.33x2.62mm</td>
    <td class="tableDeptd">60.3%</td>
    <td class="tableTablePer">60.3%</td>
    <td class="tablePolish">Excellent</td>
    <td class="tableSymmetry">Excellent</td>
    <td class="tableCut">Very Good</td>
</tr>
<?php } ?>

我问了一些问题，但没有得到解决方案，因为大多数人都建议使用一些不符合我要求的插件。因此，一些帮助会很有用。

---

感谢您的时间

这应该包括将它们从文本转换为输入，再转换为文本

     $('#modify').click(function(){
  $.each($(".checkRowBody:checked"),function(){
   $.each($(this).parent('td').parent('tr').children('td:not(.tableRadioBtn)'),function() {
     $(this).html('<input type="text" value="'+$(this).text()+'">');
   });
  });
});​​​​​​​​​
    $('input[type="text"]').live('keyup',function(event) {
        if(event.keyCode == '13') { 
            // do $.post() here
        $.each($('input[type="text"]'),function(){
            $(this).parent('td').html($(this).val());
        });
        }
    });

$（'#修改'）。单击（函数（）{
$.each（$（“.checkRowBody:checked”），函数（）{
$.each（$（this）.parent（'td'）。parent（'tr'）。children（'td:not（.tableRadioBtn）），function（）{
$（this.html（“”）；
});
});
});​​​​​​​​​
$（'input[type=“text”]”）。实时（'keyup'，函数（事件）{
如果（event.keyCode=='13'{
//在此处执行$.post（）
$.each（$（'input[type=“text”]”），函数（）{
$（this.parent（'td'）.html（$（this.val（））；
});
}
});

​ ​

使用复选框时，用户假定可以选择多个复选框，如果每次只需要一个复选框，则只需使用单选按钮即可

我不能给你一个完整的解决方案，但我可以给你一个方向：

首先更改标记，如下所示：

<tr>  
<td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
<td class="tableShape">Round<input class="hidden" value="Round" name="shape"/></td>
<td class="tableCarst">0.30 <input class="hidden" value="0.30" name="tableCarst"/></td>
...
//Do the same for all the columns
</tr>

请注意，我还没有测试这段代码，所以可能会有一些错误，但这是一个可能的解决方案

更新：

要检测是否选中了多个复选框，请使用以下选项：

if ($(':checked').length > 1){//do something}

---

那么您想做出选择，然后对选中的行调用操作

$('#delete').click(function() {
  $.each($('.checkRowBody:checked').parent('td').parent('tr'),function() {
    // probably want to carry out a $.post() here to delete each row using an identifier for the rows related record. 
   //I suggest applying an id or other attribute to the tr element and using that to pass a value with your $.post() data.
    $(this).hide();
  });
});

---

感谢您的及时回复，但复选框处于循环中，因此所有复选框都具有相同的ID。我有按钮来执行操作，例如修改、删除等。我想选择一行（使用复选框），然后对所选行执行操作。你能指导我实现这个目标吗？编辑了同样的问题你不应该使用重复的ID，考虑使用一个递增变量来让它们成为唯一的，并使用类来检查点击ToGrEGER。实际上，我一次只使用一个记录。只有我允许多个删除给用户。所以我没有改变ID。不能用我的当前场景来完成。我看到Gmail也一样。如果我们选择一个邮箱，它会给出。删除选项等。即使我们选择多个，我们也可以删除tham。谢谢@David Michael Harrison的帮助是的，请记住我已经更改了按钮，比如如果用户选择了多行，我会隐藏除删除之外的所有按钮。（类似于GMAIL）。因此，他可以删除多行，但不能编辑所有行。您现在可以更新我的方案的答案吗？不是精确的解决方案，而是类似于此的路线图。感谢您更新了我的答案，说明如何查看是否只选中了一行，但如何才能在网格中选中哪一行，以便我只更改特定的行？抱歉，这听起来很愚蠢，但对jquery来说是新的！：p您不需要，如果您查看我发布的代码示例，我会将click事件放在radioButton类上，这样通过使用

this

单词，您可以获得单击的确切行。但是我的情况是，如果我选中复选框，我会得到一个编辑按钮。当我单击编辑按钮时，所选行将变为可编辑行。我不能直接在复选框上单击。我必须在编辑按钮或删除按钮等上进行操作。是的，类似于编辑。我如何才能获得所选框进行处理？即编辑或删除哪一行？正如我在评论中所说，将id=“uniqueid”或attr rowid=“uniqueid”应用于可从.each（）检索的tr元素函数

.checkRowBody:checked

应该给我当前选择的行，对吗？因此，如果我想编辑它，我可以使用我的编辑按钮click方法中包含的您以前的答案逻辑。例如：

$（“#修改”）。单击（函数（）{if（$（this）.is（':checked'）{$.each（$（'td:not（.tableRadioBtn，.tableCert））{$（this.html（'；）；}其他{$.each（$（$（'td:not tableRadioBtn））），函数（）{$（this）.text（$（this）.children（'input'）.val（）；}）；}}}}）；

我相信这应该行得通！！：P如果我错了请更正，而不是

$（this）

我可以使用

$（':checkbox:checked'））

如果我正确理解jquery！：PSort of，单击#modify（修改），我们必须迭代每个：checked（选中）复选框输入，并将文本交换为输入值。

if ($(':checked').length > 1){//do something}

$('#delete').click(function() {
  $.each($('.checkRowBody:checked').parent('td').parent('tr'),function() {
    // probably want to carry out a $.post() here to delete each row using an identifier for the rows related record. 
   //I suggest applying an id or other attribute to the tr element and using that to pass a value with your $.post() data.
    $(this).hide();
  });
});