Javascript get entire 2nd column

Question

I have searched for a solution to this issue everywhere but nothing has worked. I have successfully pulled the first column but I am unable to pull the 2nd column. The following code pulls the entire 1st column successfully.

I changed .cells to [1] and it pulls nothing. I have tried :nth-child(1) but that doesn't work either. I feel I am missing something very trivial. Any help is very much appreciated.

function F0416()
{
    var tab = document.getElementById('partTable');
    var l = tab.rows.length;

    var s = '';
    for ( var i = 0; i < l; i++ )
    {
        var tr = tab.rows[i];

        var cll = tr.cells[0];

        s += ' ' + cll.innerText;
    }
    document.write(s);
}

Answer 1

First and foremost. Never ever use l (lower case el) as a variable. It is far to similar to 1 (one). Also be careful with upper case "o", and upper-case "i". Lowercase "o" is also often disliked.

It might look OK now, but when you review it in 6 months or a year, perhaps not so much. Also consider others might have to both read and modify your code.

Enough about that.

---

Your code, as it is, should work. If you do not get the desired result then the problem is elsewhere.

Make it reusable

However, to simplify the code and make it easier to re-use, you can add a parameter for id of the table as well as desired column. Resulting function could be something like this, with some extra checks:

function getColumn(table_id, col) {
    var tab = document.getElementById(table_id);
    var n = tab.rows.length;
    var i, s = null, tr, td;

    // First check that col is not less then 0
    if (col < 0) {
        return null;
    }

    for (i = 0; i < n; i++) {
        tr = tab.rows[i];
        if (tr.cells.length > col) { // Check that cell exists before you try
            td = tr.cells[col];      // to access it.
            s += ' ' + td.innerText;
        } // Here you could say else { return null; } if you want it to fail
          // when requested column is out of bounds. It depends.
    }
    return s;
}

var txt = getColumn('partTable', 2);

Check for failure

By using null as initial value for s, we can compare returned result with null to see if it was successful.

if (txt === null) {
    // Report error, or at least not work on "txt".
}

Simplify

Once you really understand it you can, if you want, simplify the loop to something like this:

for (i = 0; i < n; i++) {
    if (tab.rows[i].cells.length > col) {
        s += ' ' + tab.rows[i].cells[col].innerText;
    }
}

Use Array:

If you are going to use the cells one by one the best approach would be to return an Array instead of a string. Then you can loop the array, or if you want it as a string simply join it with desired delimiter. This would most likely be the most useful and reusable function.

// In function:
arr = [];

// In loop:
arr.push(tab.rows[i].cells[col].innerText);

var cells = getColumn("the_id", 2);
var text = cells.join(' ');

---

Demo:

Fiddle demo with array

---

Speed.

If your table cells does not contain any <script> or <style>, which they should not, you can also consider using textContent over innerText. Especially if table is large. It is a much faster. Here is a short article on the subject from Kelly Norton:

• INNERTEXT VS. TEXTCONTENT