通过传递参数来操纵表列宽度，然后单击按钮

我是前端开发的新手。我需要在HTML <table>(固定的<td>宽度和高度(中显示我的数据。如果数据超过<td>宽度，我想提供一个按钮来扩展<td>的宽度。

我正在使用大量的表列，因此不使用或计划维护每个元素的唯一id，因此getElementById不是一个选项。

我的问题是，我可以将<td>对象传递给onclick()事件吗？或者，如果没有，还有其他方法吗？

我的代码在下面发布：

<script>
    function myFunction()
    {
        <!-- Manipulate the object width-->
    }
</script>
<body>
<table>
<tr>
    <td>
    <!-- Any way to pass td object to Function()-->
        <button onclick= "Function()">Test</button>
    </td>
</tr>
</table>
</body>

任何帮助都将受到赞赏...

这应该解释如何将当前元素传递给函数。

  function myFunction(el) {
    var tdEl = el.parentElement;
    tdEl.style.width = tdEl.style.width == "100px" ? "200px" : "100px" ;
  }

<body>
  <table>
    <tr>
      <td style="width:100px">
        <button onclick="myFunction(this)">Test1</button>
      </td>
      <td style="width:100px">
        <button onclick="myFunction(this)">Test2</button>
      </td>
      <td style="width:100px">
        <button onclick="myFunction(this)">Test3</button>
      </td>
    </tr>
  </table>
</body>

blackpearl建议您可以从按钮

访问TD元素

    <script>
    function myFunction(target)
    {
        var td = target.parentElement;
        td.style.width = "300px";
    }
</script>
<body>
<table>
<tr>
    <td>
    <!-- Any way to pass td object to Function()-->
        <button onclick= "Function(this)">Test</button>
    </td>
</tr>
</table>
</body>

相关内容

最新更新

热门标签：