2

このような質問がたくさんありますが、.ajax() 関数に入るのにも問題があります。ここで以前の問題を解決しました: JQuery と Ajax を使用してすべてのセルではなくクリックされたセルにアクセスする 私のフォローアップには応答がありませんでした。コードを再度投稿する代わりに、そこに残します (別段の指示がない限り)。とにかく私が理解するのを助けることができます 1:私の変更を反映するためにvar fieldandを取得します。および 2:変数であるためのvar textにアクセスする方法。.parent() 内でそれを設定するにはどうすればよいですか? ありがとう。idtr

編集：

これが私のスクリプトです：

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".edit_td").click(function()
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();

        }).change(function()
            {
                alert("working");
                var id=$(this).parent();
                var field=$("#input_"+ id).val();
                var text=$(this).children(".editbox").val();

                var dataString = 'id='+ id +'&field='+ field +'&text='+ text;
                //$("#first_"+ID).html('<img src="load.gif" />'); // Loading image

                if(input != text)
                {
                    $.ajax({
                    type: "POST",
                    url: "table_edit_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $("#first_"+ID).html(first);
                        $("#last_"+ID).html(last);
                    }
                    });
                }
                else
                {
                    alert('Enter something.');
                }
            });

        // Edit input box click action
        $(".editbox").mouseup(function() 
        {
            return false
        });

        // Outside click action
        $(document).mouseup(function()
        {
            $(".editbox").hide();
            $(".text").show();
        });

    });
    </script>

テーブルを表示するための私のphpは次のとおりです。

public function displayTable($table)
{
  //connect to DB
  $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

echo "<table id='table' border='1'>";   //start an HTML table

$dbtable = $table;
$fields =array();
$result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);

//fill fields array with fields from table in database
while ($x = mysqli_fetch_assoc($result))
{
    $fields[] = $x['Field'];
}

$fieldsnum = count($fields);    //number of fields in array

//create table header from dbtable fields
foreach ($fields as $f)
{
    echo "<th>".$f."</th>";
}

//create table rows from dbtable rows
$result = mysqli_query($con, "SELECT * FROM ".$dbtable);

while ($row = mysqli_fetch_array($result))
{
    $rowid = $row[$fields[0]];
    echo "<tr class='edit_tr' id='".$rowid."'>";
    foreach ($fields as $f) 
    { 
        echo "<td class='edit_td'><span id='span_".$rowid."' class='text'>".$row[$f]."</span>
        <input type='text' value='".$row[$f]."' class='editbox' id='input_".$rowid."'/> </td>"; 
    }
    $rowid++;
    echo "</tr>";
}

echo "</table>";    //close the HTML table

//close connection
mysqli_close($con);

}

自分の.change()関数に入っているかどうかさえわかりませんが、いったんデータベースIDに対応する行IDに設定したいと思いvar idます（これにより、主キーで更新クエリを実行できます）。id が次にやりたいことはvar field、選択したフィールドの列ヘッダーに設定するtdことです。これにより、データベースから選択するフィールドがわかります。次にしたいのはvar text、変更されたテキストをテキストボックスから反映して、更新クエリに送信することです。

POST今、それを table_edit_ajax.php に送信して更新クエリを実行できるようにしたいと思います。私はそれをすべて行う方法について本当に混乱しています。明らかに、私はajaxとjavascriptに非常に慣れていません。

編集: ファイル: table_edit_ajax.php

<?php
//connect to DB
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

echo 'in table_edit';

$id = mysqli_escape_String($con, $_POST['id']);
$table = "owners";
$field = $_POST['field'];
$text = mysqli_escape_String($con, $_POST['text']);
$query = "UPDATE owners SET ".$field."='".$text."' WHERE id = '".$id."'";
mysqli_query($con, $query);

//close connection
mysqli_close($con);

?>
4

1 に答える 1

2

まず第一に、入力値が変更された場合にのみ関数を実行する必要があると想定しているため、親の td ではなく、入力ボックスに変更イベントをバインドする必要があります。また、td バインディングを click から mouseup に変更し、stopPropagation 呼び出しを追加して、ドキュメントで mouseup イベントがトリガーされないようにすることもできます。

$(".edit_td").mouseup(function(e)
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();
            e.stopPropagation();

        }).children('.editbox').change(function() {

tr の ID を取得するには:

var id = $(this).closest('tr').attr('id');

テキストを取得するには:

var text = $(this).val();

フィールドを取得する最善の方法は、おそらく、列ヘッダーを表す入力ボックスにデータ属性を割り当てることです。PHP で、tds を生成しているとき:

foreach ($fields as $f) 
{ 
    echo "<td class='edit_td'><span id='span_".$rowid."' class='text'>".$row[$f]."</span>
    <input type='text' value='".$row[$f]."' class='editbox' id='input_".$rowid."' data-field='".$f."'/> </td>"; 
}

次に、Javascriptで：

var field = $(this).data('field');


さらに、クエリ文字列が正しくエンコードされていない可能性があります。データをオブジェクトとして提供するのが最善です。{id:id, field:field, text:text}、jQuery に URL エンコーディングを処理させます。

スパンの ID を に設定していることに気付きました$rowid。これを行うと、スパン ID が一意ではなくなり、後で問題が発生する可能性があります。それらに ID を与える必要がある場合は、次のようなものを試してくださいid='span_".$rowid."."-".$f."'。

于 2013-09-21T02:35:57.470 に答える