0

我有一个 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.
    });

我遇到了一些问题，但没有得到解决方案，因为大多数人建议一些不符合我要求的插件。所以，一些帮助会很有用。
谢谢你的时间

4

3 回答 3

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

​ ​</p>

于 2012-10-18T09:43:02.630 回答
1
  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>

    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}
于 2012-10-18T10:01:47.643 回答
0

所以你想做出选择，然后对选中的行调用一个操作？

$('#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();
  });
});
于 2012-10-18T10:41:55.807 回答