使用JQuery和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.