jquery 3.0.0 升级打破了 html 表格功能
Posted
技术标签:
【中文标题】jquery 3.0.0 升级打破了 html 表格功能【英文标题】：jquery 3.0.0 upgrade broke html table functonality 【发布时间】：2021-09-18 06:05:52 【问题描述】：我们正在一个旧项目中将 jquery 从 1.8.2 升级到 3.0.0，该项目有很多插件。 我们正在使用 migrate 插件以方便升级，除了一些不相关的弃用警告消息外，它在控制台中没有显示任何错误。所以我检查了一个表行以了解出了什么问题
预升级（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>
升级后（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 元素在升级后没有得到填充，因此我的桌子被折腾了。所以我为每个表行显式地添加了一个循环，这解决了我的初始表问题。但是在这个 tablesorter 停止工作之后，即使在显式添加之前它也没有工作。但是这个关于 tbody 的参考可能会导致这个问题，jQuery - TableSorter not working 这是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" />
任何解决排序问题的意见将不胜感激。 谢谢。
【问题讨论】：
【参考方案1】：我通过做一些额外的调试解决了这个问题。我在循环中添加 tbody ，所以对于每个 tr 它都添加了一个 tbody ，我最后无法解决这个问题，因为我正在检查单行。添加后多行问题很清楚
<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 - TableSorter not working 那里得到了提示，然后我重构了我的代码，一切正常。
潜在问题： jquery 3.x 或更高版本中的 tbody 存在一些问题，有趣的是，此问题不会在 migrate 插件中发现。如果您在代码中使用了 tbody 更好明确添加它，更多细节可以在https://github.com/jquery/jquery/issues/3976找到。 谢谢。
【讨论】：
以上是关于jquery 3.0.0 升级打破了 html 表格功能的主要内容，如果未能解决你的问题，请参考以下文章
最新的 AJV 和 ajv-formats 必须在 React 中被打破