background color change of the clicked row - html

<table id="marketing_input" class="table table-bordered table-responsive table-condensed" style="display: block;overflow-x: scroll; height: 72vh; ">
<thead style="font-size:11px; position: sticky; top: 0; z-index: 1; ">
<tr class="info">
<th data-width="10%" data-column-id="customer" data-identifier="true" data-searchable="true" data-header-align="center">Customer</th>
<th data-width="10%" data-column-id="po_num" data-sortable="false" data-searchable="false" data-header-align="center">P. O. Number</th>
<th data-width="10%" data-column-id="part_num" data-sortable="false" data-searchable="false" data-header-align="center">Part Number</th>
<th data-width="5%" data-column-id="priority" data-sortable="false" data-searchable="false" data-header-align="center">Priority</th>
<th data-width="4%" data-column-id="lead_time" data-sortable="false" data-searchable="false" data-header-align="center">Lead Time</th>
<th data-column-id="job_type" data-sortable="false" data-searchable="false" data-header-align="center">Job Type</th>
<th data-width="8%" data-column-id="r_dt" data-order="asc" data-searchable="false" data-header-align="center">Receive Date</th>
<th data-width="5%" data-column-id="DateDiff" data-sortable="false" data-searchable="false" data-header-align="center">days left</th>
<th data-width="5%" data-column-id="loaded_by" data-sortable="false" data-searchable="false" data-header-align="center">Loaded By</th>
<th data-column-id="wait_per1" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">Waiting Days</th>
<th data-width="5%" data-column-id="issue_mar" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">issue</th>
<th data-column-id="status_mar" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">Status</th>
<th data-width="6%" data-column-id="technology" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">technology</th>
<th data-column-id="operator" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">Engineer</th>
<th data-column-id="la_date" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">Launch Date</th>
<th data-column-id="ppc_date" data-sortable="false" data-searchable="false" data-align="center" data-header-align="center">PPC Date</th>
<th data-width="5%" data-column-id="assign" data-formatter="assign" data-sortable="false" data-header-align="center">Job Assign</th>
<th data-width="5%" data-column-id="hold_job1" data-formatter="hold_job1" data-sortable="false" data-header-align="center">Hold</th>
<th data-width="5%" data-column-id="commands" data-formatter="commands" data-sortable="false" data-header-align="center">Take Job</th>
<th data-width="5%" data-column-id="delete_mi" data-formatter="delete_mi" data-sortable="false" data-header-align="center">Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
this is the table for which i have to add the onclick function which changes the background color of the whole row
tried doing some jquery but not working

Related

How to use col and rowspan at the same time?

I'm trying to replicate this table:
I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.
I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.
This is what I have so far:
<table border="1">
<caption>
Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
<tr>
<th scope="col">Poster name</th>
<td rowspan="2"></td>
<th scope="colrow" colspan="5">Color</th>
<th scope="col">Sizes available</th>
</tr>
<tr>
<th>1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
</tr>
</tbody>

This is the way I solved it, just in case other newbie like me has the same problem
<table border="1">
<col>
<col>
<colgroup span="5"></colgroup>
<col>
<tr>
<td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
<th rowspan="2">%</th>
<th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
<th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
</tr>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
<tr>
<td>EVIDENCIA 1</td>
<td>50%</td>
<td>A1</td>
<td>B2</tds>
<td>C3</td>
<td>D4</td>
<TD>E1</TD>
<td>Instrumento 1</td>
</tr>
</table>

HTML how to align the columns in on line?

I have an HTML page in which I am displaying some values.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col">Amt W Due date</th>
<th scope="col">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col ">Amt W Due date</th>
<th scope="col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col ">Amt W.Due Date</th>
<th scope="col ">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td>38,024</td>
<td>39,339</td>
</tr>
</tbody>
</table>
</section>
Output
Expected output
I want to set the column size to the size of the first Amt W Due date and Amt A Due date. i.e. all the amounts with due and after due date till grand total values should be aligned in one column.
Any help would be highly appreciated.
Note: I have more than one sections and each section have tables inside it.

You can do this in two ways:
Using inline style: adding style="width:10%" to the columns
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col" style="width:10%">Amt W Due date</th>
<th scope="col" style="width:10%">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col " style="width:10%">Amt W Due date</th>
<th scope="col " style="width:10%">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col " style="width:10%">Amt W.Due Date</th>
<th scope="col " style="width:10%">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td style="width:10%">38,024</td>
<td style="width:10%">39,339</td>
</tr>
</tbody>
</table>
</section>
(if you open the result in full page you can see the correct allignment)
using external style: i.e. by adding a class to the two columns, then setting the style in the CSS file
.eqAllign {
width:10%
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col" class="eqAllign">Amt W Due date</th>
<th scope="col" class="eqAllign">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col " class="eqAllign">Amt W Due date</th>
<th scope="col " class="eqAllign">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col " class="eqAllign">Amt W.Due Date</th>
<th scope="col " class="eqAllign">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td class="eqAllign">38,024</td>
<td class="eqAllign">39,339</td>
</tr>
</tbody>
</table>
</section>

Print HTML Table with Multiple Table Header

Please help me, on How to Print HTML Table with Multiple Table Header?
Sample code of my table header below:
<table>
<thead>
<tr>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is what i want to see in printable page for the Table Header:

<table border="2" >
<thead>
<tr>
<th colspan="2"></th>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="6">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>

See below code..
<table border="2" >
<thead>
<tr>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="4">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
here is working example :: https://jsfiddle.net/deepakvaishnav/0L48mvcz/

how to fixed column with merge column header

how to fixed column no, area, category, sub category, and other column scroll left to right ?
<table class="table table-bordered table-sm">
<thead style="background:red;color:white">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Area</th>
<th rowspan="2">Category</th>
<th rowspan="2">Sub Category</th>
<th rowspan="2">Risiko</th>
<th rowspan="2">Cause</th>
<th rowspan="2">Impact</th>
<th rowspan="1" colspan="6">Analisis</th>
<th rowspan="1" colspan="4">Evaluasi</th>
<th rowspan="1" colspan="2">Risk Treatment Options</th>
<th rowspan="2">Accountabel Unit</th>
<th rowspan="2">Sumber Daya</th>
<th rowspan="2">Deadline</th>
</tr>
<tr>
<th colspan="2">Probabilitas</th>
<th colspan="2">Impact</th>
<th colspan="2">Risk Level</th>
<th>PIC</th>
<th>Urgency</th>
<th>Existing Control</th>
<th>Risk Control<br>Assessment</th>
<th>Proaktif</th>
<th>Reaktif</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JsFiddle Link: http://jsfiddle.net/5p77f171/

Panel scroll bar not working in HTML

I am using Bootstrap HTML 5 and I have a panel inside which a table is present. I have enabled scroll for the panel but the table is not adjusting with the panel and the scroll bar is visible but inactive. I want the table inside the panel and each head content should be present within the cell (no overlapping) and the scroll bar needs to be active when content is spacious and effective.
The HTML is as,
<div class="panel-body panel-scroll">
<table class="table table-bordered" id="tableMyCert">
<thead style="background-color:lightblue">
<tr>
<th class="col-sm-4">head 1</th>
<th class="col-sm-3">head 2</th>
<th class="col-sm-3">head 3</th>
<th class="col-sm-3">head 4</th>
<th class="col-sm-3">head 5</th>
<th class="col-sm-5">head 6</th>
<th class="col-sm-2">head 7</th>
<th class="col-sm-5">head 8</th>
<th class="col-sm-4">head 9</th>
<th class="col-sm-2">head 10</th>
<th class="col-sm-5">head 11</th>
<th class="col-sm-4">head 12</th>
<th class="col-sm-2">head 13</th>
<th class="col-sm-5">head 14</th>
<th class="col-sm-4">head 15</th>
<th class="col-sm-2">head 16</th>
<th class="col-sm-5">head 17</th>
<th class="col-sm-5">head 18</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
and the CSS is as,
.panel-scroll{
overflow-x:scroll;
width:100%;
}

make structre like this
<div class="table-responsive">
<table class="table table-bordered" id="tableMyCert">
//rest of your code
</table>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered" id="tableMyCert">
<thead style="background-color:lightblue">
<tr>
<th class="col-sm-4">head 1</th>
<th class="col-sm-3">head 2</th>
<th class="col-sm-3">head 3</th>
<th class="col-sm-3">head 4</th>
<th class="col-sm-3">head 5</th>
<th class="col-sm-5">head 6</th>
<th class="col-sm-2">head 7</th>
<th class="col-sm-5">head 8</th>
<th class="col-sm-4">head 9</th>
<th class="col-sm-2">head 10</th>
<th class="col-sm-5">head 11</th>
<th class="col-sm-4">head 12</th>
<th class="col-sm-2">head 13</th>
<th class="col-sm-5">head 14</th>
<th class="col-sm-4">head 15</th>
<th class="col-sm-2">head 16</th>
<th class="col-sm-5">head 17</th>
<th class="col-sm-5">head 18</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>