使用 JQuery 和 Ajax 访问单击的单元格而不是所有单元格
Accessing clicked cell instead of all cells using JQuery and Ajax
我正在尝试在单击特定单元格后对其进行编辑。当我单击当前单元格时,它会将所有td
变成文本框。我希望只有点击的单元格才能做到这一点。如何仅访问单击的单元格?这是我当前的代码:(暂时忽略.change
函数;我还没有修复它。
$(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);
}
您当前告诉所有text
和editbox
在单击某些内容时分别隐藏和显示。您要做的是仅使与您单击的元素相关的元素隐藏并显示。
为此,您需要执行以下操作
:$(".edit_tr").click(function() {
$(this).children(".text").hide();
$(this).children(".editbox").show();
}) // your normal stuff can go here.
这将仅抓取和修改类edit_tr
的子项,并显示/隐藏所需的项目。
您可以使用this
对象。
$(this).find(".text").hide();
$(this).find(".editbox").show();
它将访问当前行,而不是td
代码的所有行。
相关文章:
- 使用jquery在单击时在单元格中输入值
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- jQuery如何获取td单元格值
- 在jQuery中输出单击单元格的内容
- jQuery根据相关复选框选择求和单元格
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 嵌套的 Jquery 每个 2D 数组错误地重复表单元格
- JQuery insertAfter();移动下一个表格单元格
- 使用jquery数据表,我可以't在不破坏FixedHead的情况下生成单元格colspan=3
- 如何使用jquery获取表单元格中子元素的值
- JQuery:如何在单元格中选择表的行,而不是表的行
- jQuery - 如果 img 在单元格内
- 存在事件的单元格的jQuery DatePicker背景色(加载时)
- jQuery从html单元格中读取值
- 如果鼠标悬停得很快,Jquery鼠标移动会错过一些单元格
- 如何让jQuery.change()引用Handontable上的单元格
- 用JQuery在廉价的excel表格上标记最后一个单元格
- 集& lt; h2>文本基于表格单元格- jQuery