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 のコードに起因します: if ( $target.closest("td").attr("colspan") > 1 ) {

于 2013-09-08T22:47:54.290 に答える
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 に答える
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 に答える