我需要调整表中的列，其中每个元素都有很多父div和类。这些js函数允许我一次调整列中的标题/行，但不是多次。 HTML标记位于底部。有更好的方法吗？
//This section is to resize columns
var pressed = false;
var start = undefined;
var content = undefined;
var startX, startWidth;
var left, right;
function mouseDownResize(a,b,c,d,e)
{
//function will recieve the correct th id of the div selected and the content div and the divs on either side of the event and the event
start = document.getElementById(a);
content = document.getElementById(b);
//this is getting the div from the td above the selected div. This will diable the urCursorClickable class so that doesn't
//steal the focus of the resize
left = document.getElementById(c).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
pressed = true;
startX = parseInt(e.pageX);
startWidth = parseInt(start.style.width);
}
function mouseMoveResize(a,b,e)
{
//function will recieve the correct th id of the div selected and the event
start = document.getElementById(a);
content = document.getElementById(b);
if (pressed) {
start.style.width = parseInt(startWidth + (e.pageX - startX)) + "px";
content.style.width = start.style.width;
}
}
function mouseUpResize(c,d)
{
if (pressed) {
pressed = false;
//this is getting the div from the td above the selected div. This will enable the urCursorClickable class
left = document.getElementById(c).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
}
}
<tbody id="21.125-content">
<tr vpm="mrss-hdr" role="row" style="height:20px;">
<td valign="top" role="gridcell" class="urST5OuterOffBrd urBorderBox urStd" colspan="4" style="background-color:transparent!important;border-left-width:1px;border-top-width:1px;border-right-width:2px;border-bottom-width:1px;">
<div id="21.125-mrss-hdr-left" hpm="left" vpm="mrss-hdr" segcc="3" segrc="1" segori="0" segoci="0" class="urSTSHL1 urST4LbHdrBg" style="height:20px;width:100%;overflow:hidden;white-space:nowrap;">
<div bisposelement="X" class="urBorderBox" ioffsettop="0" ioffsetleft="0" style="position:relative;top:0px;float:left;left:0px;">
<table border="0" cellpadding="0" cellspacing="0" class="urST5OuterOffBrd urBorderBox" id="21.125-mrss-hdr-left-content" style="empty-cells:show;table-layout:fixed;width:1px;border-right-width:2px;">
<colgroup>
<col etype="SELECTIONCOLUMN" style="width:21px;">
<col id="Status_Column" iidx="1" style="width:27px;">
<col id="Item_Column" iidx="2" style="width:34px;">
</colgroup>
<tbody irowindexoffset="0" irowsfragmentlength="1">
<tr rr="0" sst="4" rt="2" style="height:21px;">
<th id="grid#21.125#0,0" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="0" hasselmenu="X" acf="CSEL" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricSelCol urST5L urST5HCColorLvl1 urST4LbHdrBg" style="height:20px;padding:0px;text-align:center;">
<div acf="SELMNUOPN" tabindex="0" ti="0" selmenuid="cnt20_SelectionMenu" id="grid#21.125#0,0-menu" class="urSTColHdrSelPopupIcon" title="Table selection menu">
</div>
</th>
<th id="grid#21.125#0,1" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="1" title="Status" captionid="grid#21.125#0,1#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:center;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="center" tabindex="0" ti="0" title="Status" class="urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,1-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,1#cp" ct="CP" title="Status">Status</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,1-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<!--Column Resize for Status Column-->
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;" onmousedown="mouseDownResize('Status_Column','Status_Content_Column','grid#21.125#0,1-CRESIZE','grid#21.125#0,2-CRESIZE',event);" onmousemove="mouseMoveResize('Status_Column', 'Status_Content_Column', event);" onmouseup="mouseUpResize('grid#21.125#0,1-CRESIZE','grid#21.125#0,1-CRESIZE');"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</th>
<th id="grid#21.125#0,2" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="2" title="Item of Requisition" captionid="grid#21.125#0,2#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:right;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="right" tabindex="0" ti="0" title="Item of Requisition" class=" urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,2-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,2#cp" ct="CP" title="Item of Requisition">Item</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,2-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;"> </div>