Grouping sub arrays by parent array element with JavaScript

Grouping sub arrays by parent array element with JavaScript - javascript

I have a cart page that is loaded from a remote source and I want to change the layout of the page. I have grabbed all the html(tables) for the cart items and I want to iterate over the items and group them by item name. The html on the page is like this:
<table>
<tbody>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Mint / Medium
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209762256]" id="updates_29209762256" value="2" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$30.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Navy / Medium
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209761936]" id="updates_29209761936" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$15.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Navy / Small
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209761872]" id="updates_29209761872" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$15.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Large
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Large
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Small
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Small
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Navy with Red / Medium
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Navy with Red / Medium
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Red with Ice Blue / XLarge
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347521872]" id="updates_35347521872" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();" />
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - White with Red / Medium
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518416]" id="updates_35347518416" value="1" onfocus="this.select();" />
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
</tbody>
I am using JavaScript to iterate over the `enter code table rows and split the item by 'cart-item'. I am then splitting the string into title, colour, size and town:
var full_array = new Array();
var item_array = new Array();
var variant_array = new Array();
$('.cart-item').each(function() {
var split_string = $(this).find(' .cart-title').html().split(' - ');
if (split_string[0] != 'remove') {
item_array['name'] = split_string[0];
var split_variant = split_string[1].split('/');
variant_array['colour'] = split_variant[0];
var split_size = split_variant[1].split('<br>');
variant_array['size'] = split_size[0];
variant_array['town'] = split_size[1];
item_array['value']=variant_array;
full_array.push(item_array);
item_array = [];
variant_array = [];
}
This gives me array with elements similar to this:
array{ name:"South Georgia Pocket Tee"
value:[colour: "Navy",size: "Small", town: undefined]}
What I want to do is group all the parent elements with sub elements under so I can loop them and replace the current cart html with new adjusted html. So the cart will look like this:
<div><ul>**Town Specific Short Sleeve Tee**
<li>Crimson with Navy /Large : 1</li>
<li>Crimson with Navy /Large(town-London) : 1</li>
<li>Navy with Red /Medium :1</li>
<li>Navy with Red /Medium(town-Manchester) : 1</li>
</ul></div>
etc.
How would I group the array so I can iterate and replace the html using JavaScript?

I sorted this out by changing the original each loop to this
if(split_variant[0].search('<br>')) {
var split_size = split_variant[1].split('<br>');
variant_array['size'] = split_size[0];
variant_array['town'] = split_size[1];
}else{
variant_array['size'] = split_variant[1];
}
item_array['value']= new Array();
item_array['value'].push(variant_array);
full_array.push(item_array);
then I ran this function
full_array.forEach(function(value) {
var existing = output.filter(function(v, i) {
return v.name == value.name;
});
if (existing.length) {
var existingIndex = output.indexOf(existing[0]);
output[existingIndex].value = output[existingIndex].value.concat(value.value);
} else {
if (typeof value.value == 'string')
value.value = [value.value];
output.push(value);
}
});
and output then had the grouped array, bit messy but does the job.

Related

Jacascript wont continue

I want to do when I press a button, the script will change my HTML code to make it another page, but when I press another button after it the buttons don't working and doing nothing...
At the first click each button work and do his job, the second click non of the buttons work and all the script just stop working.
HTML:
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
<script src="js/members.js"></script>
JS:
let print = document.getElementById("innerHTML");
let btnOrg = document.getElementById("orgBtn");
let btnWhy = document.getElementById("whyBtn");
let btnJoin = document.getElementById("joinBtn");
btnOrg.addEventListener('click', function(){
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
print.innerHTML = printOrg;
})
btnWhy.addEventListener('click', function(){
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
print.innerHTML = printWhy;
})
btnJoin.addEventListener('click', function(){
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
print.innerHTML = printJoin;
})

Hi,
here the problem is when you set innerHtml = your new html the let btnOrg = document.getElementById("orgBtn"); are now returning nothing, they point to an element of the page that has been deleted and not to an id,
here is the solution:
<div id="innerHTML">
<table align="center" >
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr id="joinTable" style="display: none;"></tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
<tr id="whyTable" style="display: none;"></trid>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
<tr id="orgTable" style="display: table;"></tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
JS:
let btnOrg = document.getElementById("orgBtn");
let orgTable = document.getElementById("orgTable");
let btnWhy = document.getElementById("whyBtn");
let whyTable = document.getElementById("whyTable");
let btnJoin = document.getElementById("joinBtn");
let joinTable = document.getElementById("joinTable");
btnOrg.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "table"
whyTable.style.display = "none"
joinTable.style.display = "none"
})
btnWhy.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "table"
joinTable.style.display = "none"
})
btnJoin.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "none"
joinTable.style.display = "table"
})
i changed the code you now in the HTML there is a "header" like part and the buttons are never deleted thats the content who change !

Attach the event to the body then on click check the id
document.body.addEventListener('click', e => {
if (e.target.nodeName == "BUTTON" && !e.target.id) return
let theId = e.target.id;
if (theId == "orgBtn")
print.innerHTML = printOrg
else if (theId == "whyBtn")
print.innerHTML = printWhy
else if (theId == "whyBtn")
print.innerHTML = printJoin
})
let print = document.getElementById("innerHTML");
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>

responsive table with rowspan and colspan

I am trying to make this table responsive for mobile but could done properly. I tried bootstrap table-responsive class but its not working. because of rowspan i am facing problem so can any suggest me css for this Table
Desktop Format:
https://postimg.org/image/gxj2riueh/
Mobile Format:
https://postimg.org/image/mtq57pwcn/
Code:
<table>
<tbody>
<tr>
<td style="background: #fcfbcd;" rowspan="5"
<p style="text-align: center;">BREAKFAST</p>
</td>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<td style="background: #dbc0af;" rowspan="5"
<p style="text-align: center;">LUNCH</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td style="background: #e7e5e6;" rowspan="5"
<p style="text-align: center;">SNACK</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>

Changed the <td> "headers" into real table headers <th>
Fixed malformed <th> Each of them were missing an angle bracket >
Loaded Bootstrap CSS
Wrapped the whole <table> into a <section> and added .table-responsive
Added .table and ,table-compact to <table>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<section class='table-responsive' style='margin:15px auto;'>
<table class='table table-condensed'>
<tbody>
<tr>
<th style="background: #fcfbcd;" rowspan="5">
<p style="text-align: center;">BREAKFAST</p>
</th>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<th style="background: #dbc0af;" rowspan="5">
<p style="text-align: center;">LUNCH</p>
</th>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<th style="background: #e7e5e6;" rowspan="5">
<p style="text-align: center;">SNACK</p>
</th>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>
</section>

SimpleCart JS shelfItem in table?

How would I be able to make the "Add to Cart" work if I were to put the simple_cart ShelfItem in table?
I'm still cannot find a way to make this work.
I'm using the eshopper template, which have the section id with cart items and so on. But if I were to put the simplecart javascript in the , , and so on, when I press the add to cart it won't work. Somebody please teach me how to use this, thanks.
Sorry I counldt find the answer or I dont know how to do it.
Edit: Add cart is working now I guess? At least able to make the "quantity" to increase, or able to empty the cart, but now the price is not updating, what did I do wrong?
http://imgur.com/HBhRv1S
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Shopping Cart</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Item</td>
<td class="description">Description</td>
<td class="price">Price</td>
<td class="quantity">Quantity</td>
<td class="total">SubTotal</td>
</tr>
</thead>
<tbody>
<div class="simpleCart_shelfItem">
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/511SkrkMNCL.jpg" alt="Star Wars Character Encyclopedia" class="item_thumb" thumb="Images (Books)/Images/thumb/511SkrkMNCL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars Character Encyclopedia</h4>
</td>
<td class="cart_price">
<span class="item_price">$35.99</span><br />
</td>
<td class="cart_quantity">
+
<p> <input type="text" value="1" class="item_Quantity"/> <br>
-
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81rH-DQqQOL.jpg" alt="Percy Jackson and the Olympians 5 Book " class="item_thumb" thumb="Images (Books)/Images/thumb/81rH-DQqQOL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Percy Jackson and the Olympians 5 Book </h4>
</td>
<td class="cart_price">
<span class="item_price">$80.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51mGJ4PmMzL.jpg" alt="Star Wars: The Jedi Path" class="item_thumb" thumb="Images (Books)/Images/thumb/51mGJ4PmMzL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: The Jedi Path</h4>
</td>
<td class="cart_price">
<span class="item_price">$30.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81cm6ZST7tL.jpg" alt="The Return of Nagash (The End Times)" class="item_thumb" thumb="Images (Books)/Images/thumb/81cm6ZST7tL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">The Return of Nagash (The End Times)</h4>
</td>
<td class="cart_price">
<span class="item_price">$50.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51m3gTdOteL.jpg" alt="Star Wars: Darth Vader and the Ghost Prison" class="item_thumb" thumb="Images (Books)/Images/thumb/51m3gTdOteL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: Darth Vader and the Ghost Prison</h4>
</td>
<td class="cart_price">
<span class="item_price">$65.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->

Working for me here : http://62.210.240.67/hank/HNKmobile/
I'd have post a comment but apparently I need 50 pts of reputation... (not sure to understand this behaviour)

Can I simulate a click on a hyperlink with jQuery code?

I have seen a couple of Stack Overflow posts which apparently relate to my question but none of them seem to do what I want.
I have a nested structure to display hierarchies (business units and brands) in a report:
<tr class="BrandRow1">
<td>
</td>
</tr>
<tr class='BrandRow1 StoreRow1'>
...
</tr>
<tr class='BrandRow1 StoreRow2'>
...
</tr>
and within this layout I use A tags to show/hide the 'child' content (by making use of the class attributes.
On load, I want to show all the 'nodes' if $('.StoreRow2').length is less than say 4.
I use a function to do the toggling:
// Allow an item to toggle other items' visibility
$(".VisibilityToggle").click(function () {
var ControlledClass = findClass($(this), "Toggles-");
if (ControlledClass != "") {
$("." + ControlledClass).toggle();
var Text = $(this).attr("rel");
if (Text != "") $(this).attr("rel", $(this).attr("rev")).attr("rev", Text).text(Text);
}
return false;
});
and what I'd like to do is trigger the 'toggling' open by calling this from JS code.
I thought something like '$(".VisibilityToggle").click()` would do what I want but this doesn't seem to work in my code, but does if I call it manually via the JS console in Chrome. I suspect its to do with my code running before the events have been bound to the page.
Can you please assist?
E.g. Markup
...
<tr class='BrandRow TRBrand_2'>
<td class="Level0">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_A_Brand" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-BrandId_2">+</a> <strong>Brand2</strong>
</p>
</td>
<td>
<p>
34</p>
</td>
<td>
<p>
21</p>
</td>
<td>
<p>
22</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
1
</p>
</td>
<td>
<p>
34.0
</p>
</td>
</tr>
<tr class='SiteRow BrandId_2 TRStore_10'>
<td class="Level1">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_rptSites_ctl00_A_Site" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-TRSiteUser_10">+</a> <span class="Bold">BrandX - Store 10</span>
</p>
</td>
<td>
<p>
14</p>
</td>
<td>
<p>
9</p>
</td>
<td>
<p>
8</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0
</p>
</td>
</tr>
<tr class='UserRow TRStoreUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Clarke Kent
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
3</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_3">1</span><span class=" d5_3">2</span><span class=" d5_3">3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Alexie Sayle
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
2</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_2">1</span><span class=" d5_2">2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Anders Bottom
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Daniella Ecclescake
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Mark E Smith
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Matthew Bannister
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Raj Patel
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
0</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
...

you could use trigger:
$(".ABrand").trigger('click');
Is that what you wanted to achieve?

There's nothing wrong with the syntax you have: click() will trigger a click on the element.
$('.ABrand').click();
More markup is required to properly answer your question I would think, but take a look at live() and delegate(), which can be used outside document.ready if you're worried that things aren't getting hooked up in time.
$(".VisibilityToggle").live("click", function() { ... } );
$("#Container").delegate(".VisibilityToggle", click", function() { ... } );

If you're having trouble timing the event bind (i.e. the .click(function(){})) and the event trigger (i.e. the .click()), why not just chain the two together?
$('.ABrand').click(function() {
// do 3 flips, 5 somersaults and a pirouette
}).click();
This way, you're sure the click trigger gets called after the click bind.

How can I select the second cancel button instead of the first?

I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.

I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.

We Keep Coding

JavaScript is the programming language of the Web.

Grouping sub arrays by parent array element with JavaScript - javascript

Related

Jacascript wont continue

responsive table with rowspan and colspan

SimpleCart JS shelfItem in table?

Can I simulate a click on a hyperlink with jQuery code?

How can I select the second cancel button instead of the first?

Categories

Resources