I am looking for a selector for all cells in a particular table column. I would like to add html to some existing text inside the cell.
Thanks!
2
-
Do you mean all cells in a table row?spinon– spinon2010-12-22 06:57:01 +00:00Commented Dec 22, 2010 at 6:57
-
I am very late to this party, but cannot resist mentioning that you don't need a plugin to do this. See my answer below.cssyphus– cssyphus2013-08-21 22:03:38 +00:00Commented Aug 21, 2013 at 22:03
Add a comment
|
3 Answers
Comments
$("#table id").find("TD")
This will give you all TD's in the table. But it will also give you all TD's in any nested tables as well.
Can you provide some code to help be more specific with the question?
Comments
No need for a plugin! The code is quite simple.
HTML:
<h1>Add/Remove Column Example:</h1>
<span class="blurb">Instructions:<br/>1. Click Add Column button to append table to end.<br />2. Click <span class="remove">rem</span> to remove THAT column. <br />3. Code is currently set to COLORIZE rather than remove, just adjust in code and click RUN button at top left.</span><br/><br/>
<table class="table-editor" id="table1">
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<tbody>
<tr class="highlighted-row">
<td>•</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td>•</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td></td>
<td>•</td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
</tr>
</tbody>
</table>
<input id="addcol" type="button" value="Add Column" />
jQuery Code:
$('#addcol').click(function() {
var $tablerow = $('table.table-editor').find('tr');
count = 0;
$tablerow.each(function(index, value){
count += 1;
//alert('Working on row: ' + count);
var $listitem = $(this);
//alert('ListItem: ' + $listitem.index());
n = parseInt($listitem.index());
//alert('Value of n: ' + n);
if (n == 3) {
var $newRow = $("<td class='remove'>rem</td>");
$("table.table-editor tr:eq(" + n + ")").append($newRow);
}else{
var $newRow = $("<td>" + n + "</td>");
$("table.table-editor tr:eq(" + n + ")").append($newRow);
}
});
});
$(document).on('click', 'td.remove', function() {
var ndx = $(this).index() + 1;
//alert('Val of ndx: ' + ndx);
$('td:nth-child(' +ndx+ ')').css('background-color','red'); //comment this line to remove (see next line)
//$('td:nth-child(' +ndx+ ')').remove(); //UNCOMMENT this line to remove (see prev line)
});
References:
Hide table column with single line of jQuery
Use jQuery to delete table row by clicking on it
