[英]How to hide the previous row in JavaScript?
當我單擊第一行時,它顯示輸出。
當我單擊第二個按鈕時,它也顯示了,但第一行未隱藏。
它仍在顯示。
它應該發生在所有行上,而不僅僅是前兩行。
JavaScript代碼:
$('#table_struct tr').click(function() {
var $this = $(this);
var offset = $this.offset();
var height = $this.height();
var order_id = $this.data('order_id');
$('.menu').remove();
$.get('getuser.php?order_id=' + order_id, function(table) {
$('#showmenu').append(table);
$('.menu').css({
right: offset.right,
top: offset.top+height
});
});
});
index.php
include "db.php";
$query = "select * from orders_list";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> order_id </td>
<td align='center' style='font-weight:bold'> customer_name </td>
<td align='center' style='font-weight:bold'> no_of_pack </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> Weight </td>
<td align='center' style='font-weight:bold'> payment mode </td>
</tr>";
while($row = mysql_fetch_array($result))
{
$order_id = $row['order_id'];
$_SESSION['order_id'] = $order_id;
echo "<tr height='20' data-order_id='".$row['order_id']."'>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['order_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['number_of_pack']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['weight']."</td>
<td align='center'>".$row['payment']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
if(!mysql_close($con))
{
echo "failed to close";
}
getuser.php
include "db.php";
$order_id = intval($_GET['order_id']);
$query = "select * from orders_details where order_id=$order_id";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div class='menu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='650' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Product </td>
<td align='center' style='font-weight:bold'> Quantity </td>
<td align='center' style='font-weight:bold'> Sku </td>
<td align='center' style='font-weight:bold'> Price </td>
<td align='center' style='font-weight:bold'> Total </td>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr height='30'>
<td align='center'>".$row['product']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['sku']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['total']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
jQuery有一個先前的選擇器...也許您可以使用它? 從jquery文檔頁面獲取的代碼: $( "li.third-item" ).prev().css( "background-color", "red" );
基本上,您可以這樣做: $('something').click(function() { $(this).prev().hide(); })
或$(this).parent().prev().hide();
我不完全確定PHP的工作方式,但是如果動態創建您正在制作的表(在運行JavaScript之后),則您的jquery選擇器將無法正常工作。
$('#table_struct tr').click(function()
使用jquery選擇表的容器,然后像這樣應用!
$('#tableContainer').on('click', 'tr', function(){/*things*/})
通過將單擊事件綁定到任何給定孩子的“容器”上,您知道即使將內容添加到pageLoad之后的容器中,元素也將是可單擊的,因為事件綁定到了父對象,而不是元素本身。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.