Question

我在抓取下一个元素时遇到问题，它为下一个元素返回null。

我将“ this？”作为onclick传递，我假设您可以使用它来获取下一个元素，但似乎它返回null。

感谢您的帮助

    function assignnames(checkboxelement){
    
    checkboxelement.setAttribute("name", "checkbox");
    var value1box = checkboxelement.nextSibling;
    value1box.setAttribute("name", "notnull");
    var value2box = checkboxelement.nextElementSibling;
    value2box.setAttribute("name", "notnull");
    alert("done");
    
    }

    <table border="1">
    <tr>
      <th>
        Checkbox
      </th>
      <th>
        value1
      </th>
      <th>
        value2
      </th>
    </tr>
    <tr>
      <td>
    <input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
      </td>
      <td>
         <input type="text" name="" id="fname1">
      </td>
      <td>
      <input type="text" name="" id="lname1">
      </td>
    </tr>
    </table>

Answer 1

要使输入成为同级，它们都必须在同一<td>中，并共享一个单亲。由于它们散布在多个表单元格中，因此将被视为 cousins （保留族谱隐喻），后者没有类似的快捷方式属性。

在输入之间仍然可以使用nextElementSibling，但是在世代之间也必须上下移动。

function assignnames(checkboxelement){
    checkboxelement.setAttribute("name", "checkbox");

    var value1box = checkboxelement
        .parentElement      // up a generation the checkbox' parent <td>
        .nextElementSibling // then to the next <td> in the row
        .firstElementChild; // and back down a generation to the next input
                            // the last step could also be: .querySelector('input')

    value1box.setAttribute("name", "notnull");

    var value2box = value1box
        .parentElement
        .nextElementSibling
        .firstElementChild;

    value2box.setAttribute("name", "notnull");

    alert("done");
}

    <table border="1">
    <tr>
      <th>
        Checkbox
      </th>
      <th>
        value1
      </th>
      <th>
        value2
      </th>
    </tr>
    <tr>
      <td>
    <input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
      </td>
      <td>
         <input type="text" name="" id="fname1">
      </td>
      <td>
      <input type="text" name="" id="lname1">
      </td>
    </tr>
    </table>

Answer 2

如果要在同一行中获取文本输入，则可以转到该行，然后使用选择器获取输入，例如

function getParent(node, tag) {
  var tag = tag.toLowerCase();
  do {
    if (node.tagName.toLowerCase() == tag) {
      return node;
    }
    node = node.parentNode;
  } while (node && node.tagName && node.parentNode)
  return null;
}

function getInputs(evt) {
  var row = getParent(this, 'tr');
  var inputs;
  if (row) {
    inputs = row.querySelectorAll('input[type="text"]');
  }
  console.log(`Found ${inputs.length} text inputs, node is ${this.checked? '':'not '}checked.`);
}

window.onload = function(){
  document.getElementById('checkbox1').addEventListener('click', getInputs, false);
};

<table border="1">
  <tr><th>Checkbox
      <th>value1
      <th>value2
  <tr><td><input type="checkbox" id="checkbox1">
      <td><input type="text" name="" id="fname1">
      <td><input type="text" name="" id="lname1">
</table>

在表格中获取下一个元素

2 个答案: