Develop Reference

Create table on new page from dynamic table

I need a help. I have a dynamic table:
while (result.next()) {
out.write("<tr>");
for (int i=1; i<=columns; i++) {
out.write("<td>" + result.getString(i) + "</td>");
}
out.write("</tr>");
}
Clicking on the row of this table it needs to open new page or window with table 1 column has data from the row. How can I do it?

You could do something like this. Attach an event to each tr in the table.
while (result.next()) {
out.write("<tr class="table-row">");
for (int i=1; i<=columns; i++) {
out.write("<td>" + result.getString(i) + "</td>");
}
out.write("</tr>");
}
$('.table-row').on('click', function(){
var values_array = [];
var td_values = "";
var tr_children = $(this).find('td').each (function() {
values_array.push($(this).html());
});
$.each(values_array, function(value){
td_values += "value1="+ value +"&";
});
// create a query string with the values and send to a new page like this
// you can concatenate the values to the
window.location.replace("http://page?"+td_values);
});

Run jquery on each table with same classes

I have multiple tables being generated, and I am calculating a total of the column for each table.
The following works perfectly for the first table, but if I remove the ":first" then it gives me the sum of all tables, which I dont want.
var total = 0;
jQuery('table.views-table:first td.views-field-qty').each(function()
{
var price = parseInt(jQuery(this).text());
if (!isNaN(price))
{
total += price;
}
});
jQuery('table.views-table:first').after('<p> Total Tickets Sold: <strong>' + total + '</strong></p>');
How do I do the above for each table, with a summary under every table, when all classes and td classes are the same. Its no good numbering the table classes, as there could be any amount.

Wrap your table in a .each loop
jQuery('table.views-table').each(function(i,el){
var table = jQuery(el);
var total = 0;
table.find('td.views-field-qty').each(function()
{
var price = parseInt(jQuery(this).text());
if (!isNaN(price))
{
total += price;
}
});
table.after('<p> Total Tickets Sold: <strong>' + total + '</strong></p>');
});

You need to amend your logic so that you call each() on the table and then again on each td within that table. Try this:
jQuery(function($) {
$('table.views-table').each(function() {
var $table = $(this), total = 0;
$table.find('td.views-field-qty').each(function() {
total += parseInt(jQuery(this).text(), 10) || 0;
});
$table.after('<p> Total Tickets Sold: <strong>' + total + '</strong></p>');
});
});
Note that you can negate the need for the if statement by using the || operator as a shortcut to providing a default value for the variable.

After deletion changing id of textbox inside cell id not working

I have table using Javascript and I am deleting the rows using a delete function
After the deletion I am trying to reindex the table cell ids
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].id="row_"+i;
table.rows[i].cells[0].innerHTML=i+"<input type='checkbox' id='chk_" + i + "'>";
table.rows[i].cells[1].id="notes_"+i;
table.rows[i].cells[2].id="amount"+i;
}
}
But the following lines not working:
table.rows[i].cells[1].id="notes_"+i;
table.rows[i].cells[2].id="amount"+i;
<td>'s contains input boxes, it will be like this
<td><input type="text" title="notes"></td>
<td><input type="text" title="amount"></td>
How can I change the id of text box inside <td> or cell ?

I made a jsfiddle here https://jsfiddle.net/an87ka5p/
I updated this to answer the question in the comments
function test() {
var table = document.getElementById("ordertable");
var rowcountAfterDelete = table.rows.length;
for (var i = 0; i < rowcountAfterDelete; i++) {
table.rows[i].id = "row_" + i;
table.rows[i].cells[0].innerHTML = i + "<input type='checkbox' id='chk_" + i + "'>";
table.rows[i].cells[1].getElementsByTagName("input")[0].id = "notes_" + i;
table.rows[i].cells[2].getElementsByTagName("input")[0].id = "amount_" + i;
}
}

Create Rows in a Table using Javascript - adds too many cells...>

I'm trying to create a table on the fly... it almost works but I have an issue with the number of cell it adds.
My table has 8 columns (monday to Friday plus a total column at the end).
Here is the fiddle for it: http://jsfiddle.net/kaf9qmh0/
As you can see, on row 1, it adds the 8 columns 3 times, then on row 2 it adds the columns twice and only on the last row does it only add 8 columns.
I suspect it is because Im using .append to add the rows as follows (line 105 in the fiddle) but my Javascript being very limited, Im not entirely sure how to make it stop add the columns to row 1 and 2.
$("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex2 + '"></tr>');
How can I make it to only add the cells (td) to the next row when it loops through rowIndex2 and increments it?
Can somebody point me in the right direction please?

You had a loop within a loop - which was causing the additional cells. Here's an updated fiddle; and here's an extract of the modified code:
function createSampleRows() {
var sourceTable = document.getElementById('activityTable');
var sourceTableRows = sourceTable.rows.length;
var targetTable = document.getElementById('timesheetTable');
var rowindex;
var targetTableColCount;
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
if (rowIndex == 1) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
}
for (rowIndex = 0; rowIndex < (parseInt(sourceTableRows)-2); rowIndex++) {
var sourceTableRowID = document.getElementsByClassName('activityTaskRow')[rowIndex].id;
$("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex + '"></tr>');
};
// This loop was nested within the above loop
for (x = 0; x < targetTableColCount; x++) {
$("#timesheetTable > tbody > tr").append('<td id="' + x + '" style="width: 60px;height: 34px;" class=""></td>');
};
};

Error updating table cell using innerHTML

I've got a table displaying a list of order items. Each row contains 3 buttons, to decrement order quantity by one, increase order quantity by one and delete the entire item from the order. I am having a strange issue whereby when I decrement the order quantity of a particular row it causes the value stored in the second row to be updated...
This is where I set up the table:
if($.cookie('order_cookie') != undefined){
productArray = JSON.parse($.cookie('order_cookie'));
$.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
}
//Reference to the order table
var ordertable = document.getElementById("ordertable");
//Loop through the Array and display in the table
for(var i = 0; i < productArray.length; i ++){
// console.log(productArray[i]);
console.log("Order Item " + i);
console.log("StockCode: " + productArray[i].stockCode);
console.log("Quantity: " + productArray[i].quantity);
var row = ordertable.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = productArray[i].stockCode;
cell2.innerHTML = productArray[i].quantity;
cell3.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
}
This is where I decrement the order quantity for the item in the table
//Change the total
$('.removeBtn').click(function(){ //Remove 1 from quantity
console.log(productArray);
console.log("remove");
var row = this.parentNode.parentNode;
console.log(row);
console.log(row.rowIndex);
var elementToUpdate = row.rowIndex - 1;
productArray[elementToUpdate].quantity--;
cell2.innerHTML = productArray[elementToUpdate].quantity;
// $.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
});
Can anyone shed some light on why this is happening? I think it might be something to do with the fact that I am generating the table using Javascript as opposed to HTML but I am not entirely sure.
Many thanks for any help

Use event Delegation. you add .removeBtn class dynamically
$("#ordertable").on("click" , ".removeBtn" , function(){
// your code come here
});