Develop Reference

Jquery - simple multiplication assignment mistake

https://jsfiddle.net/ohrgw29y/#&togetherjs=4USeqx1oCx
I'm trying to make a column "price together" each cell in which would display two other cells of a row multiplied. I got it to "add assign" but cannot "multiply assign.
$(document).ready(function() {
$('tr').each(function() {
var price_row_total=0
$(this).find('.subjects').each(function() {
var price_attributes=$(this).text();
if(price_attributes.lenght!==0) {
price_row_total+=parseFloat(price_attributes);
}
});
$(this).find('#price_row_total').html(price_row_total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th scope="col">Supply</th>
<th scope="col">Used by</th>
<th scope="col">Periodicity</th>
<th scope="col">Amount</th>
<th scope="col">Units</th>
<th scope="col">Price per unit</th>
<th scope="col">Price together</th>
</tr>
</thead>
<tbody>
<tr>
<td>water</td>
<td>
<span>plant1</span>
</td>
<td>
<h4><b> monthly </b></h4>
</td>
<td class="subjects">
10
</td>
<td> <h4> liters </h4> </td>
<td class="subjects">
2.99
</td>
<td id="price_row_total"></td>
</tr>
<tr>
<td>hay</td>
<td>
<span>animal1</span>
</td>
<td>
<h4><b> one time </b></h4>
</td>
<td class="subjects">
15
</td>
<td> <h4> stacks </h4> </td>
<td class="subjects">
1.50
</td>
<td id="price_row_total"></td>
</tr>
</tbody>
</table>
P.S. I'm not even a beginner in JS , I have no idea what I'm doing, sorry. I'm sure it's simplest thing ever but I'm too short on time to learn JS synthax right now. Trying to finish this volunteered project for an animal sanctuary. Hope this explains why someone posts such simple things.

By no means is this answer elegant or even best practice, but it addresses you're current issue.
$(document).ready(function() {
$('tr').each(function() {
// this was modified to get price and unit based off class name (changed from subjects)
const unit = Number($(this).find('.units').text());
const price = Number($(this).find('.price').text());
// the toFixed(2) rounds to 2 decimal places as these are floating point numbers you will end up with something like 29.90000002
const price_row_total = (unit * price).toFixed(2);
$(this).find('.total').html(price_row_total);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th scope="col">Supply</th>
<th scope="col">Used by</th>
<th scope="col">Periodicity</th>
<th scope="col">Amount</th>
<th scope="col">Units</th>
<th scope="col">Price per unit</th>
<th scope="col">Price together</th>
</tr>
</thead>
<tbody>
<tr>
<td>water</td>
<td>
<span>plant1</span>
</td>
<td>
<h4><b> monthly </b></h4>
</td>
<td class="units">
10
</td>
<td> <h4> liters </h4> </td>
<td class="price">
2.99
</td>
<td class="total"></td>
</tr>
<tr>
<td>hay</td>
<td>
<span>animal1</span>
</td>
<td>
<h4><b> one time </b></h4>
</td>
<td class="units">
15
</td>
<td> <h4> stacks </h4> </td>
<td class="price">
1.50
</td>
<td class="total"></td>
</tr>
</tbody>
</table>

Html body content overlapping my footer and header

In my Html Report everything working fine, but when i taking print, tables design disturbed between two pages. I also convert it into div structure but same issue occurred, I didn't find solution so far.
Please help.
Screenshot attached here
<div class="madeup-grid-section grid-detail-style" ng-show="nsDivReadyMade">
<lable class="grid-heading">Ready Made</lable>
<table class="table table-bordered table-striped page_table table_stylelike_count"
style="border-right:1px solid #000 !important;">
<thead>
<tr class="first_row">
<th ng-show="nsSnR">S#</th>
<th ng-show="nsItemR">Item</th>
<th ng-show="nsPileR">Pile</th>
<th ng-show="nsWeftR">Weft</th>
<th ng-show="nsGroundR">Ground</th>
<th ng-show="nsQualityR">Quality</th>
<th ng-show="nsSizeR">Size</th>
<th ng-show="nsProcessR">Treatment</th>
<th ng-show="nsShadeR">Shade</th>
<th ng-show="nsWeightR">Weight</th>
<th ng-show="nsQtyR">Quantity</th>
<th ng-show="nsPriceR">Price</th>
<th ng-show="nsAmountR">Amount</th>
</tr>
</thead>
<tbody>
<tr class="article-items {{item.trbgColor}}" ng-repeat="item in DetailDataList"
ng-if="item.ArticleType=='readymade'" style="border-right:1px solid #000;">
<td colspan="{{ttlRowColspanR+3}}" ng-if="item.RecordType=='ItemDesc'" style="text-align:left !important;">
<span>{{item.ItemDesc}}</span>
</td>
<td ng-show="nsSnR" rowspan="{{item.NoOfSubItems}}" ng-if="item.RecordType=='Article'"><span>{{item.GroupNum}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsItemR" ng-if="item.RecordType=='Article'"><span>{{item.ReadymadeItem}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsPileR" ng-if="item.RecordType=='Article'"><span>{{item.varPile}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeftR" ng-if="item.RecordType=='Article'"><span>{{item.varWeft}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsGroundR" ng-if="item.RecordType=='Article'"><span>{{item.varGround}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsQualityR" ng-if="item.RecordType=='Article'"><span>{{item.Quality}}</span></td>
<td ng-if="item.RecordType!='ItemDesc'" ng-show="nsSizeR" ><span>{{item.varSizeWidth}}<span ng-if="item.RecordType=='Article'">*{{item.varSizeLength}}</span> {{item.SizeUnitAbbr}}</span></td>
<td ng-show="nsProcessR" ng-if="item.RecordType!='ItemDesc'">{{item.ProcesName}}</td>
<td ng-show="nsShadeR" ng-if="item.RecordType!='ItemDesc'">{{item.Shadname}}</td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeightR" ng-if="item.RecordType=='Article'"><span>{{item.Weight}}</span></td>
<td ng-show="nsQtyR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'">{{item.flQty | number:0}} {{item.UnitAbbr}}</td>
<td ng-show="nsPriceR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.flPrice | number:2}}</span></td>
<td ng-show="nsAmountR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.CurAbbr}} {{(item.flQty*item.flPrice) | number:0}}</span></td>
</tr>
<tr class="footer-row">
<td colspan="{{ttlRowColspanR}}" style="text-align:center;">Total</td>
<td ng-show="nsQtyR" class="numeric-field">{{ttlQtyRM}}</td>
<td ng-show="nsPriceR" class="numeric-field"></td>
<td ng-show="nsAmountR" class="numeric-field">{{CurrAbrr}} {{ttlAmntRM}}</td>
</tr>
</tbody>
</table>
</div>

complex header in datatables.net

I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.
Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820
this html code (actually this is a template)
<!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4">Contract Details</th>
<th colspan="4">Delivery</th>
<th rowspan="2">Basis Terminal Month</th>
<th colspan="5">Fixed</th>
<th colspan="4">Unfixed</th>
<th colspan="3">Trigger</th>
<th colspan="2">Payment</th>
<th colspan="2" rowspan="2"></th>
</tr>
<tr>
<th>Contract Ref</th>
<th>Supplier/Buyer</th>
<th>Grade</th>
<th>Days Pending</th>
<th>Tons</th>
<th>Delivered</th>
<th>Balance</th>
<th>Status</th>
<th>Tons</th>
<th>Contract Price</th>
<th>Contract FOB Price</th>
<th>Mark To Market Price</th>
<th>Outright Exposure FOB</th>
<th>Tons</th>
<th>Contract FOB Diff</th>
<th>Mark To Market FOB Diff</th>
<th>Differential Exposure FOB</th>
<th>Strike Price</th>
<th>Variance</th>
<th>Days</th>
<th>Due Date</th>
<th>Days Late</th>
</tr>
</thead>
<tbody>
<!-- BEGIN:row -->
<tr id="row_{id}">
<td>{count}</td>
<td>{ref_number}</td>
<td>{supplier}</td>
<td>{grade}</td>
<td class="formatNumber alignRight">{pending_day}</td>
<td class="formatNumber alignRight">{contract_tons}</td>
<td class="formatNumber alignRight">{delivered_tons}</td>
<td class="formatNumber alignRight">{pending_tons}</td>
<td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
<td class="alignCenter">{terminal_month}</td>
<td class="formatNumber alignRight">{fixed_tons}</td>
<td class="formatNumber alignRight">{contract_price}</td>
<td class="formatNumber alignRight">{contract_fob_price}</td>
<td class="formatNumber alignRight">{market_price}</td>
<td class="formatNumber alignRight">{outright_fob}</td>
<td class="formatNumber alignRight">{unfixed_tons}</td>
<td class="formatNumber alignRight">{contract_fob_diff}</td>
<td class="formatNumber alignRight">{market_fob_diff}</td>
<td class="formatNumber alignRight">{differential_fob}</td>
<td class="formatNumber alignRight">{strike_price}</td>
<td class="formatNumber alignRight">{variance}</td>
<td class="formatNumber alignRight">{trigger_days}</td>
<td>{payment_due_date}</td>
<td class="formatNumber alignRight">{payment_days_late}</td>
<td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
<td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
</tr>
<!-- END:row -->
</tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->
and this is the javascript where I call datatable
$(document).ready(function() {
$("#myTable").dataTable();
});
I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.

The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.
Simply change the
<th colspan="2" rowspan="2"></th>
to be:
<th rowspan="2"></th>
<th rowspan="2"></th>
And you will be good to go.

How to compare cell values and hide rows in a html table

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.

jQuery sum events on TD click

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).