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.
Related
In a <table>with check box in the Last column, on selection of whcih I want to sum the values of previous two <td>.
The js function should sum the values of the columns for which the CheckBox is ticked. But I am stuck at locating the previous <td> itself. The Snippet is as follows.
function doSumAeFunction(){
var prevCell = $(this).closest('tr').prev('td').text();
console.log(prevCell);
alert(prevCell);
}
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>
To get the value in the cell before the checkbox use $(this).parent().prev('td').text():
$('input[type="checkbox"]').change(function() {
var prevCell = $(this).parent().prev('td').text();
console.log(prevCell);
})
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>
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>
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");
This is my table and I want to get the value of "Spielzeit" and "Coins".
I've tried a lot like
document.querySelector("div.page Spielzeit");
document.getElementById('page').getElementsByTagName('th');
document.querySelectorAll("#page th");
But nothing worked.
I cant find my table, because there is no table id.
Maybe you know how to "find" my values.
Thanks
<div id="page">
<table style="margin-left: 125px; margin-top:50px; width: 300px;">
<tbody>
<tr>
<th style="text-align: left;">Benutzername:</th>
<th style="color: #9e7538; text-align: right;">Dantes999</th>
</tr>
<tr>
<th style="text-align: left;">Reich:</th>
<th style="color: #9e7538; text-align: right;">Not empire</th>
</tr>
<tr>
</tr>
<tr>
<th style="text-align: left;">Charaktere:</th>
<th style="color: #9e7538; text-align: right;">0</th>
</tr>
<tr>
<th style="text-align: left;">Spielzeit:</th>
<th style="color: #9e7538; text-align: right;"> Minuten</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 I-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 V-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Lagerpasswort:</th>
<th style="color: #9e7538; text-align: right;">000000</th>
</tr>
<tr>
<th style="text-align: left;">Loeschcode:</th>
<th style="color: #9e7538; text-align: right;">1234567</th>
</tr>
</tbody>
</table>
</div>
If there's only one table on your page, document.querySelector("table").get(0) should give you your table.
Second, page is an id in your HTML, not a class. So it should be selected with # not .
You can change your HTML to this:
<div id="page">
<table style="margin-left: 125px; margin-top:50px; width: 300px;">
<tbody><tr>
<th class="item" style="text-align: left;">Benutzername:</th> <th class="value" style="color: #9e7538; text-align: right;">Dantes999</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Reich:</th> <th
class="value" style="color: #9e7538; text-align: right;">Not empire</th>
</tr><tr>
</tr><tr>
<th class="item" style="text-align: left;">Charaktere:</th>
<th class="value" style="color: #9e7538; text-align: right;">0</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Spielzeit:</th> <th
class="value" style="color: #9e7538; text-align: right;"> Minuten</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Coins:</th> <th
class="value" style="color: #9e7538; text-align: right;">0 I-Coins</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Coins:</th> <th
class="value" style="color: #9e7538; text-align: right;">0 V-Coins</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Lagerpasswort:</th> <th class="value" style="color: #9e7538; text-align: right;">000000</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Loeschcode:</th> <th class="value" style="color: #9e7538; text-align: right;">1234567</th>
</tr>
</tbody></table>
Now you can use document.querySelector(".item[text='Spielzeit']); to select the corresponding item and get the text of it's next element for the value
So your code should be:
var elem = document.querySelector(".item[text='Spielzeit']");
var value = elem.parentNode.querySelectorAll('.value').html;
I have the following markup,
<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
data-mode="columntoggle" data-role="table" style=
"overflow-x: scroll !important;">
<thead>
<tr>
<th class="ui-table-priority-6" data-colstart="1"
data-priority="6" style="font-weight: bold;">SL</th>
<th class="ui-table-priority-6" data-colstart="2"
data-priority="6" style="font-weight: bold;">Cat</th>
<th class="ui-table-priority-6" data-colstart="3"
data-priority="6" style="font-weight: bold;">Brand</th>
<th class="ui-table-priority-6" data-colstart="4"
data-priority="6" style="font-weight: bold;">Product</th>
<th class="ui-table-priority-persist" data-colstart="5"
data-priority="persist" style="font-weight: bold;">Item
Code</th>
<th class="ui-table-priority-persist" data-colstart="6"
data-priority="persist" style="font-weight: bold;">Model
Number</th>
<th class="ui-table-priority-6" data-colstart="7"
data-priority="6" style="font-weight: bold;">Bundle Value</th>
<th class="ui-table-priority-persist" data-colstart="8"
data-priority="persist" style="font-weight: bold;">Old RSP</th>
<th class="ui-table-priority-persist" data-colstart="9"
data-priority="persist" style="font-weight: bold;">Promo
RSP</th>
<th class="ui-table-priority-6" data-colstart="10"
data-priority="6" style="font-weight: bold;">Reduced %age</th>
<th class="ui-table-priority-6" data-colstart="11"
data-priority="6" style="font-weight: bold;">Start Date</th>
<th class="ui-table-priority-6" data-colstart="12"
data-priority="6" style="font-weight: bold;">Vendor End
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-table-priority-6">
<p>A115</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Panasonic</p>
</td>
<td class="ui-table-priority-6">
<p>Blender</p>
</td>
<td class="ui-table-priority-persist">
<p>11651099</p>
</td>
<td class="ui-table-priority-persist">
<p>MXAC400</p>
</td>
<td class="ui-table-priority-6">
<p>GV 50</p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 399</strong></p>
</td>
<td class="ui-table-priority-persist">
<p>
<strong> 399</strong></p>
</td>
<td class="ui-table-priority-6">
<p>0%</p>
</td>
<td class="ui-table-priority-6">
<p>Feb 26th</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 8th</p>
</td>
</tr>
<tr>
<td class="ui-table-priority-6">
<p>C073</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Tefal</p>
</td>
<td class="ui-table-priority-6">
<p>Fryer</p>
</td>
<td class="ui-table-priority-persist">
<p>11480473</p>
</td>
<td class="ui-table-priority-persist">
<p>FZ700072</p>
</td>
<td class="ui-table-priority-6">
<p>PB</p>
</td>
<td class="ui-table-priority-persist">
<p><strong>999</strong></p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 749</strong></p>
</td>
<td class="ui-table-priority-6">
<p>25%</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 1st</p>
</td>
<td class="ui-table-priority-6">
<p>Will Revert</p>
</td>
</tr>
</tbody>
</table>
Can I add a horizontal markup? So that users can easily scroll right and left
You can wrap your table with div like:
<div style="width: 100%; height: 400px; overflow: auto">
<table>
<!-- table content -->
</table>
</div>
If table > window width scroll will be visible dy default.
Check CSS styles and js (jQuery Mobile can fixed the table to window width)
Also you can use div container, for example:
<div style="width:300px;overflow:auto">
<table>...</table>
</div>
The answers above worked for me; however, I didn't want to specify explicit widths or heights, so the following solved the problem even better:
<div style="overflow-x: auto;">
<table [...] </table>
</div>