How can I get col td id (not td column number)?

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 cols td 4 id?

If I get the column number using this jquery command:

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

cn will be 0, but its style shows that it belongs to col1 and I need to brag like td.col.id

when I set rowspan = "2" in td above td (like td 4), this td column number will be different from its col (or colgroup) order, and I set the background color to display it.

Edit: I believe there is a way to solve this problem, because when td knows col (colgroup) about it, there should be a way to ask td in the dom tree. (Td4 you show the style of a specific column, who is this col?)

Answer 1

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

Instead of developing a complex function that detects rows of rows, etc., it may be advisable to simply assign identifiers to each cell in the table or create another custom solution for your table. for example, do you know in advance how many columns each row has? Or you use the actual background color or the "secret" css attribute as an identifier.

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

edit (read the discussion below): as described here , you should not create custom css attributes; they are often ignored by the browser (and not accessible through .attr() ). Sahar's solution was to tag each element associated with the merge rows in order to remember the number of columns the element should count.

Answer 2

First you need to calculate the column number of td itself.

This is done by counting the number of tds to our td; accounting for colspan attributes:

 function getElementColumn(td) { var tr = td.parentNode; var col = 0; for (var i = 0, l = tr.childNodes.length; i < l; ++i) { var td2 = tr.childNodes[i]; if (td2.nodeType != 1) continue; if (td2.nodeName.toLowerCase() != 'td' && td2.nodeName.toLowerCase() != 'th') continue; if (td2 === td) { return col; } var colspan = +td2.getAttribute('colspan') || 1; col += colspan; } } 

You can then iterate over the col elements and return the number corresponding to the column number.

First we need to find the colgroup element. Then it is similar to calculating the column number td:

 function getCol(table, colNumber) { var col = 0; var cg; for (var i = 0, l = table.childNodes.length; i < l; ++i) { var elem = table.childNodes[i]; if (elem.nodeType != 1) continue; if (elem.nodeName.toLowerCase() != 'colgroup') continue; cg = elem; break; } if (!cg) return; for (var i = 0, l = cg.childNodes.length; i < l; ++i) { var elem = cg.childNodes[i]; console.log(elem); if (elem.nodeType != 1) continue; if (elem.nodeName.toLowerCase() != 'col') continue; if (col == colNumber) return elem; var colspan = +elem.getAttribute('span') || 1; col += colspan; } } 

With these two functions, you can do this:

 var id = getCol(table, getElementColumn(td)).id; 

http://jsfiddle.net/wHyUQ/1/

jQuery version

 function getElementColumn(td) { var col = 0; $(td).prevAll('td, th').each(function() { col += +$(this).attr('colspan') || 1; }); return col; } function getCol(table, colNumber) { var col = 0, elem; $(table).find('> colgroup > col').each(function() { if (colNumber == col) { elem = this; return false; } col += +$(this).attr('span') || 1; }); return elem; } 

http://jsfiddle.net/wHyUQ/2/

Answer 3

Eliminating rows or flaps would be incredibly difficult. I suggest that you iterate over all col elements, set the width to 0px for them, and check if this affects the width of your td or th element. If so, this is a related column.

Example:

 // Your table elements $table = $('yourTableSelector'); $cell = $('td or th'); $cols = $table.find('colgroup > col'); // determine the related col // by setting a width of 0px. the // resulting width on the element should be negative or zero. // this is hacky, but the other way would // be to resolve rowspans and colspans, which // would be incredibly complex. var $relatedColumn = $(); $cols.each(function(){ var $col = $(this); var prevStyle = $col.attr('style') === 'string' ? $col.attr('style'): ''; $col.css('width', '0px'); if($cell.width() <= 0){ $relatedColumn = $col; $col.attr('style', prevStyle); // reset return false; } else { $col.attr('style', prevStyle); // reset } });