I have a table I'm working with that is like such:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent">
<tr class="tablerow">
<td>This is the td I want to add a class to.</td>
<td class="cell2">Stuff</td>
<td class="cell3">Stuff</td>
</tr>
<tr class="tablerow">
<td>This is the td I want to add a class to.</td>
<td class="cell2">Stuff</td>
<td class="cell3">Stuff</td>
</tr>
</table>
The first TD tag in each row does not have a class or ID to work with. I don't have access to change the HTML output so I figured to add in a bit of jQuery to target the first TD tag of each tablerow. How would I do this?
jQuery addClass() Method The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute. Tip: To add more than one class, separate the class names with spaces.
append() / prepend() to Add Table Row in jQuery. To add a row in the table body using jQuery, we can use DOM inside insertion methods of append() or prepend() that adds an element to the suggested element's start or end. Here we will select the tbody element of table element with id="test" to add a row after it.
jQuery: code to get TD text value on button click. text() method we get the TD value (table cell value). So our code to get table td text value looks like as written below. $(document). ready(function(){ // code to read selected table row cell data (values).
$('#tablecontent td:first-child').addClass('someClass');
This uses the first-child selector to select all <td>
elements in the #tablecontent
table that are a first-child
of their parent.
Example: http://jsfiddle.net/duKKC/
You can try the below jQuery
$('.tablerow').each(function(index) {
$(this).children('td').first().addClass('class');
});
This will solve your problem :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With