jquery 3.0.0 升级损坏 html table 功能
jquery 3.0.0 upgrade broke html table functonality
我们正在将 jquery 从一个遗留项目中的 1.8.2 升级到 3.0.0，该项目有许多插件。
我们正在使用迁移插件来简化升级，它在控制台中没有显示任何错误，除了几个不相关的弃用警告 message.So 我检查了一个 table 行以了解出了什么问题
预升级(jquery 1.8.2) :
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter tablesorter-default tablesorter02b1d507cf7ac" role="grid">
<thead><tr class="persist-header tablesorter-headerRow" role="row">
<th style="width: 10px; user-select: none;" data-column="0" class="tablesorter-header sorter-false tablesorter-headerUnSorted" scope="col" role="columnheader" aria-disabled="true" unselectable="on" aria-sort="none" aria-label=": No sort applied, sorting is disabled"><div class="tablesorter-header-inner"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></div></th><th class="header date tablesorter-header tablesorter-headerUnSorted" <div="" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Date: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></div></th><th class="header undefined tablesorter-header tablesorter-headerUnSorted" <div="" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Admission Type: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></div></th><th class="header sourceFacilityShortLabel tablesorter-header tablesorter-headerUnSorted" <div="" data-column="3" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Source: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></div></th></tr></thead><tbody aria-live="polite" aria-relevant="all"><tr data-clinical-item-key="3405" data-date="Sun Aug 23 17:00:00 PDT 2020" data-source-key="1013" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-23-2020 to (No End Date)"},{"title":"Subject Type/Class","value":"Unknown / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"R (Fma6om7tKI)"}]" role="row"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="3405"></td><td data-sort-by="startTime">08/23/2020</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></tbody></table></div></div>
</div>
post 升级(jquery 3.0.0):
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter">
<thead><tr class="persist-header"><th style="width:10px"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></th><th class="header date" <div=""><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></th><th class="header undefined" <div=""><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></th><th class="header sourceFacilityShortLabel" <div=""><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></th></tr></thead><tr data-clinical-item-key="23617" data-date="Mon Aug 24 00:00:00 UTC 2020" data-source-key="1" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Location","value":"LAB_P"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-15-2012 to 05-27-2014"},{"title":"Duration","value":"21 months"},{"title":"Subject Type/Class","value":"Subject Type / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"URO (Fma6om7tKI)"}]"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="23617"></td><td data-sort-by="startTime">08/15/2012</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></table></div></div>
</div>
我观察到“tbody”html 元素未填充 post 升级，因此我的 table 进行了一次折腾。所以我明确地为每个 table 行添加了一个循环，这解决了我最初的 table issue.But 在这个 table 分拣机停止工作之后，即使它在明确添加之前没有工作。但是这个引用是关于 tbody 可能会导致这个问题，
这是 tablesorter
的代码
headers[zeroIndex] = {sorter: 'text'}; // question column
headers[oneIndex] = {sorter: 'text'}; // answer column
headers[twoIndex] = {sorter: 'text'}; // source column
$('#' + sectionId + ' .tablesorter').tablesorter({
'headers': headers,
sortLocaleCompare: true
});
这是正在使用的插件列表
<!-- jQuery Plugins -->
<t:script localPath="/js/tablesorter/jquery.tablesorter.min.js" />
<t:script localPath="/js/combobox2.1/select2.js" />
<t:script localPath="/js/tipsy/jquery.tipsy.js" />
<t:css localPath="/js/tipsy/tipsy.css" />
<t:script localPath="/js/jquery.maskedinput-1.4.1.js" />
<t:script localPath="/js/jquery.hotkeys.js" />
<t:css localPath="/js/redmond/jquery-ui-1.10.2.custom.min.css" />
<t:script localPath="/js/jquery-ui-1.10.2.custom.min.js" />
<t:script localPath="/js/bootstrap.js" />
<t:script localPath="/js/pnotify-1.2.0/jquery.pnotify.js" />
任何解决排序问题的意见将不胜感激。
谢谢。
我通过做一些额外的事情解决了这个问题 debugging.I 在一个循环中添加了 tbody ，所以对于每个 tr 它都添加了一个 tbody ，我最后无法弄清楚，因为我正在检查一个row.After 添加多行问题很清楚
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33801" data-date="Thu Aug 27 00:00:00 UTC 2009" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Food poisoning"},{"title":"Dates","value":"08-27-2009 to 05-29-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Outpatient"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Medium"},{"title":"Code","value":"Food poisoning"}]" class="" data-clinical-item-group-key="FOODPOISONING" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33801"></td>
<td class="ellipsis">Food poisoning</td>
<td data-sort-by="startTime">08/27/2009</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33802" data-date="Thu Dec 06 00:00:00 UTC 2001" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Hypoglycemic coma"},{"title":"Dates","value":"12-06-2001 to 07-06-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Discharge"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Fairly Certain"},{"title":"Code","value":"Hypoglycemic coma"}]" class="" data-clinical-item-group-key="HYPOGLYCEMICCOMA" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33802"></td>
<td class="ellipsis">Hypoglycemic coma</td>
<td data-sort-by="startTime">12/06/2001</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
我得到了提示， 然后我重构了我的代码，一切正常。
潜在问题： jquery 3.x 或更高版本中的 tbody 存在一些问题，有趣的是，迁移 plugin.If 您在代码中更好地使用了 tbody 来显式添加它，可以在 https://github.com/jquery/jquery/issues/3976 找到更多详细信息。
谢谢。
我们正在将 jquery 从一个遗留项目中的 1.8.2 升级到 3.0.0，该项目有许多插件。 我们正在使用迁移插件来简化升级，它在控制台中没有显示任何错误，除了几个不相关的弃用警告 message.So 我检查了一个 table 行以了解出了什么问题
预升级(jquery 1.8.2) :
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter tablesorter-default tablesorter02b1d507cf7ac" role="grid">
<thead><tr class="persist-header tablesorter-headerRow" role="row">
<th style="width: 10px; user-select: none;" data-column="0" class="tablesorter-header sorter-false tablesorter-headerUnSorted" scope="col" role="columnheader" aria-disabled="true" unselectable="on" aria-sort="none" aria-label=": No sort applied, sorting is disabled"><div class="tablesorter-header-inner"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></div></th><th class="header date tablesorter-header tablesorter-headerUnSorted" <div="" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Date: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></div></th><th class="header undefined tablesorter-header tablesorter-headerUnSorted" <div="" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Admission Type: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></div></th><th class="header sourceFacilityShortLabel tablesorter-header tablesorter-headerUnSorted" <div="" data-column="3" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Source: No sort applied, activate to apply an ascending sort" style="user-select: none;"><div class="tablesorter-header-inner"><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></div></th></tr></thead><tbody aria-live="polite" aria-relevant="all"><tr data-clinical-item-key="3405" data-date="Sun Aug 23 17:00:00 PDT 2020" data-source-key="1013" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-23-2020 to (No End Date)"},{"title":"Subject Type/Class","value":"Unknown / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"R (Fma6om7tKI)"}]" role="row"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="3405"></td><td data-sort-by="startTime">08/23/2020</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></tbody></table></div></div>
</div>
post 升级(jquery 3.0.0):
<div id="encounter_ambulatory" class="fixed-table-container active tab-pane tablewrapper summary-section" data-ajax-url="encounters" data-section="encounter_ambulatory" data-title="Ambulatory Encounters" data-singular-label="Ambulatory Encounter">
<div class="section-list"><div class="header-background"> </div><div class="fixed-table-container-inner"><table class="table table-condensed table-striped persist-area tablesorter">
<thead><tr class="persist-header"><th style="width:10px"><div class="th-inner" style="margin:auto -1px"><input type="checkbox" class="headerCheckBox" onchange="toggleShareCheckBoxes('encounter_ambulatory');"></div></th><th class="header date" <div=""><div class="th-inner"><a>Date</a><span class="sortArrow"></span></div></th><th class="header undefined" <div=""><div class="th-inner"><a>Admission Type</a><span class="sortArrow"></span></div></th><th class="header sourceFacilityShortLabel" <div=""><div class="th-inner"><a>Source</a><span class="sortArrow"></span></div></th></tr></thead><tr data-clinical-item-key="23617" data-date="Mon Aug 24 00:00:00 UTC 2020" data-source-key="1" data-extra="[{"title":"Attending","value":"Collishaw, Donnie"},{"title":"Referring","value":"Lickert, Rosa"},{"title":"Reason","value":"Admit Reason"},{"title":"Location","value":"LAB_P"},{"title":"Source","value":"LAB1"},{"title":"Dates","value":"08-15-2012 to 05-27-2014"},{"title":"Duration","value":"21 months"},{"title":"Subject Type/Class","value":"Subject Type / Recurring patient"},{"title":"Admission Type","value":"Emergency"},{"title":"Encounter (ID)","value":"URO (Fma6om7tKI)"}]"><td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="23617"></td><td data-sort-by="startTime">08/15/2012</td><td class="ellipsis" style="max-width:90px">Emergency</td><td class="ellipsis" style="max-width:60px" data-original-title="" title="">LAB1</td></tr></table></div></div>
</div>
我观察到“tbody”html 元素未填充 post 升级，因此我的 table 进行了一次折腾。所以我明确地为每个 table 行添加了一个循环，这解决了我最初的 table issue.But 在这个 table 分拣机停止工作之后，即使它在明确添加之前没有工作。但是这个引用是关于 tbody 可能会导致这个问题，
headers[zeroIndex] = {sorter: 'text'}; // question column
headers[oneIndex] = {sorter: 'text'}; // answer column
headers[twoIndex] = {sorter: 'text'}; // source column
$('#' + sectionId + ' .tablesorter').tablesorter({
'headers': headers,
sortLocaleCompare: true
});
这是正在使用的插件列表
<!-- jQuery Plugins -->
<t:script localPath="/js/tablesorter/jquery.tablesorter.min.js" />
<t:script localPath="/js/combobox2.1/select2.js" />
<t:script localPath="/js/tipsy/jquery.tipsy.js" />
<t:css localPath="/js/tipsy/tipsy.css" />
<t:script localPath="/js/jquery.maskedinput-1.4.1.js" />
<t:script localPath="/js/jquery.hotkeys.js" />
<t:css localPath="/js/redmond/jquery-ui-1.10.2.custom.min.css" />
<t:script localPath="/js/jquery-ui-1.10.2.custom.min.js" />
<t:script localPath="/js/bootstrap.js" />
<t:script localPath="/js/pnotify-1.2.0/jquery.pnotify.js" />
任何解决排序问题的意见将不胜感激。 谢谢。
我通过做一些额外的事情解决了这个问题 debugging.I 在一个循环中添加了 tbody ，所以对于每个 tr 它都添加了一个 tbody ，我最后无法弄清楚，因为我正在检查一个row.After 添加多行问题很清楚
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33801" data-date="Thu Aug 27 00:00:00 UTC 2009" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Food poisoning"},{"title":"Dates","value":"08-27-2009 to 05-29-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Outpatient"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Medium"},{"title":"Code","value":"Food poisoning"}]" class="" data-clinical-item-group-key="FOODPOISONING" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33801"></td>
<td class="ellipsis">Food poisoning</td>
<td data-sort-by="startTime">08/27/2009</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
<tbody aria-live="polite" aria-relevant="all">
<tr data-clinical-item-key="33802" data-date="Thu Dec 06 00:00:00 UTC 2001" data-source-key="1" data-extra="[{"title":"Condition Type","value":"Problem"},{"title":"Title","value":"Hypoglycemic coma"},{"title":"Dates","value":"12-06-2001 to 07-06-2011"},{"title":"Source","value":"LAB1"},{"title":"Problem Type","value":"Discharge"},{"title":"Prognosis","value":"Good"},{"title":"Certainty","value":"Fairly Certain"},{"title":"Code","value":"Hypoglycemic coma"}]" class="" data-clinical-item-group-key="HYPOGLYCEMICCOMA" role="row">
<td style="width:10px"><input type="checkbox" class="ci-checkbox" onchange="showSelectedClinicalItemsActions(this);" value="33802"></td>
<td class="ellipsis">Hypoglycemic coma</td>
<td data-sort-by="startTime">12/06/2001</td>
<td class="ellipsis">LAB1</td>
<td></td>
<td data-original-title="" title=""><span class="grouped-count"></span></td>
</tr>
</tbody>
我得到了提示，
潜在问题： jquery 3.x 或更高版本中的 tbody 存在一些问题，有趣的是，迁移 plugin.If 您在代码中更好地使用了 tbody 来显式添加它，可以在 https://github.com/jquery/jquery/issues/3976 找到更多详细信息。 谢谢。