jQuery - Selecting table column?
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!
Here it is
http://plugins.jquery.com/project/column-selector
http://www.bramstein.com/projects/column/
$("#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?
No need for a plugin! The code is quite simple.
Working jsFiddle example
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
精彩评论