1

我是 jQuery 的初学者，并且遇到了这个问题：

我有这张桌子：

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3" class="xtra"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>

我想隐藏/取消隐藏特定的行：

$(document).ready(function() {
    $("td[colspan=3]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

直接使用这种方法有效，但我使用 AJAX 加载此表 HTML，因此选择器不起作用。我应该如何修改我的选择器？

我正在用这个加载这个 HTML：

$.get('/tab.html',function(data){
        $('#tabContentBox').html(data);
                 ...
                 ...
}
4

5 回答 5

2

委派活动是您需要做的

$('#tabContentBox').on("click","table",function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ( $target.closest("td").attr("colspan") > 1 ) {
        $target.slideUp();
    } else {
        $target.closest("tr").next().find("p").slideToggle();
    }                    
});
于 2013-01-24T06:30:13.593 回答
1

试试这个 ：

$(document).ready(function() {
$("td[colspan=3]").find("p").hide();
$(document).on('click', 'table', function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ( $target.closest("td").attr("colspan") > 1 ) {
        $target.slideUp();
    } else {
        $target.closest("tr").next().find("p").slideToggle();
    }                    
  });
});
于 2013-01-24T06:28:39.930 回答
1

注意：所有这些示例都包含一个缺陷，当您在最小化的情况下双击它时，它会导致展开部分消失。

缺陷来自以下代码： if ( $target.closest("td").attr("colspan") > 1 ) {

于 2013-09-08T22:47:54.290 回答
0 
$.get('/tab.html' , function(data){$('#tabContentBox').html(data)})
.done(function(data) {
   $(#tabContentBox).on("click","table",function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
    $target.slideUp();
} else {
    $target.closest("tr").next().find("p").slideToggle();
}

}); });

于 2013-01-24T06:32:32.660 回答
0

如何对下表做同样的事情。单击应隐藏详细信息表的位置。

@model 元组

@{ ViewBag.Title = "你的活跃工作"; }

 <h2>Tool tracker</h2>

 <table id= "master">
 <tr style="background-color:Blue">
 <td></td>
 <td><font color="white">ScanCode</font></td>
 <td><font color="white">Description</font></td>
 <td><font color="white">Type</font></td>
 <td><font color="white">Date Out</font></td>
 <td><font color="white"> Date In</font></td>
 <td><font color="white">Responsible Employee</font></td>
 <td><font color="white">Charge Type</font></td>
 <td><font color="white">Qty</font></td>
 <td><font color="white">Rate</font></td>
 <td><font color="white">Charges to Date</font></td>
 <td><font color="white">Replacement Charges</font></td>
 <td><font color="white"> Status</font></td>
 </tr>

 @foreach (var j in Model.Item1)
 {
     //Master table
    <tr style="background-color:#ADD8E6">
    <td><b>+</b></td>
    <td><p><font color="black">@j.JobId</font></p></td>
    <td colspan="8"><p><font color="black">@j.Name-@j.ManagerName</font></p></td>
    <td><p><font color="black">@j.ChargesToDate</font></p></td>
    <td><p><font color="black">@j.ReplacementCharges</font></p></td>
    <td><p><font color="black">@j.JobStatus</font></p></td>
    </tr>
     //details table

     foreach (var d in Model.Item2.Where(t => t.JobId == j.JobId))
     {   <tr><table>
         <tr id = "details">
         <td colspan="0"></td>
         <td colspan="0">@d.Scancode</td>
         <td colspan="0">@d.Description</td>
         <td colspan="0">@d.Type</td>
         <td colspan="0">@d.DateOut</td>
         <td colspan="0">@d.DateIn</td>
         <td colspan="0">@d.ResponsibleEmployee</td>
         <td colspan="0">@d.ChargeType</td>
         <td colspan="0">@d.Quantity</td>
         <td colspan="0">@d.Rate</td>
         <td colspan="0">@d.ChargesToDate</td>
         <td colspan="0">@d.ReplacementCharges</td>
         <td colspan="0"></td>
         </tr></table></tr>
     }
 }

 </table>
于 2013-05-09T20:57:20.957 回答