Я новичок в 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();
        }                    
    });
});

Использование этого подхода напрямую работает, но я загружаю эту таблицу HTML, используя AJAX, и, таким образом, селекторы не работают. Как мне изменить мои селекторы?

Я загружаю этот HTML с этим:

$.get('/tab.html',function(data){
        $('#tabContentBox').html(data);
                 ...
                 ...
}
1
user2006190 24 Янв 2013 в 10:26

4 ответа

Лучший ответ

Делегирование мероприятия - это то, что вам нужно сделать

$('#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();
    }                    
});
2
Jai 24 Янв 2013 в 06:35

Попробуй это :

$(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();
    }                    
  });
});
1
Iswanto San 24 Янв 2013 в 06:28

ПРИМЕЧАНИЕ. Все эти примеры содержат дефект, который приводит к исчезновению расширенного раздела при двойном щелчке по нему, когда он свернут.

Дефект в этом коде, если: if ($ target.closest ("td"). Attr ("colspan")> 1) {

1
user2759838 8 Сен 2013 в 22:47

Как можно сделать то же самое для приведенной ниже таблицы. где клик должен скрыть таблицу подробностей.

@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>
0
user1732637 9 Май 2013 в 20:57