运行在图表 JS 中显示 table 的 onclick 命令

Question

我有一个 table 可以切换打开和关闭。它通过按钮切换，没问题。

document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
   if (document.getElementById("displaytable").style.display === "none")
               document.getElementById("displaytable").style.display = "block";
   else document.getElementById("displaytable").style.display = "none";
});

我的html

<input id="toggleVisibilityButton" type="button" value="Button1"/>
<table  id="displaytable" style="display:none" width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
            <td class="lbl">column1</td>
            <td class="lbl">column2</td>
            <td class="lbl">column3</td>
            </tr>
    <tr>
            <td align="center">1</td>
            <td align="center">2</td>
             <td align="center">33</td>
            </tr>
            <tr>
            <td align="center">4</td>
            <td align="center">5</td>
           <td align="center">6</td>
            </tr>
</table>

我想做的是使用 chartsjs，以便在单击饼图的一部分时，打开一个单独的 table。我可以使用 ChartsJS 的 OnClick 命令调用 JS 函数。

onClick: (evt, activeEls) => {
  alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},

但是当我尝试将打开 table 的 JS 包装在函数中并将其放入此 OnClick 命令时，单击图表时 table 不会打开。我如何设置它以便在单击图表段时 table 将打开。理想情况下，我希望用按下的饼图部分的数据填充 table，但该 ID 喜欢先尝试使用 OnClick 命令打开 table。

所以我正在尝试的完整设置是：

function show() {
document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
       if (document.getElementById("displaytable").style.display === "none")
                   document.getElementById("displaytable").style.display = "block";
       else document.getElementById("displaytable").style.display = "none";
    });
}

然后在我的图表中：

onClick: (evt, activeEls) => {
  show();
  alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},

Answer 1

您正在 show 方法中将 onclick 侦听器重新分配给按钮。你只需要执行其中的代码，所以你的显示方法应该是这样的：

if (document.getElementById("displaytable").style.display === "none") {
  document.getElementById("displaytable").style.display = "block";
} else {
  document.getElementById("displaytable").style.display = "none";
}

并且您需要定位正确的 table，因为您想要定位不同的 table。但是现在由于您获得了相同的 ID，它将打开和关闭 table 您还可以使用按钮 open/close

运行在图表 JS 中显示 table 的 onclick 命令

running an onclick command to show a table in chartsJS

javascript

chart.js

运行 在图表 JS 中显示 table 的 onclick 命令

running an onclick command to show a table in chartsJS

javascript

chart.js

运行在图表 JS 中显示 table 的 onclick 命令