I am trying to get the text in the first td in the parent tr which the clicked span element is located.
I thought the following would work, but it returns text in all td elements of the given tr. How do I do this without doing something like $t.closest('tr').find('td').eq(0).text()?
http://jsfiddle.net/9dh7pz73/3/
$("table span").click(function(){
var $t=$(this);
console.log($t.closest('tr'),$t.closest('tr').first('td').text());
});
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
</table>
The first() method doesn't take a selector. Instead you could do find('td:first'), like this:
$("table span").click(function(){
var $t = $(this);
console.log($t.closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
</table>
If you want to target the first <td> element when a specific span is clicked, you could just wire up an event handler to pick up the click and then find the first <td> via the td:first selector:
$('table span').click(function(){
// This will find the closest <tr> and then the first <td> element that appears within
console.log($(this).closest('tr').find('td:first').text());
});
Example
$('table span').click(function() {
console.log($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
</table>
Related
How to delete Parent Table with all table attribute, without removing children table using jquery/javascript
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Output::
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>
You can take inner table with unwrap and change html of parent element body in this case which will delete old table.
$('body').html($('table table').unwrap())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Or you can take inner table, delete old one and then add inner table to parent element.
var table = $('table table').unwrap();
$('table').remove()
$('body').html(table)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>
I have a table that include rows that any row has a attribute which called entity-state. I have get all td from rows that entity-state !== 'deleted'.
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
I want get all td values that are in rows that entity-state is added only.
You can use the attribute selector for this:
$('tr[entity-state="added"]');
// or
// $('tr:not([entity-state="deleted"])');
You should note that entity-state is a non-standard attribute and will mean your HTML is invalid. To solve this you should use a data-* attribute instead:
<tr data-entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr data-entity-state="added">
<td>3</td>
<td>4</td>
</tr>
$('tr[data-entity-state="added"]');
It's also possible to achieve what you need using filter(), which is useful when using data-* attributes as changing their values through jQuery does not update the DOM.
var $enabledRows = $('tr').filter(function() {
return $(this).data('entity-state') == 'added';
// or:
// return $(this).data('entity-state') !== 'deleted';
});
You can use combination of attribute equals selector and :not() (or not()) selector
$('tr:not([entity-state="deleted"])')
or
$('tr').not('[entity-state="deleted"]')
$('tr:not([entity-state="deleted"])')
// or $('tr').not('[entity-state="deleted"]')
.css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
You can use not selector with attribute selector,
$("tr:not([entity-state='deleted']) td").each(function() {
console.log($(this).text())
});
$('table tr[entity-state=added]').each(function(i,v){
var $td = $(this).find('td')
console.log($td.text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
Use the attr selector for this
Assuming this table (actually it could have more columns and rows):
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?
$(function () {
$( "td" ).on( "click", function() {
var type = $(this).text();
$('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Stores the text from current td, hides tr nodes which do not contain the text.
Here's a really really simple test that might help you get started.
$(function () {
$("#vehicles tr td").click(function () {
var desc = $(this).html();
$("#vehicles tr").css("background-color", "white");
$("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
});
});
This assigns a click event to every TD element, stores its value somewhere and then checks if said value exists in the table, highlighting the elements that are matched. Give it a spin, I think it'll set you off in the right direction.
In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/
Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.
For example, I have a code:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I want this to be sorted like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I used this code:
function sortNum(a, b) {
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
$(function() {
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
$('table#information').append($(elems));
});
}
this works but, the problem is, the output is like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
</table>
The empty one goes to top. I want the empty ones in the bottom.
Thanks
Instead of
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;
insert
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
http://jsfiddle.net/E56j8/
You have number of plugins to sort it why are you reinventing the wheel.
Here is one such plugin
Link
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
$("#myTable").tablesorter();
Have a look at Sorting - we're doing it wrong. A simple jQuery plugin for sorting stuff is available here.
some notes on your code:
// you're binding a document ready event within a function call?
// looks the wrong way 'round, to me
function sortTheTable(){
$(function() {
// 1) you probably want to use .detach() over .remove()
// 2) "tr:has(.price)" will match ALL table rows
// containing an element with the class .price
// even if they're children of different <table>s!
// 3) $('.selector') is already "an array", at least it's sortable right away.
// there's no need for $.makeArray() here
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
// "#information" is a sufficient (and more efficient) selector,
$('table#information').append($(elems));
});
}