使用JQuery和Ajax访问单击的单元格而不是所有单元格 [英] Accessing clicked cell instead of all cells using JQuery and Ajax

问题描述

单击后，我正在尝试编辑特定的单元格.当我单击当前一个单元格时，它会将所有td变为文本框.我只希望单击的单元格可以这样做.如何仅访问单击的单元格?这是我当前的代码:(暂时忽略.change函数；我尚未对其进行修复.

I am trying to edit a specific cell once it's clicked. When I click a cell currently it turns all the td into textboxes. I would like only the clicked cell do that. How can I access just the clicked cell? Here is my current code: (ignore the .change function for now; I haven't fixed it yet.

 $(document).ready(function()
    {
        $(".edit_td").click(function()
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();
        }).change(function()
            {
                var id=$(this).parent();
                var field=$("#input_"+ id).val();
                var text=$("#span_" + id).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();
        });

    });

这是我的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);
}

推荐答案

您当前正在告诉ALL text和editbox分别在单击某些内容时隐藏和显示.您要做的是仅使与您要隐藏和显示的元素相关的那个.

You are currently telling ALL text and editbox to hide and show respectively whenever you click something. What you want to do is ONLY make the one related to the element you are clicking hide and show.

要做到这一点，您将需要遵循以下步骤

To do that, you will want to do something along the lines of

$(".edit_tr").click(function() {
    $(this).children(".text").hide();
    $(this).children(".editbox").show();
}) // your normal stuff can go here.

这将仅捕获和修改类edit_tr的子级，并显示/隐藏所需的项.

This will grab and modify ONLY the children of the class edit_tr and show/hide the items you want.

这篇关于使用JQuery和Ajax访问单击的单元格而不是所有单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！