[英]How can I edit the results of a MySQL query inline using AJAX or something similar?
我正在使用 PHP 使用<div>
将由 MySQL 查询生成的表注入到混合 HTML/PHP 文件中。 <div>
在index.php
中声明,如下所示: <div id="searchdiv"></div>
。
<div>
的内容是这样生成的:
(1) 创建搜索框:
<form id="searchform">
<td class="master">Codigo o nombre cliente: <input type="text" name="box" onkeypress="return noenter()" /><input id="srchsubmit" type="submit" value="Buscar" onclick="showUser(this.form['box'].value);return false;" /><br /></td></form>
(2) 执行 JavaScript:
function showUser(str){
if (str==""){
document.getElementById("searchdiv").innerHTML="";
return;
}
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("searchdiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();
}
(3) 构造结果注入<div>
:
<?php
// Fetch the string from the search box
$q=$_GET["q"];
// Connection settings
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "scorecard";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Fetch data
$sql="SELECT * FROM scoreboard WHERE codcliente = '".$q."' OR lower(nombre) LIKE '%".strtolower($q)."%'";
$result = mysql_query($sql);
if(mysql_num_rows($result) == 0){
echo '<div align="center" style="background-color:#CCCCCC; font-weight:bold; color:#C0504D;">Record no existe. <input id="srchcreate" type="button" value="Crear" /></div>';
return;
}
//echo $result;
// Construct the table
echo "<table id='srchtable' class='srchtable'>";
// Construct the array
while($row = mysql_fetch_array($result)){
echo "<tr>";
echo "<td align='center'>" . $row['codcliente'] . "</td>";
echo "<td align='left'>" . $row['nombre'] . "</td>";
// echo "<td align='center'>" . $row['ejecutivo'] . "</td>";
// echo "<td align='center'>" . $row['banca_as400'] . "</td>";
// echo "<td align='center'>" . $row['banca_real'] . "</td>";
// echo "<td align='right'>" . $row['ingresos'] . "</td>";
echo "<td align='center'>" . $row['ciiu'] . "</td>";
// echo "<td align='center'>" . $row['division'] . "</td>";
echo "<td align='left'>" . $row['actividad'] . "</td>";
echo "<td align='center' class='{$row['riesgo_industria']}'>" . $row['riesgo_industria'] . "</td>";
echo "<td align='center' class='{$row['riesgo_cliente']}'>" . $row['riesgo_cliente'] . "</td>";
echo "<td align='center'>" . $row['fecha'] . "</td>";
echo "<td align='center'>" . $row['analista'] . "</td>";
echo "<td align='center'>" . "<input id='edit' type='button' value='Editar' onclick='' />" . "</td>";
echo "</tr>";
}
echo "</table>";
?>
结果看起来像这样: Screenshot 。 我的问题是,当我单击“Editar”(编辑)按钮时,如何使这些字段可在线编辑? 也许在<td>
的前面放置一个选项输入到 select 要编辑哪一行? 编辑后,如何将更改插入回 MySQL? 谢谢!
对于您的第一个问题,您不需要复选框。 如果你不介意 jquery,你可以使用
$(this).closest('tr')
获取单击的编辑按钮所在的行。然后,您可以将要编辑的每个单元格的内容替换为输入。 用表单标签包裹表格并使用 ajax 提交。
让你开始的东西......
$(document).ready(function(){
$(".edit").click(function(){
var tr = $(this).closest("tr");
var submit = "<input type='submit' name='Submit' value='Submit' />";
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);
});
tr.find(".button").html(submit);
});
});
假设您的表格/表格看起来像:
<form id="form" name="form" action="#">
<table>
<tr class="row">
<td class="td" title="first_name">John</td>
<td class="td" title="last_name">Smith</td>
<td class="button" title="button"><button class="edit">Edit</button></td>
</tr>
<tr class="row">
<td class="td" title="first_name">Roger</td>
<td class="td" title="last_name">Jones</td>
<td class="button" title="button"><button class="edit">Edit</button></td>
</tr>
</table>
</form>
然后,您需要执行 ajax 提交并删除输入/恢复为文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.