Question

我是前端开发的新手。我需要以HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script type="text/x-template" id="tree-table-row"> <tr> <td :style="{'padding-left': node.level * indent + left_padding + 'px'}">{{node.name}}</td> <td>{{node.value}}</td> </tr> </script> <div id="tree-as-table"> <table class="vue-table"> <tr is="tree-table-row" v-for="(node, index) in tree_array" :node="node" :key="node.id"/> </table> </div>（固定的<table>宽度和高度）显示数据。如果数据超过<td>的宽度，我想提供一个按钮来扩展<td>的宽度。

我正在使用大量的表列，因此没有为每个元素使用唯一的<td>，因此也不打算维护id。

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

我的代码发布在下面：

onclick()

感谢您的帮助...

Answer 1

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

  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>

Answer 2

按照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>

通过传递参数来通过单击按钮来操纵表格的列宽

2 个答案: