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

当使用复选框时，用户假设可以选择多个，如果您每次只需要一个，那么只需使用单选按钮

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

首先更改标记：

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

将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();
  });
});

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

3 个答案: