javascript - 具有需要切换 jQuery 的隐藏行的表

Question

我正在构建一个基本的表结构，其中有几个隐藏行，这些行将填充在行下方，并使用触发器来切换它们。我似乎无法让我的切换触发器工作。这些行都将根据数据库中的数据量在 C# 中动态创建。因此，我尝试使用基于计数器的触发器来查找附加到触发器链接的行。任何帮助将不胜感激。这是我的代码(P.S.忽略内联样式，这只是我让触发器工作的基础，并将在字符串变量中正确重建它。):

<table border="0">
    <tr style="background-color:#fff;"><td width="120px" align="left">This is Category</td><td width="370px" align="left">Criteria for achieving element off service quality is listed here. Additional Details click Errors. Criteria for achieving element off service quality is listed here.</td><td width="50px" align="center"><a id="a1" href="#">5</a></td><td width="150px" align="center">Feedback</td><td width="100px" align="center">Contact Id</td></tr>            
        <tr class="rpt28_row1" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">12121</td></tr>
        <tr class="rpt28_row1"style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">21354</td></tr>
        <tr class="rpt28_row1" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">212345</td></tr>
        <tr class="rpt28_row1" style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">32456</td></tr>
    <tr style="background-color:#F1F5FA;"><td width="120px" align="left">This is Category</td><td width="370px" align="left">Criteria for achieving element off service quality is listed here. Additional Details click Errors. Criteria for achieving element off service quality is listed here.</td><td width="50px" align="center"><a id="a2" href="#">5</a></td><td width="150px" align="center">Feedback</td><td width="100px" align="center">Contact Id</td></tr>
        <tr class="rpt28_row2" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">12121</td></tr>
        <tr class="rpt28_row2"style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">21354</td></tr>
        <tr class="rpt28_row2" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">212345</td></tr>
        <tr class="rpt28_row2" style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">32456</td></tr>
    <tr style="background-color:#fff;"><td width="120px" align="left">This is Category</td><td width="370px" align="left">Criteria for achieving element off service quality is listed here. Additional Details click Errors. Criteria for achieving element off service quality is listed here.</td><td width="50px" align="center"><a id="a3" href="#">5</a></td><td width="150px" align="center">Feedback</td><td width="100px" align="center">Contact Id</td></tr>
        <tr class="rpt28_row3" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">12121</td></tr>
        <tr class="rpt28_row3"style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">21354</td></tr>
        <tr class="rpt28_row3" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">212345</td></tr>
        <tr class="rpt28_row3" style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">32456</td></tr>
    <tr style="background-color:#F1F5FA;"><td width="120px" align="left">This is Category</td><td width="370px" align="left">Criteria for achieving element off service quality is listed here. Additional Details click Errors. Criteria for achieving element off service quality is listed here.</td><td width="50px" align="center"><a id="a4" href="#">5</a></td><td width="150px" align="center">Feedback</td><td width="100px" align="center">Contact Id</td></tr>
        <tr class="rpt28_row4" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">12121</td></tr>
        <tr class="rpt28_row4"style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">21354</td></tr>
        <tr class="rpt28_row4" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">212345</td></tr>
        <tr class="rpt28_row4" style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">32456</td></tr>
    <tr style="background-color:#fff;"><td width="120px" align="left">This is Category</td><td width="370px" align="left">Criteria for achieving element off service quality is listed here. Additional Details click Errors. Criteria for achieving element off service quality is listed here.</td><td width="50px" align="center"><a id="a5" href="#">5</a></td><td width="150px" align="center">Feedback</td><td width="100px" align="center">Contact Id</td></tr>
        <tr class="rpt28_row1" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">12121</td></tr>
        <tr class="rpt28_row1"style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">21354</td></tr>
        <tr class="rpt28_row1" style="display:none; background-color:#fff;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">212345</td></tr>
        <tr class="rpt28_row1" style="display:none; background-color:#F1F5FA;"><td width="120px" align="left">Synopsis:</td><td width="370px" align="left">The contact synopsis is listed here for detail regarding what occured on the call. Contact synopsis listed here.</td><td width="50px" align="center"><img src="Images/category_notachieved_icon.png" alt="" /></td><td width="150px" style="color:#E56A19;" align="center">Comments & Feedback for non achievement displays here. Additions Row can widen to acommodate larger comments.</td><td width="100px" align="center">32456</td></tr>
</table>

 $(document).ready(function(){
    function assignClickHandlerFor(boxNum) {

            console.log('#a' + boxNum);
            $('#a' + boxNum).click(function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

                var $aRow = $(evt.currentTarget); 

                $aRow.find('.rpt28_row' + boxNum).toggle();                  
            });
        }

        var i;

        for (i = 1; i <= 5; i++) {
            assignClickHandlerFor(i);
        }        
 });

Answer 1

将您的 JavaScript 更改为:

 $(document).ready(function(){
    function assignClickHandlerFor(boxNum) {

            console.log('#a' + boxNum);
            $('#a' + boxNum).click(function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

                $('table').find('.rpt28_row' + boxNum).toggle();                  
            });
        }

        var i;

        for (i = 1; i <= 5; i++) {
            assignClickHandlerFor(i);
        }        
 });​

问题在于您正在检查链接的祖先。需要检查表的祖先。