1

だから、私は以下のようなテーブルを持っています：

<table border='1' id="table" style="color: #004080;">
  <tr>
    <th >EmpID</th>
    <th >EmpName</th>
    <th >EmpDesignation</th>
    <th >Edit</th>
    <th >Del</th>
    </tr>

   <?php
        foreach($result->result() as $row)
        { 
   ?>          
            <tr  >
                <td >
                    <?php 
                        echo $row->EmpID
                    ?>
                </td >
                <td  >
                    <?php
                        echo $row->EmpName;
                    ?>
                </td> 
                <td >
                    <?php
                        echo $row->EmpDesignation;
                    ?>
                </td>
                <td >
                   <img src="editicon.png" id="Edit" /> 
                </td>
                <td >
                    <img src="Delicon.png" onclick="Del(this)" /> 
                </td>
         </tr>  
    <?php 
        }
    ?>
</table>

今私がやりたいことは、4列目の各行に配置したEdit Imageのクリックイベントに対してjQuery関数を書くことです

アラートを正常にポップアップ表示しましたが、対応する jQuery で、クリックされた編集イメージ (特定の行、this.row など) に対して位置 2 と 3 の tds をテキスト ボックスに変換して、それらの値を変更できるようにしたいです
。以下に与えられる

$('#Edit').live('click', function () {
    alert('inside edit image click func');      
    // write Jquery Func here
});

ありがとうございました ：）

4

5 に答える 5

1

HTML IDは一意である必要があるため、idを持つ要素を複製することはできません#Edit。代わりにクラスにしますclass='Edit'：

$(document).ready(function() {

    /* Older version: $('#table').delegate('.Edit', 'click', function() { */
    $('#table').on('click', '.Edit', function() {
        $(this).closest('tr').find('td:eq(1), td:eq(2)').each(function() {
            // replace the existing text with a textbox containing that text
            var existingVal = $(this).text();
            $(this).html('<input type="text" value="' + existingVal + '" >');
        });
    });


    // when the user is finished editing, change the value and remove the textbox
    /* Older version: $('#table').delegate('td input', 'focusout', function() {*/
    $('#table').on('focusout', 'td input', function() {
        $(this).parent().html( this.value );
    });
});

.live()非推奨です。.on()代わりに使用していることに注意してください

画像のHTMLを次のように変更する必要があります。

<img src="editicon.png" class="Edit" />
于 2012-08-17T06:16:28.880 に答える
1

これを行うには、次の 2 つの方法があります。

  1. jQuery を使用して td 値を入力に置き換えるか、または
  2. 入力がすでにそこにあります（ただし、非表示）。

ページが大きくなりますが、方法 2 の方が高速で安定しています。それはこのように動作します：

CSS:

.inputs { display: none; }

Javascript:

$('.edit').click(function(){
    $(this).parent('tr').find('.values').hide();
    $(this).parent('tr').find('.inputs').show();
});

PHP:

<table><?
foreach ($result->result() as $row) {
echo '
    <tr id="row_'. $row->id .'">
        <td><span class="values">'. $row->EmpID .'</span>
            <span class="inputs"><input name="EmpID" value="'. $row->EmpID .'"></span>
            </td>
        <td><span class="values">'. $row->EmpName .'</span>
            <span class="inputs"><input name="EmpName" value="'. $row->EmpName .'"></span>
            </td>
        <td><img class="edit" src="editicon.png"></td>
        <td><img class="del" src="delicon.png"></td>
    </tr>';
?></table>

次に、別の jQuery 呼び出しを使用して .inputs の変更を探し、.inputs から行 ID を取得し、<tr>ajax を介してデータベースを更新します。

于 2012-08-17T06:29:06.257 に答える
0

あなたに答えて

位置2と3のtdsをテキストボックスに変えて、値を変更できるようにしたい...

Jeditableプラグインを使用してみてください。デモページは、これがあなたのために働くかどうかあなたにアイデアを与えるはずです。

于 2012-08-17T06:24:36.020 に答える
0

まず、メソッドではなく.on()メソッド (または.delegate()、特に 1.7 より前の jQuery の場合) を使用し.live()ます。後者は廃止されたためです。

次に、編集アイコンに ID を使用しないでください。id="Edit"と言うより、そう言う変化ですclass="Edit"。あなたのコードは、現状では複数の ID を作成しています。これは HTML DOM に違反しており、ブラウザで予期しない動作を引き起こします。

<table border='1' id="table" style="color: #004080;">
  <tr>
    <th>EmpID</th>
    <th>EmpName</th>
    <th>EmpDesignation</th>
    <th>Edit</th>
    <th>Del</th>
  </tr>

  <?php foreach($result->result() as $row) { ?>          
    <tr>
      <td><?php echo $row->EmpID ?></td> 
      <td><?php echo $row->EmpName; ?></td> 
      <td><?php echo $row->EmpDesignation; ?></td>
      <td><img src="editicon.png" class="Edit" /></td>
      <td><img src="Delicon.png" onclick="Del(this)" /></td>
    </tr>  
  <?php } ?>

</table>

とはいえ、クリックされたアイテムはわかっているので、 までたどりtr、関連するまでたどり、td内の html を入力ボックスに変更します。td

$('#table').delegate('.Edit','click', function () {
    $(this).parent('tr').find('td:eq(1), td:eq(2)').each(function () {
        $(this).html("<input type='text' value='" + $(this).html() + "' />");
    }
});

これにより、その行の列が入力ボックスに変更され、セルに既に存在する情報が事前に入力されます。

于 2012-08-17T06:25:47.720 に答える
0

これを試して

$('#Edit').click(function () {
  $(this).parent().parent().find('.editable').each(function(){

    var currentVal = $(this).text();
    $(this).html("<input type='text' value='"+ currentVal +"'>")
  });
});

フィドルをチェックする

于 2012-08-17T06:50:57.167 に答える