函数仅适用于第一个td's、 但不是针对所有的td's
Function only working on first td's, but not for all the td's?
我在表中使用了一个调整大小的函数,它运行良好。问题是它只在第一行的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>
我认为问题是,当你在td的第二级中传递'this'时,你没有足够的遍历dom来到达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.nextskilling时,它不会像您想要的那样在顶级td元素上工作,它只在底部元素上工作。我不认为你可以在tr之外设置这些元素的宽度。
我认为您需要在getNodeName()或MD()函数中进行另一次检查,以确定您在DOM中的位置,这样您就可以回到表的顶部,也就是您想要更改宽度的位置。
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- Javascript仅适用于alert()和Debug模式
- JS适用于Firefox和Safari,但不适用于Chrome.此处'是我的网站
- Regex不适用于Firefox,但适用于Chrome
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- AngularJS$http.post没有'不适用于Chrome,仅适用于IE
- Javascript仅适用于jQuery mobile中的页面刷新
- 关闭当前选项卡并打开一个新的-仅适用于Chrome