Extracting table column values from html table using javascript

Question

Only started using javascript 2 weeks ago so I only have a limited understanding.

I have some javascript code that generates a html table from excel documents and i need to extract the values from part of one column and place those values into an array. Which i later will use to generate a line graph. The code mainly needs to work on IE11.

Truncated example table below.

    <tbody>
       // several other rows here
        <tr>
            <td id="sjs-A16">column head A</td>
            <td id="sjs-B16">column head B</td>
            <td id="sjs-C16">column head C</td>
            <td id="sjs-D16">column head D</td>
            <td id="sjs-E16">column head E</td>
            <td id="sjs-F16">column head F</td>
            <td id="sjs-G16">column head G</td>
            <td id="sjs-H16">column head H</td>
        </tr>
        <tr>
            <td id="sjs-A17">1A</td>
            <td id="sjs-B17">1B</td>
            <td id="sjs-C17">1C</td>
            <td id="sjs-D17">1D</td>
            <td id="sjs-E17">1E</td>
            <td id="sjs-F17">1F</td>
            <td id="sjs-G17">1G</td>
            <td id="sjs-H17">1H</td>
        </tr>
        <tr>
            <td id="sjs-A18">2A</td>
            <td id="sjs-B18">2B</td>
            <td id="sjs-C18">2C</td>
            <td id="sjs-D18">2D</td>
            <td id="sjs-E18">2E</td>
            <td id="sjs-F18">2F</td>
            <td id="sjs-G18">2G</td>
            <td id="sjs-H18">2H</td>
        </tr>
        <tr>
            <td id="sjs-A19">3A</td>
            <td id="sjs-B19">3B</td>
            <td id="sjs-C19">3C</td>
            <td id="sjs-D19">3D</td>
            <td id="sjs-E19">3E</td>
            <td id="sjs-F19">3F</td>
            <td id="sjs-G19">3G</td>
            <td id="sjs-H19">3H</td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
   //several more empty rows here
    </tbody>

I need the value of all cells with ids in the E(xx) but only id sjs-E17 and greater (sjs-Exx where xx >= 17), so value 1E-3E+ but no cell above that one (so not sjs-E16 to sjs-E1).

The number of rows i varies but the needed values always start on row 17. And as seen the scrip generates several empty rows after the values stop, but none of them have any id.

Expected results is just an array (or function) containing the values from cell E17+

 var test_array = ["1E", "2E", "3E", ...];

Answer 1

Using jQuery , you can do this:

 var td = $('[id^="sjs-E"]'), valArray = []; td.each(function() { var id = $(this).attr('id'), idVal = +id.substring(5); //parse value after `E` to number using (+) //check if idVal is number if (!isNaN(idVal)) { if (idVal >= 17) { valArray.push($(this).html()); } } }); console.log(valArray); 

 .header { background-color: grey; font-size: 15px; } td { text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr class="header"> <td id="sjs-A16">column head A</td> <td id="sjs-B16">column head B</td> <td id="sjs-C16">column head C</td> <td id="sjs-D16">column head D</td> <td id="sjs-E16">column head E</td> <td id="sjs-F16">column head F</td> <td id="sjs-G16">column head G</td> <td id="sjs-H16">column head H</td> </tr> <tr> <td id="sjs-A17">1A</td> <td id="sjs-B17">1B</td> <td id="sjs-C17">1C</td> <td id="sjs-D17">1D</td> <td id="sjs-E17">1E</td> <td id="sjs-F17">1F</td> <td id="sjs-G17">1G</td> <td id="sjs-H17">1H</td> </tr> <tr> <td id="sjs-A18">2A</td> <td id="sjs-B18">2B</td> <td id="sjs-C18">2C</td> <td id="sjs-D18">2D</td> <td id="sjs-E18">2E</td> <td id="sjs-F18">2F</td> <td id="sjs-G18">2G</td> <td id="sjs-H18">2H</td> </tr> <tr> <td id="sjs-A19">3A</td> <td id="sjs-B19">3B</td> <td id="sjs-C19">3C</td> <td id="sjs-D19">3D</td> <td id="sjs-E19">3E</td> <td id="sjs-F19">3F</td> <td id="sjs-G19">3G</td> <td id="sjs-H19">3H</td> </tr> <!-- several empty rows --> </tbody> </table> 

Or, using vanilla javascript:

 var tdRE = /^sjs-E([2-9]\\d|1[7-9]|[1-9]{3,})$/, els = document.getElementsByTagName('*'), valArray = []; for (var i = 0; i < els.length; i++) { var match = tdRE.exec(els[i].id); if (match) { if ((+match[1]) >= 17) { //the (+) operator again, convert string to number and check if >= 17 valArray.push(els[i].innerHTML); } } } console.log(valArray); 

 .header { background-color: grey; font-size: 15px; } td { text-align: center; } 

 <table> <tbody> <tr class="header"> <td id="sjs-A16">column head A</td> <td id="sjs-B16">column head B</td> <td id="sjs-C16">column head C</td> <td id="sjs-D16">column head D</td> <td id="sjs-E16">column head E</td> <td id="sjs-F16">column head F</td> <td id="sjs-G16">column head G</td> <td id="sjs-H16">column head H</td> </tr> <tr> <td id="sjs-A17">1A</td> <td id="sjs-B17">1B</td> <td id="sjs-C17">1C</td> <td id="sjs-D17">1D</td> <td id="sjs-E17">1E</td> <td id="sjs-F17">1F</td> <td id="sjs-G17">1G</td> <td id="sjs-H17">1H</td> </tr> <tr> <td id="sjs-A18">2A</td> <td id="sjs-B18">2B</td> <td id="sjs-C18">2C</td> <td id="sjs-D18">2D</td> <td id="sjs-E18">2E</td> <td id="sjs-F18">2F</td> <td id="sjs-G18">2G</td> <td id="sjs-H18">2H</td> </tr> <tr> <td id="sjs-A19">3A</td> <td id="sjs-B19">3B</td> <td id="sjs-C19">3C</td> <td id="sjs-D19">3D</td> <td id="sjs-E19">3E</td> <td id="sjs-F19">3F</td> <td id="sjs-G19">3G</td> <td id="sjs-H19">3H</td> </tr> <!-- several empty rows --> </tbody> </table> 

Regex explanation: ^sjs-E([2-9]\\d|[1-9][7-9]|\\d{3,})$

^ - asserts beginning of string
() - catching group
| - logical OR
$ - end of string

^sjs-E - starts with sjs-E
[2-9]\d - matches between 20 - 99
OR
1[7-9] - matches 17 - 19
OR
[1-9]{3,} - matches 100 and above

Answer 2

 let result = []; $('table tr td[id^="sjs-E"]').each(function(){ let ele = $(this); //extracting last two digits of id let digits = ele.attr('id').slice(-2); if(!isNaN(digits) && digits >= 17){ result.push(ele.html()); } }); console.log(result); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td id="sjs-A16">column head A</td> <td id="sjs-B16">column head B</td> <td id="sjs-C16">column head C</td> <td id="sjs-D16">column head D</td> <td id="sjs-E16">column head E</td> <td id="sjs-F16">column head F</td> <td id="sjs-G16">column head G</td> <td id="sjs-H16">column head H</td> </tr> <tr> <td id="sjs-A17">1A</td> <td id="sjs-B17">1B</td> <td id="sjs-C17">1C</td> <td id="sjs-D17">1D</td> <td id="sjs-E17">1E</td> <td id="sjs-F17">1F</td> <td id="sjs-G17">1G</td> <td id="sjs-H17">1H</td> </tr> <tr> <td id="sjs-A18">2A</td> <td id="sjs-B18">2B</td> <td id="sjs-C18">2C</td> <td id="sjs-D18">2D</td> <td id="sjs-E18">2E</td> <td id="sjs-F18">2F</td> <td id="sjs-G18">2G</td> <td id="sjs-H18">2H</td> </tr> <tr> <td id="sjs-A19">3A</td> <td id="sjs-B19">3B</td> <td id="sjs-C19">3C</td> <td id="sjs-D19">3D</td> <td id="sjs-E19">3E</td> <td id="sjs-F19">3F</td> <td id="sjs-G19">3G</td> <td id="sjs-H19">3H</td> </tr> </tbody> </table> 

Answer 3

  var test_array = [];
  var isGreaterThan = 17;
  var until = 1000; // i don't know
  for (var i=isGreaterThan; i < until; i++) {
        var html = document.getElementById('sjs-E' + i.toString());
        if (html) {
               test_array.push(html.innerText);
        }
  }