How can I get the col's id of a td (not column number of a td)?

Question

In this example:

<table border="1">
    <col id="col0" style="background-color: #FFFF00"/>
    <col id="col1" style="background-color: #FF0000"/>
    <tr><td rowspan="2">1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

How can I get the col’s id of td 4?

If I get it's column number with this jquery command:

var cn = $(this).parent().children().index($(this));

cn will be 0, but it’s style shows that it belongs to col1 and I need a commend like td.col.id

when I set rowspan="2" at the td above a td (eg. td 4) this td's column number will be different from it's order of col(or colgroup) and I set background color to show it.

Edit: I believe there is a way to solve this problem, because when td knows about it's col(colgroup) there must be a way to ask it from td at dom tree. (Td4 you show style of a specific col, who is that col?)

Answer 1

<td>4</td> is the first child of the second tablerow, so you should indeed get column 0.

instead of elaborating a complex function that detects rowspans etc, it might be advisable to just assign ids to each table cell, or create another custom solution for your table. e.g. you know in advance how many columns each specific row has? Or you use the actual background color or a 'secret' css attribute as identification.

ps. my useless fiddle until I understood the actual problem.

edit (read discussion below): as described here, you are not supposed to create custom css attributes; these are often ignored by the browser (and not available via .attr()). Sahar's solution was to mark each element affected by a merging of rows to remember for how many columns the element should count.