CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 3945

check value in table row column

I have a html table - TemplateData. Inside the Tbody I have a column on each row 'data-uid', which may not be unique. I have sorted the table before it is displayed in ascending order. It looks like so:

<tr id="Tr2" data-uid="1" role="row" class="odd"/>
<tr id="Tr2" data-uid="2" role="row" class="even"/>
<tr id="Tr2" data-uid="2" role="row" class="odd"/>
<tr id="Tr2" data-uid="2" role="row" class="even"/>
<tr id="Tr2" data-uid="3" role="row" class="odd"/>
<tr id="Tr2" data-uid="4" role="row" class="odd"/>

NOTE 2 appears three times. Each value may appear more than once

I can get the table by using:

var table = $('#TemplateData').dataTable();

My Question being: if I have a value stored in 'val' how can I check the table to get the row with data-uid=val;

so...something like table.rows[val]

From here check the next row to see if its data-uid is different from val. If so pass back this value. If not continue onto the next row until you find a different value.

So....

val = 2
get table.row[where val = data-uid]
check next row
if table.rows[data-uid = val] continue until it is not the same, when value is different pass back
var newVal = ?

....any help would be appreciated thanks

Upvotes: 1

Views: 3955

Answers (2)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

Even if you are not using it, id attribute should be unique.

Then, you can use jquery select syntax to get rows with some characteristics:

function datavalchanged(value) {
   ..put code to execute at change detection;
}

var group = $('tr[role="row"]');

var desired dataval = group[0].getAttribute('data-uid');
/* additionally put dataval=0 to detect also first data-uid change.  */

to get all rows that have role = row and cycle trought them like an array.

for (var i = 0; i < group.length; i++) {
   var row = group[i];
   var value = row.getAttribute('data-uid');
   while (value == dataval) {
       continue;
   }
   datavalchanged(value);
   dataval=value;
   /*ready for next change detection or force exit if interested in first change*/
}

at the end of while loop the value has the next value u need.

edit: it looks like that what i wrote it does not work if the html is not complete:

<table>
<tr id="Tr2" data-uid="1" role="row" class="odd" ><td></td></tr>
<tr id="Tr2" data-uid="2" role="row" class="even"><td></td></tr>
<tr id="Tr2" data-uid="2" role="row" class="odd" ><td></td></tr>
<tr id="Tr2" data-uid="2" role="row" class="even"><td></td></tr>
<tr id="Tr2" data-uid="3" role="row" class="odd" ><td></td></tr>
<tr id="Tr2" data-uid="4" role="row" class="odd" ><td></td></tr>
</table>

Upvotes: 0

Zorken17
Zorken17

Reputation: 1896

This is with pure JavaScript, hope it helps.

    var elements = document.getElementsByTagName('tr');
    var elementsLength = elements.length;

    for (var i = 0; i < elements.length; i++) {
        var currentElement = elements[i].getAttribute('data-uid');
        for (var j = i + 1; j < elements.length; j++) {

            var nextElement = elements[j].getAttribute('data-uid');

            if(currentElement !== nextElement) {
                return elements[j].getAttribute('data-uid');
            }
        }
    }

God luck,

Zorken17

Upvotes: 1

Related Questions