Develop Reference

Problem with Expanding and shrinking Table on load

I am revising the code to better match the HTML table that mplungjan created below. However I am keeping the FOR loops as this is how I am generating the tables.
<table>
<thead>
<th style="text-align:center">Expand</th>
</thead>
{% for supply in supplylist %}
<tbody>
<tr>
<td data-toggle="toggle">
<p>+</p>
</td>
Here is problem I am trying to solve:
When clicking the link above, I want to write either a + or - to this variable below supply[0]
When loading the form, I want to read the value from this same variable and either shrink or expand the specific row based on whether its value is '+' or '-'
Is there a Java Script that I can use to read this variable on load and either shrink or expand the row as applicable.
And is there a Java Script that I can use to write either a + or - to this variable whenever the user clicks the link.
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
{% for number in supply[5] %}
<tr>
<td>To be hidden {{number}}</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
I am revising the Script to use mplungjan's example below as well, since this script also works and is more modern.
<script>
const toggleTbody = function() {
const $tbodyToToggle = $(this).closest('tbody').next(".hideTr");
$tbodyToToggle.toggle()
const visible = $tbodyToToggle.is(":visible")
$(this).text(visible ? '-' : '+')
}
$(document).ready(function() {
$('.plusminusexpands')
.on('click',toggleTbody)
.each(function() {
if ($(this).text() === "+") $(this).click()
})
});
</script>

Lacking the expected example HTML, I produced my own
I added a tbody to the toggle rows
You can now set the plus or minus on the server and I use localStorage to not have to store the settings in a session
IDs need to be unique so I removed the ID and just use the class
Here is a version with localStorage - I use try/catch to run on SO because localStorage is sandboxed
$(document).ready(function() {
const $plusMinuses = $('.plusminusexpands'); // all the plusminusexpands
let savedPlusMinuses; // this will be the array we use
try { // stacksnippets do not like localStorage
savedPlusMinuses = localStorage.getItem("savedPlusMinuses");
savedPlusMinuses = savedPlusMinuses ? JSON.parse(savedPlusMinuses) : [];
}
catch {
console.log("no localStorage available");
savedPlusMinuses = []; // set to empty array
}
// here we gather default values in case of first visit
if (savedPlusMinuses.length === 0) savedPlusMinuses = $plusMinuses.map(function() {
return this.textContent.trim()
}).get(); // get the current set of plusminus
const toggleTbody = function() {
const $tbodyToToggle = $(this).closest('tbody').next(".hideTr");
$tbodyToToggle.toggle()
const visible = $tbodyToToggle.is(":visible")
$(this).text(visible ? '-' : '+')
savedPlusMinuses[$(this).data("idx")] = $(this).text()
console.log(savedPlusMinuses.join("")); // debugging
// localStorage.setItem("savedPlusMinuses",JSON.stringify(savedPlusMinuses)); // uncomment
};
// set the event handler on the plusminues and then loop to initialise the DOM
$plusMinuses
.on('click', toggleTbody)
.each(function(i) { // looping all the plus/minuses to set the state
$(this).text(savedPlusMinuses[i]) // initialise with saved values
.data("idx", i); // set a data-attribute to find it quickly when saving
if ($(this).text() === "+") $(this).click()
})
});
.plusminusexpands {
text-decoration: none;
font-size: x-large
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th style="text-align:center">Expand</th>
</thead>
<tbody>
<tr>
<td data-toggle="toggle">
<p>+</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 1</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-toggle="toggle">
<p>-</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 2</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-toggle="toggle">
<p>+</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 3</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
</table>
Here is a version which would need to save the plusminusses using Ajax to the server
const toggleTbody = function() {
const $tbodyToToggle = $(this).closest('tbody').next(".hideTr");
$tbodyToToggle.toggle()
const visible = $tbodyToToggle.is(":visible")
$(this).text(visible ? '-' : '+')
}
$(document).ready(function() {
$('.plusminusexpands')
.on('click',toggleTbody)
.each(function() { // looping all the plus/minuses to set the state
if ($(this).text() === "+") $(this).click()
})
});
.plusminusexpands { text-decoration:none; font-size: x-large }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th style="text-align:center">Expand</th>
</thead>
<tbody>
<tr>
<td data-toggle="toggle">
<p>+</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 1</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-toggle="toggle">
<p>-</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 2</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-toggle="toggle">
<p>+</p>
</td>
<td style="display:none"><input name="expand" value="{{supply[0]}}"></td>
</tr>
</tbody>
<tbody class="hideTr">
<tr>
<td>To be hidden 3</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
<tr>
<td>To be hidden</td>
</tr>
</tbody>
</table>

Get a specific row from specific table with JavaScript?

Say my dynamic HTML looks something like this:
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
Each tr has an ID, but ID only relatively unique to the table, as other tables might have the ID, and the number of rows might vary.
How would I obtain the founding year (column 2) of a Swedish company with an id of 17?
I would imagine you would do it like this but I fail to find the correct code.
var table = document.getElementById("SwedishCompanies");
var row_index = ??? //should return 2
return table[row_index].cells[2].innerHTML;
I can't use getElementById just to get id "17", because I would risk getting Danish or Norwegian's company because the order of these tables is random.

you're just not using the right selector,
#DanishCompanies tr[id="17"]
will get you the tr with id 17 that's a child of DanishCompanies :
const row = document.querySelector('#DanishCompanies tr[id="17"]');
const year = row.cells[2].innerHTML;
console.log(year);
<table id="DanishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="19">
<td>Company A</td>
<td>80</td>
<td>1980</td>
</tr>
<tr id="17">
<td>Company B</td>
<td>12</td>
<td>1910</td>
</tr>
<tr id="26">
<td>Company C</td>
<td>5000</td>
<td>2015</td>
</tr>
</table>
<table id="SwedishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="10">
<td>Company D</td>
<td>500</td>
<td>1950</td>
</tr>
<tr id="12">
<td>Company E</td>
<td>900</td>
<td>1990</td>
</tr>
<tr id="17">
<td>Company F</td>
<td>90</td>
<td>2010</td>
</tr>
</table>
<table id="NorwegianCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="17">
<td>Company G</td>
<td>105</td>
<td>1970</td>
</tr>
<tr id="18">
<td>Company H</td>
<td>100</td>
<td>1980</td>
</tr>
<tr id="19">
<td>Company I</td>
<td>45</td>
<td>2000</td>
</tr>
</table>

this way (id with number values complicates the css select syntax)
function getTDval( tableId, rowId, colNum)
{
return document
.querySelector(`table#${tableId} tr[id="${rowId}"]`)
.cells[colNum].textContent
}
console.log( getTDval('SwedishCompanies','17',2) )
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

It is invalid HTML to reuse the same id value within a page. You might use private data-... attributes for that.
Apart from that, the following line gets the human readable text of the third child node (third column in this case), which is the year (as a string).
document.querySelector('#DanishCompanies tr[id="17"]')
.children[2].innerText;

If you can't rely on getElmentById that means that you are doing something wrong, an id should be unique in the whole html. I suggest a new naming technique, you can concatenate the parent table id with the current row id. Example:
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="NorwegianCompanies17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="NorwegianCompanies18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="NorwegianCompanies19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
In that way you can simply call
const row = document.getElementById(rowId)

Copy data from selected rows of one table to another table using jQuery

I got 2 tables one of them has my products data such name,and bar-code.
The other one is empty and I want to copy products' table (selected rows only) into the second table via jQuery.
<table id="exampleTable1" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd selected">
<td class="sorting_1">545333456</td>
<td>Galaxy S9</td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S6</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>SD 64G </td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S5</td>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>Iphone 7 </td>
</tr>
</tbody>
</table>
My second table :
<table id="exampleTable2" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
<button class="btn btn-success" data-panelId="copy1" id="copy1">
Copy from exampleTable1 To exampleTable1
</button>

There are a few jQuery methods that make this easy to do, namely the .clone() and .each() method. You could achieve what you want by the following:
$('#copy1').click(function() {
$('tr.selected', '#exampleTable1').each(function() {
// For each "selected" row of table1 ..
var rowFromTable1 = $(this);
// .. Take a clone/copy of it ..
var clonedRowFromTable1 = rowFromTable1.clone();
// .. And append the cloned row to the tbody of table2
$('tbody', '#exampleTable2').append( clonedRowFromTable1 )
})
})

Html ajax order form, invoice for the produckt oredered

I have a html table with the following columns:
produkt name, quantity, price , orderand total amount.
Now the client will set the quantity he want to order, and automatically the total column to display the price without refreshing the page.
Also in a sidebar column to display the total amount of the product ordered and the amount. Kind of total invoice. Is this possible?
Thank you in advance
<pre>
<table style="width:100%">
<tr>
<th>produkt name</th>
<th>quantity</th>
<th>price</th>
<th>Order</th>
<th>total amount</th>
</tr>
<tr>
<td>Phone</td>
<td>34</td>
<td>50</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Smartphone</td>
<td>56</td>
<td>94</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Apple</td>
<td>45</td>
<td>80</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
</table>

Sure, you can bind an event to the input. So when the value changes, the function is fired.
Then by using parent(), prev() and text() we can get the price.
With those values, we can calculate the total and insert that value inside the next tablecell.
I've commented the code, hope it makes sense!
$('[name=amount]').on('change', function() {
var amount = $(this).val(), /* get the amount, so the inputs value */
price = $(this).parent().prev().text(), /* get the price */
total = amount * price; /* calculate the total */
$(this).parent().next().html( total ); /* insert it in the next tablecell */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>produkt name</th>
<th>quantity</th>
<th>price</th>
<th>Order</th>
<th>total amount</th>
</tr>
<tr>
<td>Phone</td>
<td>34</td>
<td>50</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Smartphone</td>
<td>56</td>
<td>94</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
<tr>
<td>Apple</td>
<td>45</td>
<td>80</td>
<td><input type="text" name="amount"></td>
<td>xxx</td>
</tr>
</table>

How to bifurcate data in table according to a particular value

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.