使用jquery，php編輯html表並將記錄保存到mysql

Question

我有一個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 } ?>

每行（tr）都有一個關聯的復選框。如果勾選復選框，我會看到一個編輯按鈕。當我點擊編輯按鈕時，所選行將變為可編輯。
所以我想在編輯按鈕上有一個功能，

 $("#modify").click(function(){
      //check if only one check box is selected.
      //make it editable.
      //save the content on pressing enter of the edited row.
    });

我經歷了一些問題，但沒有得到解決方案，因為大多數建議的插件不符合我的要求。所以，一些幫助將是有用的。
謝謝你的時間

Answer 1

這應該包括將它們從文本轉換為輸入並返回文本

     $('#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());
        });
        }
    });

Answer 2

1. 當使用復選框時，用戶假設可以選擇多個，如果您每次只需要一個，則只需使用單選按鈕

2. 我不能給你一個完整的解決方案，但我可以給你一個方向：

   首先更改標記，如下所示：

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

   定義要display:none的hidden類display:none以便隱藏所有輸入。

   用戶單擊一行后，刪除所有td元素的文本，並從所有輸入中刪除hidden類：

    $(".tableRadioBtn").click(function(){ //find the parent tr, then find all td's under it, empty the text and remove hidden class $(this).closest('tr').addClass('editable').find('td').each(function(){ $(this).text('').removeClass('hidden'); }); }); //set a keypress event to detect enter $(document).keypress(function(){ //if enter was pressed , hide input and set text if(e.which == 13) { var $editable = $('.editable'); $editable.find('input').addClass('hidden'); $editable.find('td').each(function(){ //set the text back $(this).text($(this).find('input').val()); }); //post data via ajax. } } 

請注意，我沒有測試過這段代碼，所以可能會有一些錯誤，但這是一個可能的解決方案。

更新：

為了檢測是否選中了多個復選框，請使用以下命令：

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

Answer 3

那么你想做出你的選擇，然后在選中的行上調用一個動作？

$('#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();
  });
});