0

行の最後にある編集ボタンをクリックすると、各セルを入力フィールドにするテーブルとスクリプトがあります。編集したデータをAjaxで提出したいのですが、編集後に入力欄を通常のテキストに戻したいです。

コードは次のとおりです。

//// EACH CELL INTO INPUT FIELD ////
$(document).ready(function(){
      $(".edit").click(function(){
          var tr = $(this).closest("tr");

          tr.find(".td").each(function(){
              var name = $(this).attr("title");
              var value = $(this).html();
              var input = "<input type='text' name='"+name+"' value='"+value+"' />";
              $(this).html(input);
          });

          var submit = "<input type='button' name='Submit' value='Submit' />";
          tr.find(".button").html(submit);

      });
});
//// END ////

//// ONCLICK SUBMIT SEND DATA VIA AJAX ////
$(".button input[type=button]").live('click', function() {
  var data = $('form#muuda').serialize();
  // post data using ajax                                                                                                                                                                         
  $.ajax({
    type: "POST",
    url: "index.php?leht=kast",
    data: data,
    success: function(data) {
      alert("Andmed muudetud"); // show response from the php script.                                                                                                                                          
    }
  });
});
//// END ////

HTML:

<form id="muuda" method="post" action="#">
    <table>

<?PHP
$sql="SELECT * FROM nimed";
$result = mysql_query($sql)or die(mysql_error());
  WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC))  {
        echo '<tr class="row">';
            echo '<td class="td" title="id">'.$row["id"].'</td>';
            echo '<td class="td" title="eesnimi">'.$row["eesnimi"].'</td>';
            echo '<td class="td" title="perenimi">'.$row["perenimi"].'</td>';
            echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
        echo '</tr>';
  }
?>

    </table>
</form>

プレビューの画像は次のとおりです。

https://lh6.googleusercontent.com/-vVnabdBzFlA/UBjTRhifpWI/AAAAAAAACAo/RvAgpi7x2ik/s488/Ajax%2520submit.jpg

4

1 に答える 1

0

テキストから入力ボックスに変換するために使用するプロセスを逆にすることができます。

tr.find('.td').each(function () {
    var value  = $(this).find('input').val();
    $(this).html(value);
});

もちろん、変数trを正しい行に設定する必要があります。

于 2012-08-01T07:18:42.777 に答える