I am dynamically creating a table using JSON so i dont know in advance how many column and/or rows will be generated.

I add a clicked event for the row that get selected.

Now my every table will have a column name ID

I want to find the value of ID for the selected row.

How can i achieve this?

I have googled a find a lot of sample which select the cell be index but not by column name.

My table is something like:

My table is generated like:

function CreateTableView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
    theme = 'mediumTable'; //default theme
}

if (enableHeader === undefined) {
    enableHeader = true; //default enable headers
}

// If the returned data is an object do nothing, else try to parse
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

var str = '<table class="' + theme + '">';

// table head
if (enableHeader) {
    str += '<thead><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></thead>';
}

// table body
str += '<tbody>';
for (var i = 0; i < array.length; i++) {
    str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
    for (var index in array[i]) {
        str += '<td>' + val(array[i][index]) + '</td>';
    }
    str += '</tr>';
}
str += '</tbody>'
str += '</table>';
return str;

}

Any help is appreciated

I am dynamically creating a table using JSON so i dont know in advance how many column and/or rows will be generated.

I add a clicked event for the row that get selected.

Now my every table will have a column name ID

I want to find the value of ID for the selected row.

How can i achieve this?

I have googled a find a lot of sample which select the cell be index but not by column name.

My table is something like:

My table is generated like:

function CreateTableView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
    theme = 'mediumTable'; //default theme
}

if (enableHeader === undefined) {
    enableHeader = true; //default enable headers
}

// If the returned data is an object do nothing, else try to parse
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

var str = '<table class="' + theme + '">';

// table head
if (enableHeader) {
    str += '<thead><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></thead>';
}

// table body
str += '<tbody>';
for (var i = 0; i < array.length; i++) {
    str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
    for (var index in array[i]) {
        str += '<td>' + val(array[i][index]) + '</td>';
    }
    str += '</tr>';
}
str += '</tbody>'
str += '</table>';
return str;

}

Any help is appreciated

• javascript
• jquery
• html

1 Answer 1

I hope i understood you correctly but this should do it. It alerts the content of the td with the name ID of the clicked tr.

$('tr').live('click',function(){
    alert( $(this).find('td[name="ID"]').html() );
});

To find the td via the th with text ID you could do this:

var index = $('yourtable th:contains("ID")').index();
alert( $('.selectedRow td:eq('+index+')').html() );

What I would do though is to save the ID in the TR's data object so you won't have to pull it out the td but can access it directly, like this:

[...]
<tr data-id="26"><td>.....</td></tr>
[...]

then you can access it like that:

$('.selectedRow').data('id');