Retrieving specific data in a HTML Table

Question

I draw a table (through datatable) and I would need to retrieve some specific data depending on certain conditions.

here is the table: tom dsdsdsds oo 60
jones aa oo 61

I need to parse each tr elements, and if the td input type checkbox contains the class selected, I need to retrieve the value of td with id="id" (of the same tr).

I tried to do the following:

var nbr_lignes = document.getElementById('datatable-table').rows.length;

        var i = 0;
        var j = 0;
        while(i < nbr_lignes){
            j=0;
            console.log("ligne: "+i);
            var nbr_colonnes = document.getElementById('datatable-table').getElementsByTagName('tr')[i].getElementsByTagName('td').length; 
            console.log("nb colonnes: "+nbr_colonnes);
            while(j < nbr_colonnes){                   

                console.log("contenu td: "+document.getElementById('datatable-table').getElementsByTagName('tr')[i].getElementsByTagName('td')[j].
                    innerHTML);

                j++;
            }
            i++;
        }

so I can parse each td of each tr but I don't know how to check if the current td contains the class selected and in that case retrieve the value of the td id="id"

I would appreciate if you can help me.

Each id ***must be unique*** https://stackoverflow.com/a/9454716/2813224 — zer00ne, Jun 16 '18 at 09:24
ok, I made the change, id is now id="id1", id="id2", etc,... how can I check the current td contains the class selected and in that case retrieve the value of the corresponding id for this td ? — tiamat, Jun 17 '18 at 01:48
done, my main concern is that I don't know the idX index to retrieve by using getElementById, that's my main difficulty... — tiamat, Jun 17 '18 at 02:02
done...what did you just done? Whatever, just keep that in mind if you seriously write any HTML/JS next time...actually if you don't understand how to assign unique ids then you won't understand my answer. — zer00ne, Jun 17 '18 at 03:26
zer00ne, I totally understood your point, I wrote this sample HTML table for test purpose to find a solution and also to get more knowledge on such development (which is not my strengh today I know...). I've just added a unique ID in my example but I was not able to determine this unique ID (to perform a getElementById for instance) on my Javascript function as the table is generated by ajax Datatable. anyway thank you for the downgrade. — tiamat, Jun 19 '18 at 09:03
You make a little more sense than before, I'll retract the downvote. Mr. Kwas explained it better, I was totally off. In formulating an answer I was assuming that there was a certain level of real world practicality, my answer would be no use for you. — zer00ne, Jun 19 '18 at 10:08
It seems to me that you just need the text in the last cell of each row that has its checkbox checked (why `.selected` when `:checked` or `.checked` (property not class) involves less code and is semantically a better way to leverage a checkbox's state.) — zer00ne, Jun 19 '18 at 10:20

score 1 · Accepted Answer · answered Jun 17 '18 at 02:35

Here is a simple solution: you're making a counter and iteration through every line ( tr ), whenever you find input.selected inside it, you are asking for value of the div with id of a counter. The result is stored in found table.

https://jsfiddle.net/prowseed/80rmcjgu/19/

var idx = 1;
var found = [];
var trs = [].slice.call(document.querySelectorAll('table tr'));
trs.forEach(function(tr){
    var isSelected = (tr.querySelector('input')).classList.contains('selected');
  console.log(isSelected);
  if(isSelected){
    console.log(document.getElementById('id'+idx));
    var value = (document.getElementById('id'+idx)).innerText;
    found.push({id: idx, value: value});
  }
  idx++;
});

(document.getElementById('result')).innerHTML = found.reduce(function(p, c){ return p + ' \n ' + c.id + ':' + c.value }, '');

Retrieving specific data in a HTML Table

1 Answers1