javascript - 功能仅适用于第一个 td，但不适用于所有 td？

Question

我在我的表格中使用了一个调整大小的函数并且它工作正常。问题是它只在第一行的 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>

Answer 1

我认为问题在于，当您在 td 的第二级传递“this”时，您没有遍历足够多的 dom 以到达 thead td。我会尝试将一些 id 放入您的第一个 td 元素中，以便您可以直接将它们从您的第二个 tds 传递给您的函数。

编辑:

我认为这段代码是问题所在:

  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 中的位置，以便您可以返回到表的顶部，这是您想要更改的位置宽度。