We Keep Coding

How to remove TR if there is a specific text inside its TD's in jquery?

I want to remove the TR if its 2nd TD value is similar to another TRs TD value and it's last TD value shouldn't be HIT. And the another scenario is if I have 3 TRs with the same data then 2 of them should be removed and 1 should remain there.
Example:
<table>
<tr>
<td>ID</td>
<td>Ref No</td>
<td>Name</td>
<td>Result</td>
</tr>
<tr>
<td>1</td>
<td>1121</td>
<td>Joseph</td>
<td>CLEAR</td>
</tr>
<tr>
<td>2</td>
<td>1122</td>
<td>Mike</td>
<td>CLEAR</td>
</tr>
<tr>
<td>3</td>
<td>1122</td>
<td>Mike</td>
<td>CLEAR</td>
</tr>
<tr>
<td>4</td>
<td>1122</td>
<td>Mike</td>
<td>HIT</td>
</tr>
<tr>
<td>5</td>
<td>1123</td>
<td>Jim</td>
<td>HIT</td>
</tr>
<tr>
<td>6</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
<tr>
<td>7</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
<tr>
<td>8</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
</table>
What I want:
<table>
<tr>
<td>ID</td>
<td>Ref No</td>
<td>Name</td>
<td>Result</td>
</tr>
<tr>
<td>1</td>
<td>1121</td>
<td>Joseph</td>
<td>CLEAR</td>
</tr>
<tr>
<td>4</td>
<td>1122</td>
<td>Mike</td>
<td>HIT</td>
</tr>
<tr>
<td>5</td>
<td>1123</td>
<td>Jim</td>
<td>HIT</td>
</tr>
<tr>
<td>6</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
</table>
Can anybody tell me how to achieve this task?
Any help would be highly appreciated.

So i made this clumsy answer for you. You can check it out in the fiddle here.
EDIT: after some discussion about what should the behaviour be, i updated the fiddle. so now it adds the check if there are any fields in the duplicates that have a "HIT" value in fourth column it will keep the first row with HIT value, otherwise it will keep the first value for each unique second column value.
I am sure there is a better/simpler/more effective way to do this with jQuery, but that is what I came up with. The basic algorithm is this: get all rows and iterate. For each row: find the value in second td (column), check all subsequent rows, fetch the value in second column there and compare them. if they are the same, remove the duplicate row from DOM.
//get the table rows, this should be done with a different selector if there are more tables e.g. with class or id...
$tableRows = $("tr");
//iterate over all elements (rows)
$tableRows.each(function(index, element) {
var $element = $(element);
//get the value of the current element
var currentRowValue = $element.find("td:nth-child(2)").text();
//check all elements that come after the current element if the value matches, if so, remove the matching element
for (var i = index + 1; i < $tableRows.length; i++) {
var $rowToCompare = $($tableRows[i]);
var valueToCompare = $rowToCompare.find("td:nth-child(2)").text();
if(valueToCompare === currentRowValue) {
//remove the duplicate from dom
//if the second row (the duplicate) has 4th column of "HIT" then keep the second row and remove the first row
var duplicateRowFourthColumnVal = $rowToCompare.find("td:nth-child(4)").text();
if(duplicateRowFourthColumnVal == "HIT") {
$element.remove();
}
else {
$rowToCompare.remove();
}
}
}
});`

Get a value out of element with same variable class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Posted a similar question, but may be this case will make more sense. Got a table with many first td's of tr having a duplicate first td in a different tr. I'm using these for identification. I want to pull a value from 2nd tr and insert it into already appended(!) td in the first tr. Here is a quick html code example
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tbody>
</table>
<div>
And here is my jquery code
$(".tableclass table tbody tr").each(function(){
$(this).append('<td class="fbctr"></td>');
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
// this is where I'm having a problem
var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)");
$(this).find(".fbctr").html(fbctr);
});

OK, your problem is that jquery .filter() works on a set of given DOM elements. So you have to first select <tr> elements and then use .filter(). In your question you are applying it on your <table>
So, Your JavaScript code will be like this:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined"){
console.log(fbctr);
$(this).find(".fbctr").html(fbctr);
}
});
Update(Corrected Code):
In case you want to copy the value of first occurring element into the second occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
if(elements.length > 1){
var fbctr = elements.eq(0).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$(this).find(".fbctr").html(fbctr);
}
});
And in case you want to copy the value of second occurring element into the first occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
var fbctr = elements.eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$('.'+trclass).not(this).find(".fbctr").html(fbctr);
});

You can filter out the duplicate rows first and remove all the duplicate rows but not first, then in the first rows append the 3rd td element of the last duplicate row.
In the below solution i am also removing the duplicate rows, you can keep/remove that based on your requirement.
Here is the working solution where i have added few extra node for testing of the solution.
var rows = $(".tableclass table tbody tr")
rows.each(function() {
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var dupeRows = rows.filter("." + trclass);
rows.filter("." + trclass).not(":first").remove();
if (dupeRows.length > 1) {
rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>8</td>
</tr>
<tbody>
</table>
<div>
;

Table sort columns horizontal

I have a problem sorting a table.
My table HTML is this:
<table>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
</table>
And I want it to look like this:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Here is my current sorting code:
var rows = $('tr');
rows.eq(0).find('td').sort(function(a, b) {
return $.text([a]) > $.text([b]) ? 1 : -1;
}).each(function(newIndex) {
var originalIndex = $(this).index();
rows.each(function() {
var td = $(this).find('td');
if (originalIndex !== newIndex)
td.eq(originalIndex).insertAfter(td.eq(newIndex));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
</table>
The code only sorts by separate rows. I can't use any plugins and I need to do this with jquery or javascript. Can anyone suggestion how to make it work?

It's simple.
Store all the numbers from td in an array.
Sort the array.
Modify the tds according to array.
Here's how you'd do it in JS:
var tds= [].slice.call(document.getElementsByTagName("td")); //Find <td> and store in array
var tdsa=tds.map(function (a) {return Number(a.innerHTML);}); //Take the innerHTMLs
tdsa.sort(); //Sort it
tds.forEach(function(a,i) {a.innerHTML=tdsa[i]}); //Modify <td>'s innerHTML

Try this - method:
get the items of the table into an array
sort the array
rebuild the rows
var columnCount = 2;
var items = [];
$('td').each(function (idx, obj) {
items.push(obj.innerHTML);
});
items.sort();
$('table tr').remove();
for(var i=0; i<items.length; i+=2) {
var row = '<tr>';
for(var j=0; j<columnCount; j++) {
row += '<td>' + items[i+j] + '</td>';
};
row += '</tr>';
$('table').append(row);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
</table>

Need to compare a certain cell in contiguous rows and find rows where the value of that cell changes

I have an html table generated dynamically from a database. Rows where a particular cell value is the same represents paired data and I want to separate those pairs with an empty row. The best way I can think of is to find where that value differs from the preceding value. Is this possible?
<table id="myTable">
<tr>
<th>Team #</th>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr class="data-in-table">
<td class="id">12345</td>
<td>Tom</td>
<td>46</td>
<tr class="data-in-table">
<td class="id">12345</td>
<td>Dick</td>
<td>32</td>
<tr class="data-in-table">
<td class="id">34567</td>
<td>Harry</td>
<td>45</td>
<tr class="data-in-table">
<td class="id">76543</td>
<td>Will</td>
<td>45</td>
</tr>
<tr class="data-in-table">
<td class="id">76543</td>
<td>Sam</td>
<td>45</td>
</tr>
</tbody>
This is code I've seen comparing adjacent cells and tried to change for my needs:
$("#myTable").each(function () {
$(this).find('tr').each(function (index) {
var currentRow = $(this);
var nextRow = $(this).next('tr').length > 0 ? $(this).next('tr') : null;
if (index%2==0&&nextRow && currentRow(td[0].text() != nextRow(td[0].text()) {
$('#myTable tr:next').after('<tr><td></td><td></td><td></td></tr>');
}
});
});
I'd like it to look something like this:
Team # Name Age
12345 Tom 46
12345 Dick 32
34567 Harry 45
76543 Will 45
76543 Sam 45
As the database updates, team members will always be positioned adjacent to each other, but sometimes one teammate will appear before the second teammate and the table should reflect that.

I found that this works, through trial and error:
var last = ''
var rowCount = $('#myTable >tbody >tr').length;
for (var i=0;i<rowCount-1;i++) {
if (last != $('#myTable tr .id:eq('+i+')').html()) {
var lastRow = $('#myTable tr .id:eq('+i+')')
$(lastRow).parents('tr').before('<tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>')
}
var last = $('#myTable tr .id:eq('+i+')').html()
}
I don't know if there is a more efficient way than using a for.. statement to run through each row.

How to extract text inside nested HTML using JQuery?

I have here HTML Code:
<div class="actResult" style="border: solid">
<table>
<tbody>
<tr>
<td>Order Number</td>
<td>1</td>
</tr>
<tr>
<td>Customer Number</td>
<td>3</td>
</tr>
<tr>
<td>Complaint Code</td>
<td>b</td>
</tr>
<tr>
<td>Receivable Receipt Number</td>
<td>5</td>
</tr>
<tr>
<td>Date Called</td>
<td>2014-03-19</td>
</tr>
<tr>
<td>Scheduled Day Of Checkup</td>
<td>2014-03-19</td>
</tr>
<tr>
<td>Scheduled Day Of Service</td>
<td>2014-03-21</td>
</tr>
<tr>
<td>Checkup Status</td>
<td>Y</td>
</tr>
<tr>
<td>Service Status</td>
<td>N</td>
</tr>
<tr>
<td>Technician Number Checkup</td>
<td>3</td>
</tr>
<tr>
<td>Technician Number Service</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I want to get the values of the tags and put them into an array with the a structure like array("first td" => "second td"), so for this case the array would be array("Order Number" => "1", "Customer Number" => "3", "Complaint Code" => "b", ...) and so on.
After that, the final array would be sent into a PHP code.
I've been trying to extract some of the values from the HTML using var html = $(this).filter(function( index ){ return $("td", this) }).filter(":odd").text(); and various other combinations of filter(), but it doesn't seem to work for me.
How do I go about doing what I want to do?

jsFiddle Demo
You are going to want to use .each for that and iterate through the rows in the table. For each row, take the first cell (.eq(0)) as the key, and the second cell (.eq(1)) as the value. Place these in a result object.
//object to hold resulting data
var result = {};
//iterate through rows
$('.actResult tr').each(function(){
//get collection of cells
var $tds = $(this).find('td');
//set the key in result to the first cell, and the value to the second cell
result[$tds.eq(0).html()] = $tds.eq(1).text();
});

You can get the rows property of the table element and create an object based on the cells' value:
var rows = document.querySelector('.actResult table').rows,
data = {}, c, l = rows.length, i = 0;
for (; i < l; i++) {
c = rows[i].cells;
data[c[0].innerHTML] = c[1].innerHTML;
}
http://jsfiddle.net/tG8F6/