Question

我是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);
                 ...
                 ...
}

Answer 1

委派活动是您需要做的事情

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

Answer 2

试试这个：

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

Answer 3

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

缺陷来自以下代码： if（$ target.closest（“td”）。attr（“colspan”）＆gt; 1）{

Answer 4

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

}）; }）;

Answer 5

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

@model Tuple

@ {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>

在AJAX上使用jQuery选择器返回数据

5 个答案: