我目前正在尝试从 jQuery 中的对话框中删除表格行，但是每当我尝试删除该行时，对话框会立即关闭。目前 PHP 页面为对话框生成表和行。现在要注意，此代码在没有 PHP 页面调用的情况下工作得非常好，但是通过添加 PHP 方面，对话框无法保持打开并删除表格行。
我不太确定如何解决这个问题，因为我对 jQuery 的经验非常有限，而且我无法在互联网上找到类似问题的东西。欢迎任何指示和建议。最终目标是能够从对话框表单发布到数据库，任何帮助将不胜感激。
代码已被简化，因此不使用 mysql 查询，但最终我希望能够将无序列表的数据传递到 php 页面以构建动态查询并允许用户在此后提交表单。
下面是分成两个文件的代码......
- PHP
<script>
function showTable(str, elementid, page)
{
if (str=="")
{
document.getElementById(elementid).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(elementid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",page+"?q="+str,true);
xmlhttp.send();
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
width: 'auto',
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$('span.delete').on('click', function() {
$(this).closest('tr').find('td').fadeOut(1000,
function(){
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<input type=button id="opener" value="PRESS BUTTON!" onclick="showTable('NOTHING', 'dialog', '2pass.php')">
<div id="dialog">
</div>
</body>
- 通过.php
<?php
echo "<form method = 'post'>";
echo "<table border='1' name='testTable'>
<thead>
<tr>
<th>Name</th>
<th>Notes</th>
<th>Delete</th>
</tr>
</thead>
";
echo "<tbody>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "</tbody>";
echo "</table>";
echo "</form>";
?>