How can I get a data attribute from a cloned table? - javascript

By click on one of the tasks in my scrollable menu, I want to alert the data-name. But the alert is "undefined".
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
$('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);
$("body").on("click", function(e) {
// the coordinate you clicked
var x = e.clientX
var y = e.clientY
// all th.fixed-side in cloned table (include thead and tbody)
var fixedSide = $('table.clone th.fixed-side')
// calculate the height of cloned table's tbody
var tableHeight = fixedSide.get(0).offsetHeight * fixedSide.length - 1;
// th's width
var offsetWidth = fixedSide.get(0).offsetWidth;
// calculate offsetTop and offsetLeft from body
var offset = getOffset(fixedSide.get(0))
// skip thead's th
offset.Top += fixedSide.get(0).offsetHeight;
// check if click inside the range
var inRange = (x >= offset.Left && x <= offset.Left + offsetWidth) &&
(y >= offset.Top && y <= offset.Top + tableHeight)
if (inRange) {
var name = $(this).data("name");
alert(name);
}
});
function getOffset(element) {
var offsetTop = 0;
var offsetLeft = 0;
do {
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
} while (element = element.offsetParent);
var offset = {
Left: offsetLeft,
Top: offsetTop,
}
return offset;
}
.table-scroll {
position: relative;
margin: auto;
overflow: hidden;
}
.table-wrap {
width: 100%;
overflow: auto;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
white-space: nowrap;
vertical-align: top;
}
.clone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.clone th,
.clone td {
visibility: hidden
}
.clone td,
.clone th {
border-color: transparent
}
.clone tbody th {
visibility: visible;
}
.clone .fixed-side {
visibility: visible;
background-color: #fff;
font-weight: normal;
border: none;
border-right: 2px solid #f4f4f4;
}
.clone thead,
.clone tfoot {
background: transparent;
}
.gantt-h {
font-weight: normal;
color: #b0b0b0;
border-right: 2px solid #f4f4f4;
}
.last {
border-right: 2px solid #f4f4f4;
}
.gantt td {
border-right: 2px solid #f4f4f4;
}
.today {
background-color: pink;
width: 100px;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table table gantt">
<thead>
<tr>
<th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0">Task</th>
<th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;">30 Mar</th>
<th scope="col" class="gantt-h">31 Mar</th>
<th scope="col" class="gantt-h">01 Apr</th>
<th scope="col" class="gantt-h">02 Apr</th>
<th scope="col" class="gantt-h">03 Apr</th>
<th scope="col" class="gantt-h">04 Apr</th>
<th scope="col" class="gantt-h">05 Apr</th>
<th scope="col" class="gantt-h">06 Apr</th>
<th scope="col" class="gantt-h">07 Apr</th>
<th scope="col" class="gantt-h">08 Apr</th>
<th scope="col" class="gantt-h">09 Apr</th>
<th scope="col" class="gantt-h">10 Apr</th>
<th scope="col" class="gantt-h">11 Apr</th>
<th scope="col" class="gantt-h">12 Apr</th>
<th scope="col" class="gantt-h">13 Apr</th>
<th scope="col" class="gantt-h">14 Apr</th>
<th scope="col" class="gantt-h">15 Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th data-name="Projekt 1" class="fixed-side project"><i class="fa fa-folder-open-o" style="color:#9e9e9e"></i> Projekt 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="blue" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> blue</th>
<td data-row="2" data-date="2018-03-30"></td>
<td data-row="2" data-date="2018-03-31"></td>
<td data-row="2" data-date="2018-04-01"></td>
<td data-row="2" data-date="2018-04-02"></td>
<td data-row="2" data-date="2018-04-03"></td>
<td data-row="2" data-date="2018-04-04"></td>
<td data-row="2" data-date="2018-04-05"></td>
<td data-row="2" data-date="2018-04-06"></td>
<td data-row="2" data-date="2018-04-07"></td>
<td data-row="2" data-date="2018-04-08"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="green" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> green</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="yellow" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> yellow</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="pink" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> pink</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="orange" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> orange</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>


Your issue is in this code block:
if (inRange) {
var name = $(this).data("name");
alert(name);
}
Change:
$(this).data("name");
with:
$(e.target).closest('tr').find("[data-name]").data("name");
According to your comment:
Now I get "Projekt 1" but whereever I click. Even if I click on blue or green etc.
The click event handler can be changed and simplified in order to satisfy your request:
$("body").on("click", "[data-name]", function (e) {
var name = $(this).data("name");
alert(name);
});
jQuery(document).ready(function () {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
$('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);
$("body").on("click", "[data-name]", function (e) {
var name = $(this).data("name");
alert(name);
});
});
.table-scroll {
position: relative;
margin: auto;
overflow: hidden;
height: 220px;
}
.table-wrap {
width: 100%;
overflow: auto;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
white-space: nowrap;
vertical-align: top;
}
.clone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.clone th,
.clone td {
visibility: hidden
}
.clone td,
.clone th {
border-color: transparent
}
.clone tbody th {
visibility: visible;
}
.clone .fixed-side {
visibility: visible;
background-color: #fff;
font-weight: normal;
border: none;
border-right: 2px solid #f4f4f4;
}
.clone thead,
.clone tfoot {
background: transparent;
}
.gantt-h {
font-weight: normal;
color: #b0b0b0;
border-right: 2px solid #f4f4f4;
}
.last {
border-right: 2px solid #f4f4f4;
}
.gantt td {
border-right: 2px solid #f4f4f4;
}
.today {
background-color: pink;
width: 100px;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table table gantt">
<thead>
<tr>
<th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0">
Task
</th>
<th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;">30 Mar</th>
<th scope="col" class="gantt-h">31 Mar</th>
<th scope="col" class="gantt-h">01 Apr</th>
<th scope="col" class="gantt-h">02 Apr</th>
<th scope="col" class="gantt-h">03 Apr</th>
<th scope="col" class="gantt-h">04 Apr</th>
<th scope="col" class="gantt-h">05 Apr</th>
<th scope="col" class="gantt-h">06 Apr</th>
<th scope="col" class="gantt-h">07 Apr</th>
<th scope="col" class="gantt-h">08 Apr</th>
<th scope="col" class="gantt-h">09 Apr</th>
<th scope="col" class="gantt-h">10 Apr</th>
<th scope="col" class="gantt-h">11 Apr</th>
<th scope="col" class="gantt-h">12 Apr</th>
<th scope="col" class="gantt-h">13 Apr</th>
<th scope="col" class="gantt-h">14 Apr</th>
<th scope="col" class="gantt-h">15 Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th data-name="Projekt 1" class="fixed-side project"><i class="fa fa-folder-open-o"
style="color:#9e9e9e"></i> Projekt 1
</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="blue" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o"
style="color:#9e9e9e"></i> blue
</th>
<td data-row="2" data-date="2018-03-30"></td>
<td data-row="2" data-date="2018-03-31"></td>
<td data-row="2" data-date="2018-04-01"></td>
<td data-row="2" data-date="2018-04-02"></td>
<td data-row="2" data-date="2018-04-03"></td>
<td data-row="2" data-date="2018-04-04"></td>
<td data-row="2" data-date="2018-04-05"></td>
<td data-row="2" data-date="2018-04-06"></td>
<td data-row="2" data-date="2018-04-07"></td>
<td data-row="2" data-date="2018-04-08"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="green" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o"
style="color:#9e9e9e"></i> green
</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="yellow" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o"
style="color:#9e9e9e"></i> yellow
</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="pink" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o"
style="color:#9e9e9e"></i> pink
</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th data-name="orange" class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o"
style="color:#9e9e9e"></i> orange
</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>


The $(this) is not referring to the cloned table, try:
Replace:
var name = $(this).data("name");
with:
var name = $(".main-table.clone").data("name");

Related

Get Value of nearest HTML thead element when clicking on td cell

I have an HTML table which looks like this:
jQuery(document).ready(function($) {
$('#reservationtable tbody tr td').on('click', function () {
var reservationtime = $( this ).siblings('th').text();
var header = $(this).next('.theader-text-nonstrong').val();
$('#modalvon').text(reservationtime);
$('#modalbis').text(addMinutes(reservationtime, '60'));
$('#modaldatum').text(header);
$("#confirmreservierung").modal("show");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm res-table" id="reservationtable">
<thead>
<tr>
<th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l") . "</span><br>" . date("d.m.Y"); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+1 day")). "</span><br>" . date("d.m.Y", strtotime("+1 day")); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+2 day")). "</span><br>" . date("d.m.Y", strtotime("+2 day")); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+3 day")). "</span><br>" . date("d.m.Y", strtotime("+3 day")); ?></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" class="td-border-right">Zeit</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
</tr>
<tr>
<th scope="row" class="td-border-right">08:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">09:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">10:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">11:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">12:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">13:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">14:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">15:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">16:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">17:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">18:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">19:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">20:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
</tbody>
</table>
Also, I have a jquery method which handles the event when a user clicks on a td in the table:
As you can see I want to load data inside the bootstrap modal. I want to get the value from the column header of the td which was clicked. Especially I want to get the value out of the span with the 'theater-text-nonstrong' class. The current method only gets me a null value.
Thank you for your help!

Since you have colspans involved one way is create an array for all the headings text.
On page load go through all the <th colspan> and get the colspan value and use that value to push text into the headings array for each column spanned.
Then when you click a <td> use it's index within cells on that row to get the associated heading text from the headings array
// add some cell text for demo
demoInit();
let spanHeadings = [];
$('thead th[colspan]').each(function() {
const colspan = +this.colSpan,
heading = $(this).find('.theader-text-nonstrong').text();
// create as many headings as colspan length
spanHeadings.push.apply(spanHeadings, Array(colspan).fill(heading));
});
$('#reservationtable tbody td').click(function() {
const tdIdx = $(this).index() - 1;// subtract for the left `<th>`
const heading = spanHeadings[tdIdx];
console.clear()
console.log('heading: ', heading)
});
function demoInit() {
$('td:empty').text(function(i) {
return 'Cell ' + (i + 1)
});
}
td {
border: 1px solid #ccc;
padding: 4px
}
table {
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm res-table" id="reservationtable">
<thead>
<tr>
<th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 1</span></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 2</span><br></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 3</span><br></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 4</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" class="td-border-right">Zeit</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
</tr>
<tr>
<th scope="row" class="td-border-right">08:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">09:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
</tbody>
</table>

How to fit the page into landscape while print

I need to print a page, while giving to print it is splitting to two pages. The page is splitting after the second table, is there any way to fit it to one page.
I am providing the code below
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>View JTC</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css" media="print">
#media print {
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
table {
page-break-inside: avoid;
}
#page {
size: A4 landscape;
}
}
</style>
</head>
<body>
<section class="container-fluid">
<table class="table table-sm table-bordered table-condensed">
<tr>
<th style="width: 30%; vertical-align: middle; text-align: center;">logo</th>
<th colspan="2" style="text-align: center; width: 70%">company</th>
</tr>
<tr>
<th rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</th>
<th style="width: 10%;">JTC No:</th>
<th></th>
</tr>
<tr>
<th>Date</th>
<th></th>
</tr>
</table>
<table class="table table-sm table-bordered table-condensed">
<tr>
<td style="width: 10%; text-align: left;">Project Number</td>
<td style="width: 15%; text-align: left;" colspan="2"></td>
<td style="width: 10%; text-align: left;">Unit No. / Tag No.</td>
<td style="width: 15%; text-align: left;" colspan="4"></td>
</tr>
<tr>
<td>Area Number</td>
<td colspan="2"></td>
<td>Material Class</td>
<td colspan="4"></td>
</tr>
<tr>
<td style="width: 15%; text-align: left;">Drawing No: / ISO
Number</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 15%; text-align: left;">JC No:</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 10%; text-align: left;">Sheet No</td>
<td style="width: 15%; text-align: left;"></td>
<td style="width: 10%; text-align: left;">Rev. No.</td>
<td style="width: 15%; text-align: left;"></td>
</tr>
<tr>
<td style="width: 15%; text-align: left;">Item Description</td>
<td style="width: 15%; text-align: left;" colspan="2"></td>
<td style="width: 15%; text-align: left;">ITP Stage Nos.</td>
<td style="width: 15%; text-align: left;" colspan="4"></td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table table-bordered table-condensed">
<tr>
<th rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Item/Position
No.</th>
<th colspan="2">Material Spec Grade</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Size</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</th>
<th colspan="2">Heat/Plate/TestNo</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</th>
<th colspan="2">Fitup Result</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Date</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">Sign</th>
</tr>
<tr>
<th>Material 1</th>
<th>Material 2</th>
<th>Material 1</th>
<th>Material 2</th>
<th>Accept</th>
<th>Reject</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">Name & Signature of fabrication foreman</td>
<td colspan="2">Released to</td>
<td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td>
<td colspan="2"><input type="checkbox"> Welding</td>
<td colspan="4"><input type="checkbox">
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7">Date</td>
<td colspan="7">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table table-bordered table-condensed">
<tr>
<th rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Joint
No</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">WPS
No.</th>
<th colspan="3" class="text-center">Welding Process</th>
<th colspan="3" class="text-center">Welder/Operation No.</th>
<th colspan="2" rowspan="2" class="text-center">Visual
Inspection</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Date</th>
<th style="text-align: center; vertical-align: middle;" rowspan="3">Sign</th>
</tr>
<tr>
<th colspan="3" class="text-center">Passes</th>
<th colspan="3" class="text-center">Passes</th>
</tr>
<tr>
<th class="text-center">Root/Hot</th>
<th class="text-center">Fill</th>
<th class="text-center">Cap</th>
<th class="text-center">Root/Hot</th>
<th class="text-center">Fill</th>
<th class="text-center">Cap</th>
<th class="text-center">Accept</th>
<th class="text-center">Reject</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">Name & Signature of fabrication foreman</td>
<td colspan="3">Released to</td>
<td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td>
<td colspan="1"><input type="checkbox"> Welding</td>
<td colspan="4"><input type="checkbox">
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14">Name & Signature of QC Personel</td>
</tr>
<tr>
<td colspan="7">Date</td>
<td colspan="7">Date</td>
</tr>
</table>
</section>
</div>
</body>
</html>
There are 10 rows in each table, due to stack overflow limitations I short the code. Can any one help me with this Thank you in advance.

I did try with 10 rows in the two tables and this configuration seems to have worked out for me.
<style type="text/css" media="print">
#media print {
html, body {
height: 100%;
width: 100%;
}
table:nth-of-type(2) {
margin-top:-90px;
margin-bottom: 0;
}
#page {
size: A4 landscape;
margin: 0;
}
}
</style>
table:nth-of-type(2) is used to specifically work on the 2nd table, in your case the Fabrication Assembly Fit-Up Table.
Hope this helped.

can not resize a table Column in a horizontally Scrollable div

I have a big table with 20 headers. I Want to resize the table columns but as the table is too big it stopped resizing. I have tried putting the table inside a div with overflow:auto but it will not scroll horizontally or make the div bigger when i try to resize the table columns.
i have added a sample of what i am trying to do below.
P.S. I am trying to do it without adding jquery.
<html>
<head>
</head>
<style>
.tg {border-collapse:collapse;border-spacing:0; width:100%;}
.tg td{padding:10px 5px;border-style:solid;border-width:1px;}
.tg th{padding:10px 5px;border-style:solid;border-width:1px;}
.tg .tg-dvpl{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0pky{
top: 0;
z-index: 10;
resize: horizontal;
overflow: auto;
min-width: 70px;
position: relative;
}
.tg tr{ position: relative;}
</style>
<body>
<div style="height: 300px; overflow: auto;">
<table class="tg">
<tr>
<th class="tg-dvpl" colspan="5">H1</th>
<th class="tg-dvpl" colspan="8">H2</th>
<th class="tg-dvpl" colspan="8">H3</th>
</tr>
<tr>
<td class="tg-0pky">#</td>
<td class="tg-0pky">1</td>
<td class="tg-0pky">2</td>
<td class="tg-0pky">3</td>
<td class="tg-0pky">4</td>
<td class="tg-0pky">5</td>
<td class="tg-0pky">6</td>
<td class="tg-0pky">7</td>
<td class="tg-0pky">8</td>
<td class="tg-0pky">9</td>
<td class="tg-0pky">10</td>
<td class="tg-0pky">11</td>
<td class="tg-0pky">12</td>
<td class="tg-0pky">13</td>
<td class="tg-0pky">14 </td>
<td class="tg-0pky">15</td>
<td class="tg-0pky">16</td>
<td class="tg-0pky">17</td>
<td class="tg-0pky">18</td>
<td class="tg-0pky">19</td>
<td class="tg-0pky">20</td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

You required width to table then need overflow to parent class. check snippet.
div {
width: 1000px;
overflow-x: scroll;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
width: 1900px;
}
.tg td {
padding: 10px 5px;
border-style: solid;
border-width: 1px;
}
.tg th {
padding: 10px 5px;
border-style: solid;
border-width: 1px;
}
.tg .tg-dvpl {
border-color: inherit;
text-align: left;
vertical-align: top
}
.tg .tg-0pky {
top: 0;
z-index: 10;
resize: horizontal;
overflow: auto;
min-width: 70px;
position: relative;
}
.tg tr {
position: relative;
}
<div>
<table class="tg">
<tr>
<th class="tg-dvpl" colspan="5">H1</th>
<th class="tg-dvpl" colspan="8">H2</th>
<th class="tg-dvpl" colspan="8">H3</th>
</tr>
<tr>
<td class="tg-0pky">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
<td class="tg-0pky">1</td>
<td class="tg-0pky">2</td>
<td class="tg-0pky">3</td>
<td class="tg-0pky">4</td>
<td class="tg-0pky">5</td>
<td class="tg-0pky">6</td>
<td class="tg-0pky">7</td>
<td class="tg-0pky">8</td>
<td class="tg-0pky">9</td>
<td class="tg-0pky">10</td>
<td class="tg-0pky">11</td>
<td class="tg-0pky">12</td>
<td class="tg-0pky">13</td>
<td class="tg-0pky">14 </td>
<td class="tg-0pky">15</td>
<td class="tg-0pky">16</td>
<td class="tg-0pky">17</td>
<td class="tg-0pky">18</td>
<td class="tg-0pky">19</td>
<td class="tg-0pky">20</td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Javascript Change table cell background color from second table cell

I'm wondering if there is any possible way to change the background color of a table cell from choosing a color from second table cell, using javascript only.
If you can tell me how I will be glad. I'm a newbie at this so don't hate me. :)
Thank you for any feedback!
This is how it should look like:
EDIT:
My HTML code :
<html lang="en">
<head>
</head>
<style>
table.first {
border-collapse: collapse;
display: inline-block;
}
table.first td {
border: solid 2px;
border-color: black;
font-size: 3em;
padding: 1em;
}
table.second {
border-collapse: collapse;
display: inline-block;
float: right;
}
table.second td {
border: solid 2px;
border-color: black;
font-size: 3em;
padding: 1em;
}
</style>
</head>
<body>
<table class="first">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="second">
<tr>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="blue"></td>
</tr>
<tr>
<td bgcolor="red"></td>
</tr>
<tr>
<td bgcolor="yellow"></td>
</tr>
<tr>
<td bgcolor="green"></td>
</tr>
</table>
<script src="main.js"></script>
</body>
</html>

Use document.querySelectorAll() to get a list of all elements that match the given CSS selector.
Use Array.from() to turn it into an array and forEach to iterate thru them.
Get the bgcolor of the clicked tdand apply it to the all the other table's tds.
(function() {
var color;
Array.from(document.querySelectorAll('.second td')).forEach(td => {
td.onclick = function() {
color = this.getAttribute('bgcolor');
};
});
Array.from(document.querySelectorAll('table.first td')).forEach(td => {
td.onclick = function() {
if (color) this.setAttribute('bgcolor', color);
};
});
document.getElementById("clear").onclick = function() {
Array.from(document.querySelectorAll('table.first td')).forEach(td => {
td.removeAttribute('bgcolor');
});
};
})();
table.first {
border-collapse: collapse;
display: inline-block;
}
table.first td {
border: solid 2px;
border-color: black;
font-size: 3em;
padding: 1em;
}
table.second {
border-collapse: collapse;
display: inline-block;
float: right;
}
table.second td {
border: solid 2px;
border-color: black;
font-size: 3em;
padding: 1em;
}
<button id=clear>Clear</button><br>
<table class="first">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="second">
<tr>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="blue"></td>
</tr>
<tr>
<td bgcolor="red"></td>
</tr>
<tr>
<td bgcolor="yellow"></td>
</tr>
<tr>
<td bgcolor="green"></td>
</tr>
</table>

Snap to div horizontal on slide or swipe

I have a horizontal set of Divs each holding a score table from a game. The intent is to have the user on a phone slide / swipe the game table and when the user removes his finger, the program will snap to the next div. For example, if Game 1 appears, the user swipes quickly and lifts the finger when Game 1 and Game 2 are both showing, the program will advance to Game 2, not continuing sliding. The code is below and a demo here. Any and all help appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css" media="screen">
table.swingTable {
border-collapse: collapse;
font-size: 12px;
margin: 0px 0px 20px;
/* original: margin: 10px 10px 20px; */
text-align: left;
width:100%;
}
table.swingTable thead th.rounded-company {
background: #ccc;
}
table.swingTable thead th.rounded-q4 {
background: #ccc;
}
table.swingTable th {
background: none repeat scroll 0 0 #CCCCCC;
color: #222222;
font-size: 11px;
/*font-size: 10px;*/
font-weight: bold;
padding: 6px;
/*padding: 8px;*/
text-transform: uppercase;
}
/*table.swingTable th#hole-shot{ width: 50;}*/
table.swingTable td {
background: none repeat scroll 0 0 #eee;
border-top: 1px solid #FFFFFF;
color: #333;
padding: 8px;
}
table.swingTable tfoot td.rounded-foot-left {
background: #eee;
}
tabletfoot.swingTable td.rounded-foot-right {
background: #eee;
}
table.swingTable tbody tr:hover td {
background: none repeat scroll 0 0 #ddd;
}
.slideContainer {
white-space: nowrap;
}
.horizontal{
display: inline-block;
margin:0 auto;
border:2px solid;
/*border-radius:25px;*/
white-space: normal;
width: 100%;
/*left:0;right:0; */
}
</style>
<script>
$(document).ready(function()
{
}); // end main
</script>
</head>
<body>
<div class="slideContainer">
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 1</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 2</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 3</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 4</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 5</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Categories