使用JS（greasemonkey）访问（或提交）表元素内的按钮

Question

我有一张表，其中“td”中有4个按钮

我想从表格外的第5个按钮触发这些按钮

这是代码

提前致谢

function fn(){
    var c = document.getElementsByClassName("myclass").childNodes;
    c[0].childNodes[1].click();
}

<tr class="myclass">
   <td>
        <input type="button" value="a" onclick="alert('a')">
        <input type="button" value="b" onclick="alert('b')">
        <input type="button" value="c" onclick="alert('c')">
        <input type="button" value="d" onclick="alert('d')">
   </td>
</tr>

<br />

<button onClick="fn()">click</button>

Answer 1

所以，这里发生了一些事情。

1。您在<tr>元素之外使用<table>。

根据HTML规范，使用没有<tr>元素的<table>无效。我还没有对此进行过广泛的测试，因此每个浏览器的行为可能会有所不同。但是，Chrome和Firefox处理这样的语法错误的方法是删除所有无效的HTML，让您：

<input value="a" onclick="alert('a')" type="button">
<input value="b" onclick="alert('b')" type="button">
<input value="c" onclick="alert('c')" type="button">
<input value="d" onclick="alert('d')" type="button">

<br>

<button onclick="fn()">click</button>

正如你所看到的，这意味着＆＃34; myclass＆＃34;只要浏览器知道，元素就不存在。要解决此问题，只需将<tr>包裹在<table>内。

2。 .getElementsByClassName函数返回一个HTMLCollection对象，而不是元素本身。

与document.getElementById不同，classnames替代方法返回一个类似于数组的对象，称为HTMLCollection，其中包含您在索引0处所需的元素。这意味着.childNodes属性不会出现这种情况。 t存在于结果上。有很多方法可以解决这个问题。显而易见的方法是将其更改为document.getElementsByClassName("myclass")[0]。或者，由于您只期望该类具有一个元素，因此您还可以使用document.querySelector('.myclass')，它返回与该选择器匹配的第一个元素。我个人推荐这个版本，因为它更简洁，但为了尽可能地保留原始代码，我将使用第一个解决方案来解决这个问题。

3。 .childNodes属性包括文本节点。

如果您在document.getElementsByClassName("myclass")[0].childNodes处注销结果，则会看到它返回带有[#text, <td>, #text]的nodeList。你可能会想，＆＃34;我没有直接在td中有任何文字。＆＃34;好吧，事实证明，我们开发人员喜欢使用的空格来缩进我们的HTML计数。因此，选择c[0]，您实际上会在<td>之前获得空格。相反，请使用document.getElementsByClassName("myclass")[0].children。点击触发器也是如此;将其更改为c[0].children[1].click();（假设您正尝试触发b按钮）。当然，您也可以将childNodes上的索引增加到c[1].childNodes[3]，但我强烈建议这样做，因为它会显着抵消您的选择，并可能在将来引起混淆。

总而言之，您的代码应如下所示：

＆＃13;

＆＃13;

function fn(){
    var c = document.getElementsByClassName("myclass")[0].children;
    c[0].children[1].click();
}

＆＃13;

<table>
    <tr class="myclass">
        <td>
            <input type="button" value="a" onclick="alert('a')">
            <input type="button" value="b" onclick="alert('b')">
            <input type="button" value="c" onclick="alert('c')">
            <input type="button" value="d" onclick="alert('d')">
        </td>
    </tr>
</table>

<br />

<button onClick="fn()">click</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试类似下面的代码。我创建了一个函数来为每个按钮添加一个click事件监听器。我修改了fn函数，以便在执行时触发每个按钮上的单击事件。我相信这是你想要实现的目标，但如果这不是预期的行为，我可以更新答案。另外，正如其他用户所指出的，<tr>应该在<table>内。

＆＃13;

＆＃13;

//get the buttons
var buttons = document.querySelector('.myclass').querySelectorAll('input[type=button]');

//add a click listener to each button
function init() {
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      alert(this.value);
    });
  }
}

//fire click event for each button
function fn() {
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].click();
  }
}

init();

＆＃13;

<table>
  <tr class="myclass">
    <td>
      <input type="button" value="a">
      <input type="button" value="b">
      <input type="button" value="c">
      <input type="button" value="d">
    </td>
  </tr>
</table>
<br />

<button onClick="fn()">click</button>

＆＃13;

＆＃13;

＆＃13;