How To Get Innertext Of Each Element Deep Inside Multiple Tables?(chrome Extension)

I have been trying this for hours(I am new to web development). I need to access a table which contains many columns one of which contains rows of people's names, and put them in

Solution 1:

Update

There's a possibility that .PSLONGEDITBOX is created dynamically and that it doesn't exist in the DOM when script is invoked. The updated demo will invoke the script onDOMReady and then a second time at onload which is the latest load event possible.

Details are commented in demo

---

Demo

// This loads dataArray() when DOM is ready
$(function() {
  var onDOM = dataArray();
  console.log('onDOMReady: ' + onDOM);
});


functiondataArray() {

  // Declare empty arrayvar boxArray = [];

  /* .each() .PSLONGEDITBOX extract it's text
  || with .text() method then 
  || .push() extracted text into the empty array
  */
  $('.PSLONGEDITBOX').each(function(idx, box) {
    let content = $(this).text();
    boxArray.push(content);
  });
  return boxArray;
}

functiononLoadEvent(fnc) {
  // assign any functions on 'window.onload' to a varvar onLoad = window.onload;
  // if there isn't any function on 'window.onload'...if (typeofwindow.onload != 'function') {

    // Assign fnc to it...window.onload = fnc;
    let F = fnc();
    console.log('onLoad: ' + F);
    // Otherwise...
  } else {

    window.onload = function() {
      // Call the function that's there already...onLoad();
      console.log('Original function loaded...');
      // ...then call fncfnc();
      let F = fnc();
      console.log('onLoad: ' + F);
    }
  }
}
/* Both expressions will run dataArray after everything
|| else has loaded. This is the onload event, which is
|| the most thorough of loading events and the slowest.
|| Besides being the last event, it's other major con
|| is that only one function can be called, any others
|| called before the last function called is overridden.
|| The function onLoadEvent() is designed to find any 
|| previously assigned function or method to the onload 
|| event and then invoke it first, then invoke any
|| given function afterwards.
*//* add a '/' to enable expression below.

var onLoad = dataArray();
window.onload = console.log('onLoad Event: ' + onLoad);

/*///* Remove a '/' to disable function belowonLoadEvent(dataArray);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid='A'><tr><tr><td><td><td><td><td><td><td>&nbsp;<td>&nbsp;<tr><td>&nbsp;<tr><td>&nbsp;<tr><td><tableid='B'><tableid='C'><tr><td><spanclass='PSLONGEDITBOX'>ABC</span><tr><td><spanclass='PSLONGEDITBOX'>DEF</span><tr><td><spanclass='PSLONGEDITBOX'>GHI</span><tr><td><spanclass='PSLONGEDITBOX'>JKL</span><tr><td><spanclass='PSLONGEDITBOX'>MNO</span></td></td></td></tr></td></td></tr></table></table></td></tr>

---

Old

Try .each() jQuery method on the .PSLONGEDITBOX class and extract the text with the .text() method.

Solution 2:

This

n = $(".PSLONGEDITBOX");

should work. but it won't return the text, it returns the SPAN element as an object. to get the text you need

n = $(".PSLONGEDITBOX").text();

Solution 3:

I don't think it depends on the structure of your HTML. Do you use $(document).ready? Or maybe you should include your js file near closing body on your page.