我们在一个有很多插件的遗留项目中将 jquery 从 1.8.2 升级到 3.0.0。我们正在使用迁移插件以方便升级，除了一些不相关的弃用警告消息外，它在控制台中没有显示任何错误。所以我检查了一个表格行以了解出了什么问题
预升级（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" />
任何解决排序问题的输入将不胜感激。谢谢你。