Jquery: Target column text

[Mark Reyes]

Hi,

I have a table that I displayed like this.

The primary key of my table is located at the second column and third column (in this case Area and Station/combination of the two).
I have a checkbox field in front of every row.

<tr>
	<td><input type="checkbox" value="" class="transID"/></td>
	<td>Area01</td>
	<td>Station1</td>
	<td>Manager</td>
	<!--other columns here-->
</tr>

Now, I want to send an ajax request on click of some links but I want to send the table row that was clicked
and send both of my primary key.

I tried to come up with below jquery code but I think its a little messy. Can you share to me another way of thinking for this?

var area = $(".transID:checked").closest("tr").children().eq(1).text();
var station = $(".transID:checked").closest("tr").children().eq(2).text();

$.getJSON("getData.htm", {"area": area, "station":station})
//other code here

Thanks

[David Newton]

Put a style or class on each row?

[Mark Reyes]

Hi David,

Put a style or class on each row?

I did not get this?

Do you mean, why I place a class on each row? Yes, I added a class on each row since they are a target of my jquery and css.

Thanks.

[David Newton]

You'd add a class or id on each row to contain the data you want to include rather than doing arbitrarily deep DOM traversals to get the data. It also decouples the data from its presentation.

[Mark Reyes]

Hi David,

You'd add a class or id on each row to contain the data you want to include rather than doing arbitrarily deep DOM traversals to get the data. It also decouples the data from its presentation.

Thanks for the clarification..

In some of my tables that has make-up key (like autogenerated key), I usually set the value of the checkbox to the autogenerated key. During link click, its easier to send the
key to the server.

But in this case, my table doesnt have an autogenerated or makeup key. The keys are composite of AreaCode + station code.

I initially thought of doing this.

<tr>
	<td><input type="checkbox" value="" id="Area01/Station1"/></td>
	<td>Area01</td>
	<td>Station1</td>
	<td>Manager</td>
	<!--other columns here-->
</tr>

But I am a bit reluctant in doing this. So I decided to fall back to DOM traversal using the Jquery functions?

Do you think my approach is a bit an overhead?

[David Newton]

I think it depends on the structure of your HTML, and if something changes, like you put a label into an area, it will no longer work.

[Bear Bibeault]

I will frequently use HTML5-style custom attributes to capture such data easly. For example:

<tr data-primary-key="somevalue">    

Makes the script easy as pie.

[Gregg Bolinger]

Another nice solution is jQuery's metadata plugin. It is especially useful if you need more than just 1 piece of data.

<td class="{id: 2, type:'someType'}" />

var data = $('td').metadata();
alert(data.id);
alert(data.type);

I suspect this will be part of jQuery core before long since jQuery already supports attaching data to DOM elements using $.data() method.

[Mark Reyes]

Hi Bear,

I will frequently use HTML5-style custom attributes to capture such data easly

I dont know much about HTML 5 attributes, but I googled and found john resig blog. This brings me to my next question though, I havent tested this but will this work with IE6?
I am afraid that I dont have the freedom to select my targeted browser and I need to support this.

Another nice solution is jQuery's metadata plugin

Thanks gregg, I will look into this also..

[Bear Bibeault]

mark reyes wrote:I havent tested this but will this work with IE6?

Yes. They will cause the HTML4 to be considered invalid by a validator (if you care about that sort of thing). They are considered valid for HTML5.