Find Next Cell Contained in Sibling Row with Queryselector

Find next cell contained in sibling row with querySelector

It will be difficult using querySelector. The problem with element.querySelector is that is only targets descendant nodes. Better use something like

var targetCell = row1.nextElementSibling.cells[0];

var row1 = document.querySelector("tr.row"),    targetCell = row1.nextElementSibling.cells[0];alert(targetCell);

<table>  <tr class="row">    <td class="cell"></td>  </tr>  <tr class="row">    <td class="cell"></td>  </tr></table>

Why is the tilde ~ not working in Javascript querySelector but works in CSS?

Use document instead of textarea, because when you use textarea.querySelector(), this can only select the children.

Also you can use + instead of ~

const textarea = document.getElementById('name')
console.log(textarea.outerHTML)// returns the correct texture

console.log(textarea.parentNode.querySelector('pre'))//returns correct pre tag

console.log(document.querySelector('textarea + pre'))//returns correct pre tag

<div>
  <textarea id="name" placeholder="Full Name">This is a long text for full name</textarea>
  <pre></pre>
</div>

querySelector search immediate children

Complete :scope polyfill

As avetisk has mentioned Selectors API 2 uses :scope pseudo-selector.

To make this work in all browsers (that support querySelector) here is the polyfill

(function(doc, proto) {
  try { // check if browser supports :scope natively
    doc.querySelector(':scope body');
  } catch (err) { // polyfill native methods if it doesn't
    ['querySelector', 'querySelectorAll'].forEach(function(method) {
      var nativ = proto[method];
      proto[method] = function(selectors) {
        if (/(^|,)\s*:scope/.test(selectors)) { // only if selectors contains :scope
          var id = this.id; // remember current element id
          this.id = 'ID_' + Date.now(); // assign new unique id
          selectors = selectors.replace(/((^|,)\s*):scope/g, '$1#' + this.id); // replace :scope with #ID
          var result = doc[method](selectors);
          this.id = id; // restore previous id
          return result;
        } else {
          return nativ.call(this, selectors); // use native code for other selectors
        }
      }
    });
  }
})(window.document, Element.prototype);

Usage

node.querySelector(':scope > someselector');
node.querySelectorAll(':scope > someselector');

---

For historical reasons, my previous solution

Based on all answers

// Caution! Prototype extending
Node.prototype.find = function(selector) {
    if (/(^\s*|,\s*)>/.test(selector)) {
        if (!this.id) {
            this.id = 'ID_' + new Date().getTime();
            var removeId = true;
        }
        selector = selector.replace(/(^\s*|,\s*)>/g, '$1#' + this.id + ' >');
        var result = document.querySelectorAll(selector);
        if (removeId) {
            this.id = null;
        }
        return result;
    } else {
        return this.querySelectorAll(selector);
    }
};

Usage

elem.find('> a');

querySelectorAll and :first child

The correct selector should be

".wikitable tr td:first-child a"

tr:first-child means “the tr which is the first child”. This only applies to

<tr>
  <td>
    <a href="" title="">John doe</a>
  </td>
  <td>
    <a href="" title="">other link</a>
  </td>
</tr>

How to select nth element of the same type

I know I can do it with document.querySelectorAll("td")[nth], but I'm looking for a pure css way.

There is no pure CSS equivalent. See Matching the first/nth element of a certain type in the entire document

How to get text value of specific columns in a table for each row?

You can do this

var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");
console.log(rows);
var output = [];
for(var i = 0; i< rows.length; i++){

    var cells = rows[i].getElementsByTagName("td");
  output.push(cells[0].innerText+" "+cells[1].innerText)
}
document.getElementsByClassName("output")[0].innerText = output;

https://jsfiddle.net/LyswLtf8/

Use JavaScript to target nth column in table or nth cell of every table row

You can iterate rows and return an array of values

let tds = Array.from(rows, row => row.cells[n]);

Getting next element in a table javascript

If you want to get the text inputs in the same row, you can go up to the row, then use a selector to get the inputs, e.g.

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>

---

Related Topics