我在表格中使用了调整大小功能，并且工作正常。问题是它只在第一行的td中工作。对于其他td，它不起作用。
我尝试更改所选td的tr的宽度，并尝试更改表格宽度，但它不起作用。我不知道那是什么问题。
拖动时正确计算相应td的宽度，但未在td上应用。但它在第一行的td中运行良好。
var ob;
var obLeft;
var obRight;
var over = false;
var iEdgeThreshold = 10;
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft, curtop];
}
/* Function that tells me if on the border or not */
function isOnBorderRight(objTable, objTh, event) {
var width = objTh.offsetWidth;
var left = objTh.offsetLeft;
var pos = findPos(objTable);
var absRight = pos[0] + left + width;
if (event.clientX > (absRight - iEdgeThreshold)) {
return true;
}
return false;
}
function getNodeName(objReference, nodeName) {
var oElement = objReference;
while (oElement != null && oElement.tagName != null) {
if (oElement.tagName == nodeName) {
return oElement;
}
oElement = oElement.parentNode;
}
return null;
}
function doResize(objTh, event) {
if (!event) event = window.event;
var objTable = getNodeName(objTh, "TABLE");
if (isOnBorderRight(objTable, objTh, event)) {
over = true;
objTh.style.cursor = "e-resize";
} else {
over = false;
objTh.style.cursor = "";
}
return over;
}
function doneResizing() {
over = false;
}
function MD(event) {//alert(event.srcElement.tagName+ " and "+event.target.tagName)
if (!event) event = window.event;
MOUSTSTART_X = event.clientX;
MOUSTSTART_Y = event.clientY;
if (over) {
if (event.srcElement) ob = event.srcElement;
else if (event.target) ob = event.target;
else return;
ob = getNodeName(ob, "TD");
if (ob == null) {return;
}
//ob2 = getNodeName(ob,"TABLE");
//obLeft = ob.previousSibling;
obRight = ob.nextSibling;
//obLeft = ob.previousElementSibling;
//obRight = ob.nextElementSibling; // Uncomment For FF
obwidth = parseInt(ob.style.width);
if (obLeft != null)
obLeftWidth = parseInt(obLeft.style.width);
if (obRight != null)
obRightWidth = parseInt(obRight.style.width);
//obwidth2=parseInt(ob2.offsetWidth);
alert(obRight+" and "+obwidth+" and "+obRightWidth);
}
}
function MM(event) {
if (!event) event = window.event;
if (ob) {
st = event.clientX - MOUSTSTART_X + obwidth;
//st2=event.clientX-MOUSTSTART_X+obwidth2;
document.getElementById("infoDiv").innerHTML = "st=" + st + " clientX=" + event.clientX + " moustart_x=" + MOUSTSTART_X + " obwidth=" + obwidth;
//document.getElementById("infoDiv").innerHTML += ;
//document.getElementById("infoDiv").innerHTML += ;
//document.getElementById("infoDiv").innerHTML += obwidth;
if (st >= 10) {
ob.style.width = st;
//ob2.style.width=st2;
//obLeft.style.width=st-obLeftWidth;
obRight.style.width = (parseInt(obwidth - st + obRightWidth) > 10 ? (obwidth - st + obRightWidth) : iEdgeThreshold + "px");
}
if (document.selection) document.selection.empty();
else if (window.getSelection) window.getSelection().removeAllRanges();
}
}
function MU(event) {
if (!event) event = window.event;
if (ob) {
if (document.selection) document.selection.empty();
else if (window.getSelection) window.getSelection().removeAllRanges();
ob = null;
}
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;html>body div.scrollable tbody {
overflow: auto;
}
table.resizable th{
text-align:center;
overflow: hidden;
}
/* if mozilla, add 10 for the scrollbar */
html>body th.scrollbarCol {
width:10px;
}
table.resizable td{
overflow: hidden;
}
table.resizable{
table-layout:fixed;
}
table.resizable input{
width:100%;
}
table.resizable textarea{
width:100%;
}
.nowrap {
white-space:nowrap;
}
/* needed for IE */
table.tabular th.scrollbarCol {
background-color:transparent;
}
table.tabular {
FONT-SIZE: 13px;
FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
COLOR: #336699;
}
table.tabular thead {
COLOR: #ffffff;
FONT-WEIGHT: bold;
}
table.tabular th{
background-color:#c0c0c0;
padding: 4px;
}
table.tabular td {
background-color:#EAF4F3;
padding: 2px;
}<div class="scrollable">
<TABLE id="mytable" style="width:100%; table-layout:fixed" class="sortable resizable tabular">
<THEAD>
<TR>
<td onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:60px'>Index</td>
<td onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Name</span></td>
<td onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Value</span></td>
<td onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:110px'><span class="nowrap">Page Name</span></td>
</TR>
</THEAD>
<TBODY style="height:200px">
<TR>
<Td>0</Td>
<Td>1_2</Td>
<Td>234</Td>
<Td>1_3</Td>
</TR>
</TBODY>
</table>
</div>
<span id="infoDiv"></span>
答案 0 :(得分：0)
我认为问题是，当你通过这个＆＃39;在td的第二级，你没有经过足够的dom来到达thead td。我会尝试将一些id添加到你的第一个td元素中，这样你就可以直接从第二个td传递给你的函数。
编辑：
我认为这段代码是个问题：
function getNodeName(objReference, nodeName) {
var oElement = objReference;
while (oElement != null && oElement.tagName != null) {
if (oElement.tagName == nodeName) {
return oElement;
}
oElement = oElement.parentNode;
}
return null;
}
当您从MD拨打电话时，您可以这样打电话：
ob = getNodeName(ob, "TD");
因此，当您输入getNodeName（）并且它到达if（oElement.tagName == nodeName）语句时，它的eval为true，然后退出该函数。然后，当你执行obRight = ob.nextsibling时，它不会像你想要的那样处理顶级td元素，它只能在底层元素上工作。而且我不认为你可以在thead中设置tr之外的那些元素的宽度。
我认为你需要的是getNodeName（）或MD（）函数中的另一个检查，它确定你在DOM中的位置，这样你就可以回到表的顶部，这是你想要改变的地方宽度。