2014-07-07 138 views
0

我有一个表可以动态填充。使用jquery选择特定tbody中的所有复选框

主表中将包含3个<tbody>区段和每个区段中的行。

每一行都会有一个复选框。

我想要做的是使用匹配<tbody> id的jquery选择器。该id也是动态创建的,因此它不是一个常量值,而是使用一个变量。

我试图使用jQuery是这样的:

$(":input[id$='_ErrorCheckbox']").click(function() { 
     var wbId = $(this).attr('id').split("_")[0].toString().trim(); 

     $('tbody#' + wbId + ' _ErrorVisits tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
    }); 

我用这个语句抢在<tbody>行也尝试过,但它没有工作(一个未知的语法错误):

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 

上面的第一个方法,不会抛出任何错误,但不会选择任何东西。

什么是正确的方式来使用jQuery选择器来抓住一个特定的<tbody>元素使用其ID?

编辑: 下面是HTML表格输出:

<table id="workbookTable_25116" cellpadding="10"> 
        <thead> 
         <tr> 
          <th><input type="checkbox" id="25116 _SelectAllCheckbox"></th><th>Visit Timepoint</th><th>Visit Information</th><th>Notifications/Errors</th><th>Preview SQC Analysis</th> 
         </tr> 
        </thead> 
        <tbody id="25116 _ErrorVisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _ErrorCheckbox"></td><td><b>Visits in Error</b></td><td></td><td></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="9be44178-7273-4057-9607-acb135114b39 _25116 _Checkbox" name="visit_cb"></td><td>Week 8</td><td>1008-001, Week 8, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="9be44178-7273-4057-9607-acb135114b39 _25116 _ResetTaskButton" value="Reset Task"></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _Checkbox" name="visit_cb"></td><td>Week 16</td><td>1008-001, Week 16, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _ResetTaskButton" value="Reset Task"></td></tr> 
        </tbody> 
        <tbody id="25116 _NotPreviouslySQCvisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _NotSQCCheckbox"></td><td><b>First Time SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: yellow;"><td><input type="checkbox" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _Checkbox" name="visit_cb"></td><td>Week 4</td><td>1008-001, Week 4, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr> 
        </tbody> 
        <tbody id="25116 _PreSQCvisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _PreSQCCheckbox"></td><td><b>Previously SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: greenyellow;"><td><input type="checkbox" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _Checkbox" name="visit_cb"></td><td>Week 12</td><td>1008-001, Week 12, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr> 
        </tbody> 
       </table> 

编辑:发现 解决方案,需要各地ID报价。代码见下面的答案。 感谢大家的帮助。

+2

将代码粘贴到小提琴上 –

+0

向我们展示html表输出 – machineaddict

+1

不应该是'$('tbody#'+ wbId +'_ErrorVisits ...',没有前导空格吗?我怀疑你有'<_ErrorVisits >元素在你的页面中 –

回答

0

对不起每个人,但事实证明,我失踪了id选择器周围的引号。

下面是最终jQuery代码:

$("tbody[id$='" + wbId + " _ErrorVisits'] tr td input[type='checkbox']").prop('checked', $(this).prop('checked')); 

行情需要被周围放置的ID,以防止语法错误,因为ID有空间在里面。

+1

这是一种解决方法或快速修复而非解决方案。 ID不应该有空格。 – PeterKA

+0

@ user3558931 - 我同意这一点,但在asp mvc中,我抓取模型数据并向其添加文本,如下所示:'id =“@ wb.Id _Checkbox”'我需要那里的空间或者剃须刀表达式寻找名为wb.Id_Checkbox的属性。我将研究如何避免这些空间符合html标准。 – RXC

4

后续行应改为:

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 

要:

$('tbody[id$=' + wbId + '_ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 

:与'_ErrorVisits]更换' _ErrorVisits]

注:我不会建议对使用id's与空间,但空间可以作为速战速决如下转义:

更换wbIdwbId.replace(/ /g, '\\\\ ')

的理想的解决方案是修复ID以消除空间。

+1

@Sudharsan,在'_ErrorVisits'之前删除了前导空格。然而,提问者[揭示]他们的'id'属性* do *包含空格(http://stackoverflow.com/questions/24612175/select-all-check-boxes-in-specific-tbody-using-jquery#comment38138437_24612175) ,这样就不会解决他们的问题。 –