函数仅适用于第一个td's、 但不是针对所有的td's

Function only working on first td's, but not for all the td's?

本文关键字:td 适用于 函数 第一个      更新时间:2023-09-26

我在表中使用了一个调整大小的函数,它运行良好。问题是它只在第一行的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中的位置,这样您就可以回到表的顶部,也就是您想要更改宽度的位置。