Javascript从数据库中删除/使表行消失
[英]Javascript deleting from database/fading the table row away
问题描述
First of all i didn't know how to specify the title sorry for that. 
首先，我不知道如何指定标题。
I have a pretty messy code but basically this is what it should do. 我的代码很乱，但是基本上这是应该做的。 When the delete button is pressed the whole tr should fade away. 当按下删除按钮时，整个tr应该消失。 Currently only the last td with the button in it fades away. 当前只有带有按钮的最后一个td消失。 I tried replacing the a at 我尝试替换一个
$('a').click(function(){
with tr. 与tr。 But when i do that the row will dissapear but it wont delete in the database. 但是当我这样做时，该行将消失，但不会在数据库中删除。 Does anyone know a sollution? 有人知道解决方案吗？ Thanks in advance 提前致谢
ps: Sorry for my english and the badly displayed coded. ps：对不起，我的英语和显示不佳的代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('a').click(function(){
var del_id = $(this).attr('id');
var parent = $(this).parent();
$.post('delete.php', {id:del_id},function(data){
parent.slideUp('slow', function() {$(this).remove();});
});
});
});
</script>
</head>
<body>
<div id="content1"></div>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th class="nosort"><h3>ID</h3></th>
<th><h3>Merk</h3></th>
<th><h3>Type</h3></th>
<th><h3>Imei</h3></th>
<th><h3>Serienummer</h3></th>
<th><h3>Kleur</h3></th>
<th><h3>Locatie</h3></th>
</tr>
</thead>
<tbody>
<?php
include 'Includes/database_connection.php';
$sql = "select *
FROM units";
$result = mysql_query($sql,$con);
while($row = mysql_fetch_assoc($result)){
echo "<tr>";
echo "<td>{$row['id']}</td><td>{$row['merk']}{$row['type']}{$row['imei']}{$row['serienr']}{$row['kleur']}{$row['locatie']}<a href=\"javascript:return(0);\" id=\"{$row['id']}\"><img src=\"images\delete_icon.gif\" height=\"12px\" width=\"12px\"/></a></td>";
echo "</tr>";
}
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['merk']."</td>";
echo "<td>".$row['type']."</td>";
echo "<td>".$row['imei']."</td>";
echo "<td>".$row['serienr']."</td>";
echo "<td>".$row['kleur']."</td>";
echo "<td>".$row['locatie']."</td>";
?>
<td><a href="#" onclick="window.open('test1.php?id=<?php echo $row['id']; ?>', 'newwindow', 'width=400, height=600'); return false;"><img src="images/gtk-edit.png"/></a></td>
<?php
echo "</tr>";
}
?>
</tbody>
</table>
<div id="controls">
<div id="perpage">
<select onchange="sorter.size(this.value)">
<option value="5" selected="selected">5</option>
<option value="10" >10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Weergeven per pagina</span>
</div>
<div id="navigation">
<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div id="text">Pagina <span id="currentpage"></span> van <span id="pagelimit"></span></div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table",1);
</script>
</div>
</body>
And my process file 还有我的过程文件
<?php
include 'Includes/database_connection.php';
$id = $_POST['id'];
$safeid = mysql_real_escape_string($id);
$query = mysql_query("delete from units where id=$id", $con);
?>
1 个解决方案
解决方案1
0 已采纳 2013-04-26 15:06:28
When you find the parent of the a , you are finding the td . 当你找到的父母a ，你发现了td 。 This would explain why you are seeing the td disappear instead of the tr . 这可以解释为什么您看到td而不是tr消失了。
For this reason, instead of parent() , use closest("tr") to find the row: 由于这个原因，而不是parent() ，而是使用closest("tr")查找行：
//var parent = $(this).parent();
var parent = $(this).closest("tr");
Then slideUp/remove parent ... and you might also then want to rename parent to something like parentRow . 然后slideUp / remove parent ...，然后您可能还想将parent重命名为parentRow 。
As for deleting the data in the database. 至于删除数据库中的数据。 It appears that your code is trying to find the id attribute of the a , so you'll want to make sure and have an id attribute in a that matches the id you'd want to delete from the db... something like <a href="#" id="<?php echo $row['id']; ?>" ... /> 看来，你的代码试图找到id的属性a ，所以你要确保并有一个id属性， a的ID匹配你会希望从数据库中删除...像<a href="#" id="<?php echo $row['id']; ?>" ... />
Another solution , if you want to be able to click anywhere in the row (since you mentioned trying it) you could do this: 另一种解决方案 ，如果您希望能够单击行中的任何位置（因为您已经提到过尝试这样做），则可以执行以下操作：
$('document').ready(function () {
$('tr').click(function () {
//this assumes id will always be within the first td
//you could also put classes on your td's to identify
var del_id = $(this).find("td").first().text();
var row = $(this);
$.post('delete.php', {
id: del_id
}, function (data) {
row.slideUp('slow', function () {
row.remove();
});
});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.