Javascript從數據庫中刪除/淡出表格行

首先，我不知道如何指定標題對不起。Javascript從數據庫中刪除/淡出表格行

我有一個相當凌亂的代碼，但基本上這是它應該做的。按下刪除按鈕時，整個tr應該消失。目前只有最後一個帶有按鈕的td纔會消失。我試圖更換一個在

$('a').click(function(){

與tr。但是，當我這樣做的行將消失，但它不會刪除數據庫中。有誰知道溶劑？在此先感謝

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>

我的進程文件

<?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); 
?>

來源

2013-04-26 Frank

我沒有看到你的代碼 – smerny 2013-04-26 14:57:14

任何按鈕打開你的瀏覽器調試器（內置在Chrome和Firebug中），看看''發生了什麼'$ .post''應該被髮送。也許這是一些基本的東西，比如錯誤的路徑或參數。 – mzedeler 2013-04-26 15:02:05

以下是Firebug中的操作方法：https：//getfirebug.com/network，以下是Chrome中的操作方法：https：//developers.google.com/chrome-developer-tools/docs/network – mzedeler 2013-04-26 15:02:59

當你發現a的父母，你正在尋找td。這可以解釋爲什麼你看到td消失而不是tr。

出於這個原因，而不是parent()，使用closest("tr")找到該行：

//var parent = $(this).parent(); 
var parent = $(this).closest("tr");

然後效果基本show /刪除parent ...你也可以再要重新命名parent喜歡的東西parentRow。

至於刪除數據庫中的數據。看起來你的代碼試圖找到a的id屬性，所以你需要確定並且a中有一個id屬性，該屬性與你想從數據庫中刪除的ID相匹配......類似<a href="#" id="<?php echo $row['id']; ?>" ... />

另一種解決方案，如果你希望能夠到該行的任何地方點擊（既然你提到嘗試它），你可以這樣做：

$('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(); 
       }); 
      }); 
     }); 
    });

來源

2013-04-26 15:06:28 smerny

另請注意：您應該比單純的'$（「a」）'更具體，因爲你可能有其他的鏈接，你希望人們能夠在沒有運行這個功能的情況下點擊。 – smerny 2013-04-26 15:23:59

謝謝，你var父= $（this）.closest（「tr」）;訣竅。我也把a變成了一個變量:)。謝謝 – Frank 2013-04-26 16:10:27

我不確定把'a'變成變量是什麼意思，所以我只是想確保你明白我的意思。你可以在'a'上放一個類，你想要點擊它來刪除一行，比如''，然後使用像' $（「a.hidesRow」）'。如果您確定表中沒有鏈接，您不希望發生這種情況，那麼您也可以檢查它是否在表格單元格中，例如'$（「td a」）' – smerny 2013-04-26 17:52:49

Javascript從數據庫中刪除/淡出表格行

回答

相關問題