responsive table with rowspan and colspan

responsive table with rowspan and colspan - javascript

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>

Related

Dynamically setting the input value with jQuery

I have a spreadsheet of data and input fields.
When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.
This is my code
$(".btn-yes").click(function() {
var $val = $(document).find('.date');
$('.date').each(function() {
var $val = $(this).val();
if ($val === "") {
$('tr').each(function() {
var $this = $(this),
daata = $this.find('td.shipdate').html();
$this.find('input').val(anData);
})
} else(
console.log("empty")
)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>

You likely meant this. Note I had to trim and remove the trailing dot in the shipdate
You can remove the .slice(0,-1) if the shipdate cell contains a date without a trailing dot
You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text()
in case you want to move the cells around
$(".btn-yes").click(function() {
$('.date').each(function() {
var $val = $(this).val();
var shipdate = $.trim($(this).parent().next().text()).slice(0,-1)
$(this).val($val === "" ? shipdate : $val)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>

JavaScript sum table value

I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}

If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>

find td elements which do not have checkbox with class

How to find the td elements in a table which do not have checkboxes with the class name as chkCheckBox1
Created this fiddle
I've tried to use .filter and find the td but that didn't worked.
$("#LstDocTemp").filter("td:not(.chkCheckBox1)")
Any help would be appreciated

You can use :not() and :has() like this DEMO
$("td:not(:has(input.chkCheckBox1:checkbox))")

This also works. Single selector up front to get the input itself, then the containing TD.
$(function(){
var mySelection = $("#LstDocTemp td input:not(.chkCheckBox1)").parent();
console.log(mySelection)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
<tr>
<th align="left" class="ins_sl_no">
Sl No.
</th>
<th align="left" class="selct_column">
<input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
</th>
<th align="left" class="doc_title_1">
Document title
</th>
<th align="left" class="description">
Description
</th>
<th align="center" class="revision">
Revision
</th>
<th align="left" class="part_no">
Parts name
</th>
<th align="center" class="issue_no">
Issue
</th>
<th align="center">
Link
</th>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="chkbox_" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="chkbox_" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox1" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="Checkbox1" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox2" />
</td>
<td>
<input type="checkbox" name="chkItem" class="chk chkCheckBox1" id="Checkbox2" />
</td>
<td>
Test
</td>
<td class="dark_highlight">
</td>
<td>
</td>
<td class="light_highlight">
</td>
<td>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
</table>

How to create HTML table with jQuery and multiplication rows and columns

I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.

I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/

Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.

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.

We Keep Coding

JavaScript is the programming language of the Web.

responsive table with rowspan and colspan - javascript

Related

Dynamically setting the input value with jQuery

JavaScript sum table value

find td elements which do not have checkbox with class

How to create HTML table with jQuery and multiplication rows and columns

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

Categories

Resources