We Keep Coding

Display extra info upon clicking a row in a table

I essentially have a table with rows and upon clicking a row, I would like a popUp box to appear. I have the div/HTML code for it. However, I am not sure how to implement the backend code of it.
1.) User clicks row
2.) It gets extra info from that row: For example, the row is only displaying $transactionID and $transactionAmount. Then the user clicks a row, a box pops up displaying the $transactionID, $transactionAmount, $transactionDate and $reference
How do I go about doing this? I am completely confused and have attempted to look everywhere to find a solution but can't seem to find any similar examples
document.addEventListener("DOMContentLoaded", () =>{
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () =>{
// Not sure what to do here
})
})
})
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr data-href='$value'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
}
</tbody>
</table>
</div>
This was my approach but it doesn't work correctly: It won't actually update the values when clicked. Upon clicking a row, it will constantly display the same values from the first row of the table
function displayTransaction() {
var x = document.getElementById("transactionBox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
#transactionBox{
position: relative;
display: none;
overflow: hidden;
}
transactionBox_class{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transition: opacity 500ms;
opacity: 0;
}
.wrapper{
margin: 150px auto;
padding: 20px;
background: #e7e7e7;
border-radius: 5px;
width: 15%;
position: relative;
transition: all 5s ease-in-out;
}
.wrapper h2{
margin-top: 0;
color: #333;
}
.wrapper .close{
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.wrapper .content{
max-height: 30%;
overflow: auto;
}
.container{
border-radius: 5px;
background-color: #e7e7e7;
padding: 20px 0;
}
form label{
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}
.container p{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr onclick='displayTransaction()'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox'>
<div class='wrapper'>
<h2>Transaction Details</h2>
<div class='content'>
<div class='container'>
<form>
<label>Transaction ID:</label>
<p>$transactionID</p>
<label>Amount:</label>
<p>$transactionAmount</p>
<label>Date:</label>
<p>$transactionDate</p>
<label>Reference:</label>
<p>$reference</p>
</form>
</div>
</div>
</div>
</div>";
}
?>
</tbody>
</table>
</div>
</body>

You can create a class called visible or something and add it to the children in the when it gets clicked.
You can use element.classList.add("my-class"); to add a class (.remove("myclass") to remove it)

After analyzing your foreach loop I can see that there are some rows of the table getting populated but the id remains the same for every transaction division that is transactionBox which is why you are getting only first row which is the first element with the id.
Solutions :-
Create a dynamic ID for each of the row's transaction division.
echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
<div class='wrapper'>
<h2>Transaction Details</h2>
Use custom attribute but yaah unique.
echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
<div class='wrapper'>
<h2>Transaction Details</h2>
The working examples are below.
function showDetails_1(elem){
var actual_elem = "#transaction_"+elem;
console.log(actual_elem)
$(actual_elem).attr("style","display:block");
}
function showDetails_2(elem){
var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]";
console.log(actual_elem);
$(actual_elem).attr("style","display:block");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=3>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_1(433)">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction_433">
Yo..! here are the details_1
</div></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction" transaction-type="433">
Yo..! here are the details_2
</div></td>
</tr>
</table>

HTML table columns are not showing up properly

I have a task to display dynamically HTML table row which I have accomplished, I have a thead,tbody and tfoot ,all these three are in different different tables because I want to make tbody scroll after a certain height
Table Description
In first table I have only thead, and the last one I only have tfoot which is calculating some totals
The major one is 2nd one this one is created dynamically, when page loads the first row gets created which is having input field as Cells.
Some input fields are editable and some are not because of requirement
the last input field in the row is Disc% where if user press enter I am creating new row, the first cell of each row is ItemName which is Jquery autocomplete so user is typing something and selecting some itemName and on pressing tab I am populating some fields accordingly
What I am trying to do
The 2nd table which is having tbody I have given it some height and overflow:auto so that it scrolls after certain height
The issue is all the columns are not aligning uniformly the are breaking even I have given style to all off them separately
when Scroll is coming then also the tbody is shrinking even they both are in same div
Code
function format(number, decimals = 2) {
const fixed = parseFloat(number).toFixed(decimals);
const [float, dec] = fixed.split('.')
const intFormatted = (+float)
return intFormatted + (dec ? '.' + dec : '');
}
$(document).ready(function() {
var tableData = {};
var tabledata = {
"ALMOND CHBAR~2402": {
"itemName": "ALMOND CHBAR",
"itemCode": "2402",
"costPrice": 20.0,
"gstPercentage": 14.5,
"unitCode": "NOS",
"mrp": 30.0
},
"A BR SB EX~333": {
"itemName": "A BR SB EX",
"itemCode": "333",
"costPrice": 1.0,
"gstPercentage": 0.0,
"unitCode": "NOS",
"mrp": 1.0
}
}
populateData(tabledata)
function rowappendThead(thead) {
const theadymarkup =
`<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
<th style="background-color: white;border: 1px solid white"></th>
</tr>`
$(thead).append(theadymarkup);
}
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="tel" id="purRatetd" class="form-control commantd"name="purRatetd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);
var autoCompleteData = Object.keys(tableData);
$("[name=itemNametd]", tbody).last().autocomplete({
source: autoCompleteData,
autoSelectFirst: true,
autoFocus: true
}).data('tableData', tableData);
}
function rowappendTfoot(tfoot) {
const tfootmarkup =
`<tr>
<td id="itemNametf" class="commantf" align="center">Total ->
</td>
<td id="itemCodetf" class="commantf"></td>
<td id="mrptf" class="commantd"></td>
<td id="purRatetf" class="commantf"></td>
<td id="unitQtytf" class="commantf"></td>
<td id="discPercentagetf" class="commantf"></td>
<td id="discAmttf" class="commantf"></td>
<td id="gstPercentagetf" class="commantf"></td>
<td id="gstAmttf" class="commantf"></td>
<td id="totalAmttf" class="commantf"></td>
<td id="crossBtntf" class="commantf"><span class="rupee"></span></td>
</tr>`
$(tfoot).append(tfootmarkup);
}
function getValues(row) {
const search = ($('[name=itemNametd]', row).val()).toString()
var data = $('[name=itemNametd]', row).data('tableData');
const value = data[search];
if (value) {
CostPrice = value.costPrice;
$(row).find("[name=itemCodetd]").val(value.itemCode);
$(row).find("[name=mrptd]").val(format(value.mrp));
$(row).find("[name=purRatetd]").val(format(CostPrice));
$(row).find("[name=unittd]").val(value.unitCode);
$(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
$("[name=purRatetd]").focus();
}
}
document.addEventListener("keydown", function(e) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (!$(event.target).val()) {
e.preventDefault();
return;
}
const row = e.target.parentElement.parentElement
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
$(document).on("focusout", "[name=itemNametd]", function(e) {
const row = e.target.parentElement.parentElement
getValues(e.target.parentElement.parentElement)
});
function populateData(data) {
tableData = Object.assign({}, data);
var autoCompleteData = Object.keys(data);
rowappendThead($('thead', '#tableInvoice'));
rowappend($('tbody', '#tbodyScroll'));
rowappendTfoot($('tfoot', '#tfootTable'));
}
});
input[type=tel] {
text-align: right;
}
#itemNameth {
width: 370px;
}
#itemNametd {
width: 398px;
}
#itemNametf {
width: 348px;
}
#itemCodetf,
#itemCodetd,
#mrptf,
#mrptd,
#purRatetf,
#purRatetd,
#discAmttf,
#discAmttd,
#gstAmttf,
#gstAmttd,
#gstPercentagetf,
#gstPercentagetd,
#unitQtytd,
#discPercentagetd,
#unitQtytf,
#discPercentagetf {
font-size: 10pt;
color: black;
text-align: right;
}
#itemCodeth {
width: 60px;
}
#itemCodetf {
width: 57px;
}
#itemCodetd {
width: 63px;
}
#unitQtyth {
width: 60px;
}
#unitQtytf {
width: 60px;
}
#unitQtytd {
width: 60px;
}
#discPercentagetd {
width: 60px;
}
#discPercentageth {
width: 60px;
}
#discPercentagetf {
width: 60px;
}
#mrpth {
width: 60px;
}
#mrptf {
width: 55px;
}
#mrptd {
width: 63px;
}
#purRateth {
width: 70px;
}
#purRatetf {
width: 65px;
}
#purRatetd {
width: 73px;
}
#discAmtth {
width: 70px;
}
#discAmttf {
width: 70px;
}
#discAmttd {
width: 70px;
}
#gstAmtth {
width: 80px;
}
#gstAmttf {
width: 80px;
}
#gstAmttd {
width: 80px;
}
#gstPercentageth {
width: 40px;
}
#gstPercentagetf {
width: 60px;
}
#gstPercentagetd {
width: 60px;
}
#totalAmttd {
width: 130px;
font-size: 10pt;
color: black;
font-weight: bold;
text-align: right;
background-color: #C4B7C7;
}
#totalAmttf {
width: 105px;
font-size: 10pt;
color: black;
font-weight: bold;
text-align: right;
background-color: #C4B7C7;
}
#totalAmtth {
width: 130px;
}
#itemNametd {
font-size: 10pt;
}
#crossBtntf {
width: 25px;
background-color: white;
border: 1px white;
}
#itemNametf,
#totalAmttf {
color: black;
font-weight: bold;
}
table {
border-collapse: collapse !important;
}
table.table-bordered>thead>tr>th {
border: 1px solid white;
white-space: nowrap;
font-family: Verdana;
font-size: 9pt;
padding: 0px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
}
table.table-bordered>tbody>tr>td {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 0px 5px 5px 5px;
color: black;
}
table.table-bordered>tfoot>tr>td {
border: 1px solid black;
white-space: nowrap;
border-collapse: separate !important;
font-family: Verdana;
font-size: 8pt;
background-color: #8c8edf;
padding: 0px 5px 5px 5px;
}
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row tableGrn">
<div id="printFull">
<div align="right">
<table class="table table-bordered" id="tableInvoice">
<thead>
</thead>
</table>
<div style="height: 30px; overflow-y: auto;">
<table id="tbodyScroll">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<table class="table table-bordered" id="tfootTable">
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
It is showing up like this:
I think I am messing up with CSS a lot, while doing width as is % it is overlapping.

It seems that the CSS is indeed messing up your table.
Try not to use fixed widths (80px), try % widths instead.

Show html table content in separate boxes

I have a simple html page with a html table. I have complied the codes to show real time search result in the table format. I am just wondering if it is possible to show the table data in separate boxes? Like forms? I have 11 columns in My html table and few of them has very long data so text wrapping looks ugly.
Please guide me how can the data be filtered and displayed in scrollable boxes instead of normal table.
here is my code.
function myFunction1() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput1");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function myFunction2() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myTable tbody {
height: 600px;
display: inline-block;
width: 100%;
overflow: auto;
}
#myInput1 {
background-image: url("res/searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
width: 26%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myInput2 {
background-image: url("res/searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
width: 26%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font: 15px arial, sans-serif;
}
tr:nth-child(even) {
background-color: #eff1f4;
}
#myTable th, #myTable td {
table-layout: fixed;
text-align: left;
padding: 10px;
width: 100%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #DEC4BC;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="res/eGo.png" style="width:250px;height:150px;">
<h2><font face="Arial" color="#c11919">eGO Web</font></h2>
<input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for customer names" title="Type in a customer name">
<input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Customer Number" title="Type in a Customer Number">
<br>
<font size="2"face="Arial" color="#c11919">last updated on - July 2019</font>
<br>
<br>
<table id="myTable" style="display:visible;">
<tr class="header">
<th style="width:10%; ">Customer Name</th>
<th style="width:10%;">Account Number</th>
<th style="width:10%;">Collector Name</th>
<th style="width:10%;">Statement Email</th>
<th style="width:10%;">Customer Contacts</th>
<th style="width:10%;">Internal Contacts</th>
<th style="width:10%;">3rd Party Payments</th>
<th style="width:10%;">Remarks/ Customer Profile</th>
<th style="width:10%;">Historical Activities</th>
<th style="width:10%;">Portal/ Invoicing Method</th>
<th style="width:10%;">Statement Required</th>
</tr>
<--! Here is table data -->
</table>
<br>
<font size="1"face="Arial" color="#c11919">To report issues Click Here or send email to pratik.kumar#company.com</font>
</body>
</html>

Writing as an answer as not allowed to comment yet. You could set the following styles:
tr,td {
overflow: auto;
}
This will allow scrolling in cells of table when texts overflow or are more than specified size of boxes.
More on overflow here: https://www.w3schools.com/cssref/pr_pos_overflow.asp

Yes, table cells can contain another elements, and you can insert div with limited dimensions into and set overflows for scrolling. For example:
<table>
<tr>
<td>One cell</td>
<td>second cell
<div style="width: 100px; height: 100px; overflow: auto">
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appearvery long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
</div>
</td>
<td>Third cell</td>
</tr>
</table>

How to pass a html table to controller in rails?

I am doing a department store automation project in rails for the first time, So I am encountering some problems in bill generation. I want to send all the details of the table to my controller where I can calculate cart price and total price. Help me out even if there is some other way to overcome this situation.
<html>
<head>
<style>
* {box-sizing: border-box}
label {
cursor: default;
color:black;
font-size: 15px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
p {
color:black;
}
h1 {
color:black;
}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: white;
}
.container {
padding: 16px;
background-color: white;
text-align: left;
font-size: 15px;
margin-top: 100px;
}
table {
width: 500px;
font-size: 30px;
border: 5px solid blue;
}
th, td {
text-align: left;
padding: 8px;
}
td {
color: black;
}
tr:nth-child(odd){background-color: #ffffb3}
th {
background-color: #4000ff;
color: white;
}
input:invalid + span:after {
content: '✖';
color: #f00;
padding-left: 5px;
}
input:valid + span:after {
content: '✓';
color: #26b72b;
padding-left: 5px;
}
</style>
</head>
<body bgcolor="white">
<div id="POItablediv" class="container">
<form name="genbill" method="get" action="genCartAction">
<table border="1">
<tbody id="POITable">
<tr>
<td>CATEGORY ID</td>
<td>NUMBER OF PRODUCTS</td>
<td>DELETE PRODUCT</td>
<td>ADD PRODUCT</td>
<td>ACTIONS</td>
</tr>
<tr>
<form name="genbill" method="get" action="genCartAction">
<td> <SELECT NAME="cid" >
<% for x in #cid %>
<OPTION VALUE="<%= x %>" ><%= x %></OPTION>
<% end %></SELECT><br>
</td>
<td><input type="text" name="nop"></td>
<td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
<td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
</tr>
</tbody>
</table></form>
<form name="genbill" method="get" action="genBillAction">
<input type="text" name="bid" readonly hidden="true">
<input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
</form>
</div>
<script>
function tableClicks (e) {
let cmd = e.target.getAttribute('data-cmd');
if (cmd && (cmd in buttonEvents)) {
buttonEvents[cmd](e);
}
return;
}
let table = document.getElementById('POITable');
let buttonEvents = {
insRow: function () {
var newRow = table.rows[1].cloneNode(true);
table.appendChild(newRow);
newRow.firstElementChild.textContent = newRow.rowIndex;
return;
},
delRow: function (e) {
var rowIdx = e.target.closest('tr').rowIndex,
rows = null;
if (rowIdx === 1) return; // Don't delete the first row
table.deleteRow(rowIdx);
// Update row numbers
rows = table.rows;
for (const row of rows) {
let idx = row.rowIndex;
if (idx < 1) continue; // Skip the header row
row.firstElementChild.textContent = idx;
}
return;
}
};
table.addEventListener('click', tableClicks);
</script>
</body>
</html>

If it just to calculate the total price, you should do it in the javascript code, there is not need to make an endpoint just for that...

Pull th content into a td data-label attribute

I'm using a responsive table style that will collapse for smaller screen sizes and display the table header before each cell.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
color: red;
background-color:#000;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:first-child{
color:white;
background: #000;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Estimated arrival date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Really freaking long div magic">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
</tbody>
</table>
The column header is represented using the data-label attribute on each corresponding table cell. In the CSS, it's called with content: attr(data-label). I'm applying this style to some pretty large tables and I don't want to have to write the data-label for every single cell in the HTML. Is there a way to pull the th into the data-label attribute using Javascript?

Do you want the table to go from this:
| Account | Estimated arrival date | Amount | Period |
| ------- | ---------------------- | ------ | ------ |
| 1234 | 03/15/2001 | $1.00 | 3rd |
| 1235 | 04/21/2002 | $12.00 | 4th |
| 4594 | 11/11/2011 | $45.00 | 2nd |
To this?:
-----------
Account: 1234
Estimated Arrival Date: 03/15/2001
Amount: $1.00
Period: 3rd
-----------
Account: 1235
Estimated Arrival Date: 04/21/2002
Amount: $12.00
Period: 4th
-----------
Account: 4594
Estimated Arrival Date: 11/11/2011
Amount: $45.00
Period: 2nd
-----------
UPDATE
Try this code:
function toggle() {
var table = document.querySelector('.my-table');
table.classList.toggle('show-thin');
}
.table {
border-collapse: collapse;
display: inline-table;
}
.tr {
display: table-row;
}
.th, .td {
display: table-cell;
border: 1px solid #555;
padding: 3px 6px;
}
.th {
background-color: #ddd;
font-weight: bold;
text-align: center;
}
.td {
text-align: right;
}
.my-table.show-thin {
display: block;
}
.show-thin .tr {
border-bottom: 1px solid black;
display: block;
margin-bottom: 2px;
padding-bottom: 2px;
}
.show-thin .td {
border: none;
display: block;
padding: 0;
text-align: left;
}
.show-thin .td:before {
content: attr(title) ':';
display: inline-block;
font-weight: bold;
padding-right: 5px;
}
.show-thin .thin-hide {
display: none;
}
<button onclick="toggle()">Toggle</button>
<hr/>
<div class="my-table">
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
<div class="tr">
<span class="td" title="Account">1234</span>
<span class="td" title="Estimated Arrival Date">03/15/2001</span>
<span class="td" title="Amount">$1.00</span>
<span class="td" title="Period">3rd</span>
</div>
<div class="tr">
<span class="td" title="Account">1235</span>
<span class="td" title="Estimated Arrival Date">04/21/2002</span>
<span class="td" title="Amount">$12.00</span>
<span class="td" title="Period">4th</span>
</div>
<div class="tr">
<span class="td" title="Account">4594</span>
<span class="td" title="Estimated Arrival Date">11/11/2011</span>
<span class="td" title="Amount">$45.50</span>
<span class="td" title="Period">2nd</span>
</div>
</div>
My example used a class to change the values from a tabular format to a lined format. But it can be done using a media query as well. This was just easier to demo.
The trick is in placing the title attribute on every cell. Then using CSS to show the title when in thin mode.
This shows what the table looks like in wide mode
And this shows what it is like in thin mode
When you look at the two images you will see that the standard table format uses the term "Estimated arrival date" with on the first work capitalized. The thin version uses "Estimated Arrival Date" with all words capitalized. This is to show that the values come from different places.
In the wide mode the header comes from here:
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
And in thin mode it comes from the title attribute.
This does not work if you try to use <table>, <tr>, <th> and <td> tags.

This small code jQuery copy attr "data-label" TH to TD
$('table th').each(function(i,elem) {
var num = i + 1;
$('table td:nth-child(' + num + ')').attr('data-label', $(elem).text());
});

My solution with jQuery, seems to work (optional: I skip over any table cells with colspans):
$('.myDiv table').each(function (index, value) {
var headerCount = $(this).find('thead th').length;
for (i = 0; i <= headerCount; i++) {
var headerLabel = $(this).find('thead th:nth-child(' + i + ')').text();
$(this).find('tr td:not([colspan]):nth-child(' + i + ')').replaceWith(
function () {
return $('<td data-label="' + headerLabel + '">').append($(this).contents());
}
);
}
});