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. チェックボックスを使用する場合、ユーザーは複数を選択できると想定します。毎回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 に答える