【发布时间】：2017-10-26 06:38:55
【问题描述】：
我正在构建一个基本的表格结构，该结构将有几个隐藏的行，这些行将填充在带有触发器的行下方以切换它们。我似乎无法让我的切换触发器工作。这些行都将根据我们数据库中的数据量在 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);
}
});
【问题讨论】：
标签： javascript jquery html-table toggle