We Keep Coding

How to change calculation when the row is removed from a table

My problem is the calculations are working fine but when the row is removed the calculations are not updating according to that after creating a new row and after performing calculation only the values are updating..please help me to rectify this problem.
$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4)', .
'remove3'
function() {
var total = 0;
var sqty = 0;
var tr = $(this).parent();
var qty = tr.find('td:nth-child(4)').find('input').val();
var rate = tr.find('td:nth-child(5)').find('input').val();
var amount = qty * rate;
tr.find('td:nth-child(6)').find('input').val(amount);
var tbody = tr.parent();
$(tbody).find('tr').each(function() {
total += Number($(this).find('td:nth-child(6)').find('input').val());
sqty += Number($(this).find('td:nth-child(4)').find('input').val());
});
$('#TieTotal').val(total);
$('#SQty').val(sqty);
$('#Grandtot').val(total);
})
Script to create a next row automatically:
$('.tb3').on('keydown', 'input', function(e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('.tb3')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
Script to delete row:
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if (trIndex > 0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});

Let's imagine you have an HTML like (could be a dynamically drawn HTML).
<tr>
<td><input class="Qty" type="text" value="2"/></td>
<td><input class="Rate" type="text" value="200"/></td>
<td><input class="Value" type="text"/></td>
<td><button type="button" class="remove3">X</button></td>
</tr>
Also, let's say you have changed the approach to update the total to be like this, (which is inside document ready). This is a sample code, your actual code may vary. All you need to do is keep the triggering on("keyup change") (or as however you like) inside the document.ready().
$('.Qty').on("keyup change",function(){
var $row = $(this).closest("tr");
var price = 0;
var total = 0;
$('.tb3 tr').each(function() {
var qty = $(this).find('.Qty').val();
var rate = $(this).find('.Rate').val();
var price = qty * rate;
$(this).find('.Value').val(price);
total += parseFloat(price);
});
$('#TieTotal').val(total.toFixed(2));
});
Now, when each time you press the button which has class .remove3 you are correct in terms of removing the row. In the same block you can easilty update the total by triggering the change() event of element which has the class .Qty. (That's how the total is updated in the first place) See below,
$('.remove3').click(function () {
var trIndex = $(this).closest("tr").index();
if (trIndex > 0) {
$(this).closest("tr").remove();
$('.Qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
Fiddle,
https://jsfiddle.net/anjanasilva/dykm6wau/
I hope this helps.
Cheers!

Update this line:
$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4), .remove3' function(){
i think class '.remove3' not added properly with selectors list.

$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4)', .
'remove3'
function() {
var total = 0;
var sqty = 0;
var tr = $(this).parent();
var qty = tr.find('td:nth-child(4)').find('input').val();
var rate = tr.find('td:nth-child(5)').find('input').val();
var amount = qty * rate;
tr.find('td:nth-child(6)').find('input').val(amount);
var tbody = tr.parent();
$(tbody).find('tr').each(function() {
total += Number($(this).find('td:nth-child(6)').find('input').val());
sqty += Number($(this).find('td:nth-child(4)').find('input').val());
});
$('#TieTotal').val(total);
$('#SQty').val(sqty);
$('#Grandtot').val(total);
})
Script to create a next row automatically:
$('.tb3').on('keydown', 'input', function(e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('.tb3')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
Script to delete row:
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if (trIndex > 0) {
$(this).closest("tr").remove();
$('.Qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});

Filterering data from table

Good Morning
I've this code of JS and I want to use it in VB but I don't know how what I want to achieve is to filter data from table if I'm searching.
$(document).ready(function() {
var activeSystemClass = $('.list-group-item.active');
//something is entered in search form
$('#system-search').keyup( function() {
var that = this;
// affect all table rows on in systems table
var tableBody = $('.table-list-search tbody');
var tableRowsClass = $('.table-list-search tbody tr');
$('.search-sf').remove();
tableRowsClass.each( function(i, val) {
//Lower text for case insensitive
var rowText = $(val).text().toLowerCase();
var inputText = $(that).val().toLowerCase();
if(inputText != '')
{
$('.search-query-sf').remove();
tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
+ $(that).val()
+ '"</strong></td></tr>');
}
else
{
$('.search-query-sf').remove();
}
if( rowText.indexOf( inputText ) == -1 )
{
//hide rows
tableRowsClass.eq(i).hide();
}
else
{
$('.search-sf').remove();
tableRowsClass.eq(i).show();
}
});
//all tr elements are hidden
if(tableRowsClass.children(':visible').length == 0)
{
tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
}
});
});

Find value in all TD with Highlighting

I have this script for searching in table with Highlighting value from "input". But only for first TD in all TR.
Function remove Highlighting
function removeHighlighting(highlightedElements){
highlightedElements.each(function(){
var element = $(this);
element.replaceWith(element.html());
})
}
Function add Highlighting
function addHighlighting(element, textToHighlight){
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight, highlightedText);
element.html(newText);
}
Searching in table but only in first TD in TR
$("#search").on("keyup", function() {
var value = $(this).val();
removeHighlighting($("table tr em"));
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find('td:first');
var id = $tdElement.text();
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
addHighlighting($tdElement, value);
$row.show();
}
}
});
});
I don´t know how can I searching in all TD and How can I write e.g. some alert if "matchedIndex == -1" (if not found some value from input)

Try looping in all TDs of TR
$("table tr").each(function(index) {
if (index !== 0) {
row = $(this);
$("td", this).each(function(idx) {
var id = $(this).text(); //or $(this).innerText
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
addHighlighting($tdElement, value);
$row.show();
}
}
}
});

A short way
$("table tr > td em").each(function(){
$( this ).replaceWith( $( this ).text() );
});

Adding a span tag with a highlight class is the way to go like suggested in the comments.
Please find a working demo below and in this jsFiddle.
There is a really useful function to remove all the wrapping of the spans. You can do this with $('span.highlight').contents().unwrap().
For finding the text you can use string.search(searchText) or string.match(searchText). The search method will return -1 if nothing is found and the position of the text if found. And match would return occurences in the searchText.
For testing that it finds the first occurence I have added TestY in the table. The flag matched is responsible for this behavior. If you would remove it, it would highlight both TestY elements.
(function () {
var removeHighlight = function () {
$('span.highlight').contents().unwrap();
};
var wrapContent = function (index, $el, text) {
var $highlight = $('<span class="highlight"/>')
.text(text.substring(0, index));
//console.log(text.substring(0, index));
var normalText = document.createTextNode(text.substring(index, text.length));
//console.log(index, $highlight.text(), normalText);
$el.html($highlight).append(normalText);
};
var highlightTextInTable = function ($tableElements, searchText) {
// highlights if text found (during typing)
var matched = false;
//remove spans
removeHighlight();
$.each($tableElements, function (index, item) {
var $el = $(item);
if ($el.text().search(searchText) != -1 && !matched) {
//console.log("matched", $el, $el.html());
wrapContent(searchText.length, $el, $el.html());
//console.log(searchText, $el.text());
if (searchText == $el.text()) {
// found the entry
//console.log("matched");
matched = true;
}
}
});
};
$(function () {
//load table into object
var $tableRows = $('table tr');
var $tableElements = $tableRows.children();
//console.log($tableRows, $tableElements);
$('#search').on('keyup', function (e) {
var searchText = $(this).val();
if (searchText.length == 0) {
// catches false triggers with empty input (e.g. backspace delete or case lock switch would trigger the function)
removeHighlight(); // remove last remaining highlight
return;
}
highlightTextInTable($tableElements, searchText);
});
});
})();
.highlight {
background-color: #00FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<table>
<tr>
<td>TestX</td>
<td>Test1.2</td>
<td>Test1.3</td>
<td>Test1.4</td>
</tr>
<tr>
<td>Test2.1</td>
<td>TestY</td>
<td>Test2.3</td>
<td>Test2.4</td>
</tr>
<tr>
<td>Test3.1</td>
<td>TestY</td>
<td>Test3.3</td>
<td>Test3.4</td>
</tr>
</table>

IE8 append on $(document).ready()

I'm aware there are similar questions to this but have looked at several and none have provided and actual solution.
I have a function that populates a table with row when the page loads if there are items to fill it with. This works fine in all browsers except IE8. If you refresh the page then the works as it should, however in IE8 if you simply navigate to the page the table is unchanged. I have put break points in the js in Developer Tools and the function was called and reached the end without error and when I examined the objects the table did contain the rows it was supposed to as far as the object was concerned but rows were not rendered in the actual table on the page.
Here is the code at the bottom of the page:
<script type="text/javascript">
$(document).ready(function () {
addToTicketTable('12345');
});
</script>
Any thoughts?
Edit
Yes I am using tbody and function works fine when called by selecting a seat on the page or refreshing the page. It's only when navigating to the page that it doesn't work correctly.
As requested here is the code for the addToTicketTable function.
function addToTicketTable(seatId) {
var zone = $("#ddlSections").val();
var sectText = $("#ddlSections option:selected").text();
var sectName = sectText.split(":")[0]
var sect = sectText.split(" ")[0];
if (sectText.toLowerCase().indexOf(" box") >= 0) {
sect += " " + sectText.split(" ")[1];
}
var seat = "Best Available";
var priceType = -1;
var seatInfo = "";
if ($(".dvSeat").length > 0) {
var arrInfo = document.getElementById(seatId).getElementsByTagName("input")[0].value.split(",");
priceType = arrInfo[4];
sect = arrInfo[3];
if ($("#" + seatId).attr("class").indexOf(" box") >= 0) {
sect += " box";
}
seat = arrInfo[0] + arrInfo[1];
if ($("#" + seatId).attr("class").indexOf("restrictedView") > -1) {
seatInfo = "Restricted View";
}
if ($("#" + seatId).attr("class").indexOf("standingSeat") > -1) {
seatInfo = "Standing Ticket";
}
if ($("#" + seatId).attr("class").indexOf("wheelchair") > -1) {
seatInfo = "Wheel Chair Space";
}
if ($("#" + seatId).attr("class").indexOf("behindConductor") > -1) {
seatInfo = "Behind Conductor";
}
if ($("#" + seatId).attr("class").indexOf("noSurtitles") > -1) {
seatInfo = "Surtitles not visible";
}
if ($("#" + seatId).attr("class").indexOf("restrictedLegRoom") > -1) {
seatInfo = "Restricted Leg Room";
}
zone = arrInfo[2];
}
var tdSect = document.createElement("td");
tdSect.innerHTML = sectName;
var tdSeat = document.createElement("td");
tdSeat.innerHTML = seat;
if (seatInfo.length > 0) {
tdSeat.innerHTML += " (" + seatInfo + ")";
}
var hdSeat = document.createElement("input");
hdSeat.id = "tblHd" + seatId;
hdSeat.className = "seatHD";
hdSeat.type = "hidden";
hdSeat.value = seatId;
$(tdSeat).append(hdSeat);
var tdTicket = document.createElement("td");
var ddl = document.createElement("select");
ddl.id = "ddlTicket" + seatId;
ddl.className = "ddlTicket";
var ddlStr = "";
if (document.getElementById("ddl" + zone) != null) {
ddlStr = "ddl" + zone;
} else {
ddlStr = "ddl" + sect.split(":")[0];
if (ddlStr.indexOf(" ") > -1) {
ddlStr = ddlStr.split(" ")[0];
}
}
$("#" + ddlStr + " option").each(function () {
var arrVal = this.value.split(',');
if (arrVal[0] == zone) {
var selected = false;
if (priceType != null) {
if (this.value.split(',')[1] == priceType) {
selected = true;
}
}
if (selected) {
$(ddl).append($("<option></option>").attr("value", this.value).text(this.text).attr("selected", "true"));
} else {
$(ddl).append($("<option></option>").attr("value", this.value).text(this.text));
}
}
});
$(ddl).change(function () {
$("#lblPrice" + seatId).html($(this).val().split(',')[2]);
updateSeatInfo();
});
$(tdTicket).append(ddl);
var tdPrice = document.createElement("td");
var lblPrice = document.createElement("span");
lblPrice.id = "lblPrice" + seatId;
$(tdPrice).append(lblPrice);
var tdRemove = document.createElement("td");
var btnRemove = document.createElement("span");
btnRemove.className = "btnRem";
$(btnRemove).click(function () {
remSeat(seatId);
});
$(tdRemove).append(btnRemove);
var tr = document.createElement("tr");
tr.id = "tr" + seatId;
$(tr).append(tdSect);
$(tr).append(tdSeat);
$(tr).append(tdTicket);
$(tr).append(tdPrice);
$(tr).append(tdRemove);
$("#tblSeats tbody").append(tr);
$("#lblPrice" + seatId).html($(ddl).val().split(',')[2]);
}

So I'm speculating a little here since enough code wasn't provided to fully determine the problem, so I'll share my experience with appending rows in IE8.
More than likely, you have a simple table structure like this:
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Stuff</td>
</tr>
</table>
and your script is something like this:
<script>
$("table").append("<tr><td>More Stuff</td></tr>");
</script>
Well, IE8 doesn't allow you to append directly to a <table> element. Instead, it requires that you set up the table structure correctly and append to a <tbody> element instead. Like so:
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff</td>
</tr>
</tbody>
</table>
and your jQuery would have to change to reflect the append to the <tbody> element:
<script>
$("tbody").append("<tr><td>More Stuff</td></tr>");
</script>

remove/hide table's empty column(s), including <th>

How can I hide the column with all empty cells including the title <th> in that column, while leaving the other columns and their titles as it is. Following jquery hides the entire <th>, which is not I want. Here is a sample, where I want to hide only the entire 'Column3' including <th>. Many thanks in advance.
$('table#mytable tr').each(function() {
if ($(this).children('td:empty').length === $(this).children('td').length) {
$(this).hide();
}
});

Took a while to piece together. Thanks to nxt for some of the code.
$('#mytable th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable tr').length - 1)) {
$(this).hide();
tds.hide();
}
});

If you want to hide the column if all cells (ignoring the header) are empty, you could do something like:
$('#mytable tr th').each(function(i) {
//select all tds in this column
var tds = $(this).parents('table')
.find('tr td:nth-child(' + (i + 1) + ')');
//check if all the cells in this column are empty
if(tds.length == tds.filter(':empty').length) {
//hide header
$(this).hide();
//hide cells
tds.hide();
}
});
Sample: http://jsfiddle.net/DeQHs/
Sample 2 (adapted for jQuery > 1.7): http://jsfiddle.net/mkginfo/mhgtmc05/

None of the solutions here worked for me. This was what I used to hide empty columns with or without a text in the header:
$('table').each(function(a, tbl) {
var currentTableRows = $(tbl).find('tbody tr').length;
$(tbl).find('th').each(function(i) {
var remove = 0;
var currentTable = $(this).parents('table');
var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
tds.each(function(j) { if ($(this).text().trim() === '') remove++; });
if (remove == currentTableRows) {
$(this).hide();
tds.hide();
}
});
});

http://jsfiddle.net/nlovatt/JsLn8/
A multi-table example which avoids using the table id in the selectors

You need the next code:
HTML
<table id="mytable" border="1">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
</thead>
<tbody>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</tbody>
</table>
JavaScript
var $table = $('#mytable');
var thead = $table[0].tHead, tbody = $table[0].tBodies[0];
var colsLen = tbody.rows[0].cells.length, rowsLen = tbody.rows.length;
var hideNode = function(node) { if (node) node.style.display = "none"; };
for (var j = 0; j < colsLen; ++j) {
var counter = 0;
for (var i = 0; i < rowsLen; ++i) {
if (tbody.rows[i].cells[j].childNodes.length == 0) ++counter;
}
if (counter == rowsLen) {
for (var i = 0; i < rowsLen; ++i) {
hideNode(tbody.rows[i].cells[j]);
}
hideNode(thead.rows[0].cells[j]);
}
}

If the table data are from a MySQL query it possible to verify if a column is empty by using count on the field (count = 0 means that there are no values).
It is quite fastidious when you have many fields, and the IF condition is needed for the corresponding header and footer cells too. But it works...
if ($sum_field>'0') echo "<th>field</th>";
if ($sum_field>'0') echo "<td>" . $row['field'] . "</td>";
#nmat solution works fine but doesn't handle footers.