I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.
Next, the code table:
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr class="encabezado">
<th rowspan="2" scope="col" width="15%">Area</th>
<th colspan="7" scope="col">Month</th>
</tr>
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr class="encabezado">
<th scope="row">Total</th>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia">...</td>
<td class="total_dia"> </td>
</tr>
</tbody>
</table>
The array of values works as follows:
array [0]: Off;
array [1]: preoperative;
array [2]: Operating.
This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:
$(document).ready(function() {
$('td.gantt').click(function() {
$(this).toggleClass('preop');
});
$('td.gantt').dblclick(function() {
$(this).toggleClass('operating');
});
});
Inactive TD always sum to the total. What I want to do? Simple:
1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive).
2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.
If anyone can help with the whole problem, o a parcial, I would really appreciate.
Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.
To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).
Related
I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a fiddle here: http://jsfiddle.net/nokfw667/6/
The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.
Table example:
<Table id="ImageDataTable">
<thead>
<tr>
<th style="width:140px;">Whole Nbr</div>
<th style="width:90px;">Type</th>
<th style="width:190px;">Size</th>
<th style="width:100px;">Revision</th>
<th style="width:140px;">Other Nbr</th>
<th style="width:90px;">Sheet Nbr</th>
<th style="width:190px;">Of Sheets</th>
<th style="width:100px;">Frame Nbr</th>
<th style="width:140px;">Of Frames</th>
<th style="width:90px;">Doc Title</th>
<th style="width:190px;">Note</th>
<th style="width:100px;">Prnt</th>
<th style="width:140px;">Obs</th>
<th style="width:90px;">Acquire Date</th>
<th style="width:190px;">Source</th>
<th style="width:100px;">Base Doc</th>
<th style="width:140px;">Acc Doc Nbr</th>
<th style="width:90px;">CommonSubDirectory</th>
</tr>
</thead>
<tbody id="TmageDataBody" style="overflow:scroll">
<tr>
<td class="WholeNumberCell"></td>
<td class="WholeNumberCell">
ST
</td>
<td class="WholeNumberCell">
A
</td>
<td class="WholeNumberCell">
undefined
</td>
<td class="WholeNumberCell">
null
</td>
<td class="WholeNumberCell">
6
</td>
<td class="WholeNumberCell">
10
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
JOGGLING OF ALUMINUM ALLOY EXTRUDED
</td>
<td class="WholeNumberCell">
91179
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
0
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
\CDVolumes
</td>
</tr>
</tbody>
</Table></tbody>
</Table>
Anyone know what I am doing wrong?
#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
...
<Table id="ImageDataTable" style="overflow:scroll;">
You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.
If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.
Hope this helps.
I have a basic table with names and prices generated according to buttons in the website. I need to compute the total for this table.
<table id="countit">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name"></td> //this is dynamically generated through buttons
<td id ="price" ></td> //this is dynamically generated through buttons
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th> //total goes here
</tr>
</table>
Can anyone tell me how to do it in Javascript, please?
Click here for Fiddle
<table id="countit" border="1">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name">aaa</td>
<td name="price">10</td>
</tr>
<tr>
<td id ="name">bbb</td>
<td name="price">20</td>
</tr>
<tr>
<td id ="name">ccc</td>
<td name="price">30</td>
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th>
</tr>
</table>
<script>
var tds = document.getElementsByName("price");
var total = 0;
for(var i=0; i<tds.length; i++)
total += parseInt(tds[i].innerHTML);
document.getElementById('grandtotal').innerHTML=total;
</script>
<tr>
<td id ="name"></td>
<td name ="price" ></td>
</tr>
If you are generating table rows from any back-end language then provide a common value to "name" attribute. Then from the javascript get these element using
var prices=getElementsByName('price');
for(i=0;i<prices.length;i++){
total = total+parseInt(prices[i].innerHTML);
}
once you get the total you can set this value to any element.
document.getElementById('grandTotal').innerHTML = total;
Lets say I have the following table:
<table>
<thead>
<tr>
<th id="th_00"> </th>
<th id="th_01">TH 01</th>
<th id="th_02">TH 02</th>
<th id="th_03">TH 03</th>
<th id="th_04">TH 04</th>
</tr>
</thead>
<tbody>
<tr>
<th id="th_10">TH 10</th>
<td headers="th_01 th_10">DATA 11</td>
<td headers="th_02 th_10">DATA 12</td>
<td headers="th_03 th_10">DATA 13</td>
<td headers="th_04 th_10">DATA 14</td>
</tr>
<tr>
<th id="th_20">TH 20</th>
<td headers="th_01 th_20">DATA 21</td>
<td headers="th_02 th_20">DATA 22</td>
<td headers="th_03 th_20">DATA 23</td>
<td headers="th_04 th_20">DATA 24</td>
</tr>
</tbody>
</table>
Is there any native way using JavaScript or jQuery to find a specific cell of data using the headers attribute and the th tags id, or will I have to build the functionality myself?
I am currently using regular expressions and a jQuery('td', 'table tbody').each() loop to retrieve the specific cells I need to use, although this is less than ideal as it loops through each cell individually.
var td = $('td[headers="th_01 th_10"]');
perhaps?
I have the following table dynamically generated. Number of columns is dynamic and is between 4-12 based on user selection.
<table>
<tr>
<th class="roleComparethead">Function</th>
<th class="roleComparethead"">Type</th>
<th class="roleComparethead">1111</th>
<th class="roleComparethead">222</th>
<th class="roleComparethead">555</th>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type"> Internal </td>
<td class="access"><span class="accessLevel">Update</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">NoAccess</span> </td>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type""> Internal </td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span> </td>
</tr>
I want to hide rows in the table if values of all cells with class="accessLevel" in that row are same and display only if the values are different. How do i achieve this using jQuery or Javascript?
Thank you.
You can try this solution
http://jsfiddle.net/mjaric/aLWVM/
It can be done in less lines, but I in purpose split it to more. Check it out and let me know if behaviour is correct.
We have the following XHTML table:
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
When there is a click over a TD.gantt element, we want jQuery to get the value from input[name='line_config'] tag. We try the following jQuery code, but val() returned 'undefined':
$(document).ready(function() {
function sum_day(tag, status, column) {
var total_day = 0;
var index_pos = 0;
var values = 0;
values = tag.closest('tr').children("input[name='line_config']").val();
alert(values); //Return undefined
return total_day;
}
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
$(this).toggleClass('preop');
sum_day(gantt_tag, 'preop', $(this).index());
});
});
Are we getting right the value way? If anyone can help us, we appreciate... =)
Note jquery.children() will only return direct/immediate children, and since your input is not a direct/immediate child of the <TR> you will not get any of the inputs.
May I suggest something like this
$("input[name='line_config']", tag.closest('tr'))
children return the immediate children of the tr element. You should try by find i.e.:
values = tag.closest('tr').find("input[name='line_config']").val();
Not sure if this is the whole problem, but when you say var gantt_tag = $('td.preop');, there aren't any elements with the class of preop:
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
alert(gantt_tag.size()); // returns 0, i.e. no elements are matched
});