Input in table is causing the table width to change - javascript

So here I have a table in which I am able to add, delete and edit new data for the respective columns.
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
Currently, the table is set as table-responsive which means the width is adjusted to the length of column. Before adding a new set, I have the table like so:
Before Adding New Set
After pressing the button to add a new set, the style change to this:
After Adding New Set
As you can see, the table width is stretched even though I have set it to be table-responsive. Below is my Script.
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
My question is how can I make it so that the width stays the same without it changing when trying to add or edit the existing data?
Working Snippet Here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 580px;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 500px;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: ;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th{
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td{
color: white;
text-align: center;
vertical-align: middle;
}
.head{
background-color:#4D4F5C;
border-bottom: 3px solid white;
}
#body{
background-color:#4D4F5C;
}
#add_button{
}
h4{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>


You can make the cells as position: relative and then the inputs withing it as position: absolute and their width can then be adjusted accordingly.
I've made the width of inputs to be width of cell (excluding the paddings).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 580px;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 500px;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: ;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th{
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td{
color: white;
text-align: center;
vertical-align: middle;
}
.head{
background-color:#4D4F5C;
border-bottom: 3px solid white;
}
#body{
background-color:#4D4F5C;
}
#add_button{
}
h4{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>

Related

How to populate modals individually from input in every row?

Adding new info input changes the previous modal contents.
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
var fname = $('#fname').val();
lname = $('#lname').val();
var info = $('.info').val();
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>" + fname + "</td><td>" + lname + "</td><td><div><button id='showInfo' class='showInfo' type='button'>&plus;</button></div></td></tr>";
dataTable.row.add(tr);
dataTable.draw();
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text(info);
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
});
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
Result Size: 753 x 671
color: #000;
text-decoration: none;
cursor: pointer;
}
<head>
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">
</body>
https://jsfiddle.net/averola/b4p0zu6q/3/

The issue is because you add a new event to every pre-existing .showInfo element when a new one is added to the DOM. This overwrites the info value with the latest one for each instace.
To fix this you could add the info value as a data attribute on each new button you append, and this can then be read back out of the DOM in a single delegated event handler which applies to all buttons. Try this:
$(document).ready(function() {
$('#mainTable').DataTable({});
var dataTable = $("#mainTable").dataTable().api();
$("#add").click(function() {
let fname = $('#fname').val();
let lname = $('#lname').val();
let info = $('.info').val();
let $tr = $(`<tr><td>${fname}</td><td>${lname}</td><td><div><button class="showInfo" type="button" data-info="${info}">&plus;</button></div></td></tr>`);
dataTable.row.add($tr);
dataTable.draw();
});
$(document).on("click", '.showInfo', function() {
$('.modalinfo').text($(this).data('info'));
$(".modal").css("display", "block");
});
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<link rel="stylesheet" type="text/css" href="{% static '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' %}">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div id="inputlines">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" onfocus="this.value=''" id="fname"></td>
<td>Last Name:</td>
<td><input type="text" onfocus="this.value=''" id="lname"></td>
<td>Info:</td>
<td><input type="text" onfocus="this.value=''" id="info" class="info"></td>
<td><input type="button" id="add" value="Add"></td>
</tr>
</table>
</div>
<table id="mainTable">
<thead id="myTableData">
<tr>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th> </th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modalinfo"></p>
</div>
</div>
<input type="button" id="showInfo" class='showInfo' style="display:none;">

Hide and show html table columns

can anyone help to solve this html/javaScript issue; iam tying to implement a solution to hide/show columns in my html table that has a header with multi-rows, when i start hiding the columns from the right it works fine, but when i start from the left, i can see the issue; some cells get hidden even if not needed to be, this is my code thatnks:
$(function() {
// on init
$('.hide-column').eq(0).trigger( "click" );
// on click
$('.hide-column').click(HideColumns)
function HideColumns() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
var colIndex = 0;
var colSpan = 0;
$cell.parent().children().each(function(index) {
if ($(this).is($cell)) {
colSpan = parseInt($cell.attr("colspan") || 1);
return false;
} else {
colIndex += parseInt($(this).attr("colspan") || 1);
};
});
// find and hide col index
for (var i = colIndex; i < (colIndex + colSpan); i++) {
$table.find("tbody tr, thead :nth-child(4)")
.children(":nth-child(" + (i + 1) + ")")
.addClass('hide-col');
};
//always show first header
$table.find("thead :nth-child(1)").children().removeClass('hide-col');
//hide clicked cell
$cell.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body, html {
height: 100%;
overflow: hidden;
}
#right {
height: 100%;
}
table, th, td {
border: 1px solid black; // changing-colors
// word-wrap: break-word;
}
tr:first-child {
font-weight: normal;
}
tr:nth-child(even) {background: #eef} // changing-colors
tr:nth-child(odd) {background: #fee} // changing-colors
* {
box-sizing: border-box;
}
#myTable {
border-collapse: separate;
border: 1px solid #ddd; // changing-colors
width: 100%;
margin-top: 18px;
// Remove the // in front of the below two lines, to get fixed-width
// table-layout: fixed;
// word-wrap: break-word;
font-size: 10.5px;
font-family: arial;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd; // changing-colors
}
#myTable tr:first-child:hover, #myTable tr:hover {
#background-color: Greylight; // changing-colors
}
#myTable tr:first-child {
background-color: #FFFFFF; // changing-colors
font-weight: bold;
}
.table-fixed {
width: 100%;
}
/*This will work on every browser*/
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #ddd;
color: black;
}
thead tr:nth-child(1) th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(2) th {
position: sticky;
position: -webkit-sticky;
top: 30px;
z-index: 999;
background-color: teal;
color: black;
}
thead tr:nth-child(3) th {
position: sticky;
position: -webkit-sticky;
top: 66px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(4) th {
position: sticky;
position: -webkit-sticky;
top: 110px;
z-index: 999;
background-color: white;
color: black;
}
.tscroll {
width: 100%;
height: 80%;
overflow-x: scroll;
overflow-y: scroll;
margin-bottom: 10px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #FFFFFF;
font-weight: bold;
}
.tscroll td, .tscroll th {
//border-bottom: dashed #888 1px;
}
th.yellow {
background: #DAA520;
color: white;
}
th.bluesky {
background: #B0E0E6;
color: black;
}
th.skyblue {
background: #87CEEB;
color: black;
}
th.blue {
background: #4682B4;
color: black;
}
th.NO {
background: white;
color: black;
}
th.green {
background: #40A497;
color: black;
}
th.pink {
background: #FFC0CB;
color: black;
}
th.darkcyan {
background: #008B8B;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
bottom:0;
width:100%;
overflow: hidden;
}
li {
// float: left;
// border-right:1px solid #bbb;
}
li:last-child {
// border-right: none;
}
li a {
// display: BLOCK;
// color: black;
// text-align: center;
// padding: 12px ;
// text-decoration: none;
// font-size: 12px;
// line-height:0.8;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.tscroll th:first-child {
overflow-x: auto;
position: sticky;
left: 0;
//parent opacity: 100%;
z-index: 1000;
}
.red {color:red}
.orange {color:orange}
.green {color:green}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>QoR_results_summary</title>
<style type="text/css">
</style>
</head>
<body>
<br>
<br>
<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
</br>
</br>
</br>
</br>
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th colspan="44">IMP</th>
</tr>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="darkcyan" colspan="43">SYN</th>
</tr>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA </th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>RUNTIME</th>
</tr>
<tr>
<th class="NO">B</th>
<th>DA</th>
<th>D</th>
<th>F</th>
<th>E</th>
<th>WA</th>
<th>UNC</th>
<th>TAL</th>
<th>BF</th>
<th>IV</th>
<th>SE</th>
<th> AEA</th>
<th> AEA</th>
<th> AA</th>
<th> S</th>
<th> NP</th>
<th> TNS</th>
<th> W</th>
<th> EP</th>
<th> S</th>
<th> WS</th>
<th> NEP</th>
<th> TNS</th>
<th> W</th>
<th> NP</th>
<th> TN</th>
<th>OTHERS</th>
<th>OTHERS </th>
<th>OTHERS </th>
<th>WS</th>
<th>NV</th>
<th>TS</th>
<th>%GT</th>
<th>%OVF</th>
<th>CU</th>
<th>%SD</th>
<th> PWR</th>
<th> PER</th>
<th> PER</th>
<th> POER</th>
<th>TRS</th>
<th>CP</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>TIME</th>
</tr>
</thead>
<tr>
<td>SRL</td>
<td>Nov/9/2020</td>
<td>----</td>
<td>NULL</td>
<td><p datasdc-color="0">0</p></td>
<td><p sdcwarn-color="1619">1619</p></td>
<td><p datasdc-color="0">0</p></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td>2873882</td>
<td>8900320</td>
<td><p dataswns-color="-1.26">-1.26</p></td>
<td><p datafenep-color="277">277</p></td>
<td>-22.62</td>
<td><p dataswns-color="-0.46">-0.46</p></td>
<td><p datafenep-color="42">42</p></td>
<td>-5.77</td>
<td><p dataswns-color="-0.09">-0.09</p></td>
<td><p datafenep-color="56">56</p></td>
<td>-0.30</td>
<td><p dataswns-color="0.00">0.00</p></td>
<td><p datafenep-color="0">0</p></td>
<td>0.00</td>
<td><p dataswns-color="-3.24">-3.24</p></td>
<td><p datafenep-color="41">41</p></td>
<td>-35.94</td>
<td><p datahwns-color="-11.57">-11.57</p></td>
<td><p datafenep-color="2426">2426</p></td>
<td>-1341.85</td>
<td>91.17%</td>
<td>">Map</td>
<td>0.16/Map</td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td><p datap-color="98.59">98.59</p></td>
<td><p datadrv-color="877">877</p></td>
<td>34</td>
<td><p dataulvt-color="0.19">0.19</p></td>
<td>3.52</td>
<td>96.29</td>
<td>12h:04m:03s</td>
</tr>
<tfoot class="footer-restore-columns">
<tr>
<th colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>

It looks like a CSS problem. If you change .hide-col to use display: none; it works fine. Unfortunately, hiding table cells using other methods causes them to misalign with other rows. It may still be possible to achieve the animation with jQuery, by setting display: none after the animation is over.
In this example, the code has also been adjusted slightly to update the colspan of very wide columns (using class bigcolspan): https://jsfiddle.net/apecgwh9/1/
$(function() {
// on init
$('.hide-column').eq(0).trigger( "click" );
// on click
$('.hide-column').click(HideColumns);
$('.bigcolspan').each(function(index) {
$(this).data('colspan', $(this).attr('colspan'));
});
function HideColumns() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
var colIndex = 0;
var colSpan = 0;
$cell.parent().children().each(function(index) {
if ($(this).is($cell)) {
colSpan = parseInt($cell.attr("colspan") || 1);
return false;
} else {
colIndex += parseInt($(this).attr("colspan") || 1);
};
});
// find and hide col index
for (var i = colIndex; i < (colIndex + colSpan); i++) {
$table.find("tbody tr, thead :nth-child(4)")
.children(":nth-child(" + (i + 1) + ")")
.addClass('hide-col');
};
//adjust colspan of top rows
$('.bigcolspan').each(function(index) {
$(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan);
});
//always show first header
$table.find("thead :nth-child(1)").children().removeClass('hide-col');
//hide clicked cell
$cell.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
$('.bigcolspan').each(function(index) {
$(this).attr('colspan', $(this).data('colspan'));
});
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body, html {
height: 100%;
overflow: hidden;
}
#right {
height: 100%;
}
table, th, td {
border: 1px solid black; // changing-colors
// word-wrap: break-word;
}
tr:first-child {
font-weight: normal;
}
tr:nth-child(even) {background: #eef} // changing-colors
tr:nth-child(odd) {background: #fee} // changing-colors
* {
box-sizing: border-box;
}
#myTable {
border-collapse: separate;
border: 1px solid #ddd; // changing-colors
width: 100%;
margin-top: 18px;
// Remove the // in front of the below two lines, to get fixed-width
// table-layout: fixed;
// word-wrap: break-word;
font-size: 10.5px;
font-family: arial;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd; // changing-colors
}
#myTable tr:first-child:hover, #myTable tr:hover {
#background-color: Greylight; // changing-colors
}
#myTable tr:first-child {
background-color: #FFFFFF; // changing-colors
font-weight: bold;
}
.table-fixed {
width: 100%;
}
/*This will work on every browser*/
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #ddd;
color: black;
}
thead tr:nth-child(1) th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(2) th {
position: sticky;
position: -webkit-sticky;
top: 30px;
z-index: 999;
background-color: teal;
color: black;
}
thead tr:nth-child(3) th {
position: sticky;
position: -webkit-sticky;
top: 66px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(4) th {
position: sticky;
position: -webkit-sticky;
top: 110px;
z-index: 999;
background-color: white;
color: black;
}
.tscroll {
width: 100%;
height: 80%;
overflow-x: scroll;
overflow-y: scroll;
margin-bottom: 10px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #FFFFFF;
font-weight: bold;
}
.tscroll td, .tscroll th {
//border-bottom: dashed #888 1px;
}
th.yellow {
background: #DAA520;
color: white;
}
th.bluesky {
background: #B0E0E6;
color: black;
}
th.skyblue {
background: #87CEEB;
color: black;
}
th.blue {
background: #4682B4;
color: black;
}
th.NO {
background: white;
color: black;
}
th.green {
background: #40A497;
color: black;
}
th.pink {
background: #FFC0CB;
color: black;
}
th.darkcyan {
background: #008B8B;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
bottom:0;
width:100%;
overflow: hidden;
}
li {
// float: left;
// border-right:1px solid #bbb;
}
li:last-child {
// border-right: none;
}
li a {
// display: BLOCK;
// color: black;
// text-align: center;
// padding: 12px ;
// text-decoration: none;
// font-size: 12px;
// line-height:0.8;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.tscroll th:first-child {
overflow-x: auto;
position: sticky;
left: 0;
//parent opacity: 100%;
z-index: 1000;
}
.red {color:red}
.orange {color:orange}
.green {color:green}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: none !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>QoR_results_summary</title>
<style type="text/css">
</style>
</head>
<body>
<br>
<br>
<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
</br>
</br>
</br>
</br>
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="bigcolspan" colspan="43">IMP</th>
</tr>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="bigcolspan darkcyan" colspan="43">SYN</th>
</tr>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA</th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>RUNTIME</th>
</tr>
<tr>
<th class="NO">BLOCK</th>
<th>DATE</th>
<th>DIR</th>
<th>FLV</th>
<th>ERR</th>
<th>WARN</th>
<th>UNCLK</th>
<th>TOTAL</th>
<th>BUF</th>
<th>INV</th>
<th>SEQ</th>
<th> AREA</th>
<th> AREA</th>
<th> AREA</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th>OTHERS WNS</th>
<th>OTHERS NVEP</th>
<th>OTHERS TNS</th>
<th>WHS</th>
<th>NVEP</th>
<th>THS</th>
<th>%GTR</th>
<th>%OVRF</th>
<th>CRU</th>
<th>%SCND</th>
<th> POWER</th>
<th> POWER</th>
<th> POWER</th>
<th> POWER</th>
<th>TRNS</th>
<th>CAP</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>TIME</th>
</tr>
</thead>
<tr>
<td>SRL</td>
<td>Nov/9/2020</td>
<td>----</td>
<td>NULL</td>
<td><a href="">
<p datasdc-color="0">0</p>
</a></td>
<td><a href="">
<p sdcwarn-color="1619">1619</p>
</a></td>
<td><a href="">
<p datasdc-color="0">0</p>
</a></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td>2873882</td>
<td>8900320</td>
<td><a href="">
<p dataswns-color="-1.26">-1.26</p>
</a></td>
<td><a href="">
<p datafenep-color="277">277</p>
</a></td>
<td>-22.62</td>
<td><a href="">
<p dataswns-color="-0.46">-0.46</p>
</a></td>
<td><a href="">
<p datafenep-color="42">42</p>
</a></td>
<td>-5.77</td>
<td><a href="">
<p dataswns-color="-0.09">-0.09</p>
</a></td>
<td><a href="">
<p datafenep-color="56">56</p>
</a></td>
<td>-0.30</td>
<td><a href="">
<p dataswns-color="0.00">0.00</p>
</a></td>
<td><a href="">
<p datafenep-color="0">0</p>
</a></td>
<td>0.00</td>
<td><a href="">
<p dataswns-color="-3.24">-3.24</p>
</a></td>
<td><a href="">
<p datafenep-color="41">41</p>
</a></td>
<td>-35.94</td>
<td><a href="">
<p datahwns-color="-11.57">-11.57</p>
</a></td>
<td><a href="">
<p datafenep-color="2426">2426</p>
</a></td>
<td>-1341.85</td>
<td>91.17%</td>
<td>">Map</td>
<td>0.16/Map</td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td>
<p datap-color="98.59">98.59</p>
</td>
<td><a href="">
<p datadrv-color="877">877</p>
</a></td>
<td>34</td>
<td><a href="">
<p dataulvt-color="0.19">0.19</p>
</a></td>
<td>3.52</td>
<td>96.29</td>
<td>12h:04m:03s</td>
</tr>
<tfoot class="footer-restore-columns">
<tr>
<th class="bigcolspan" colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>

Adding table row for only specific table

I have a table of two for different exercise and my goal is to be able to add new row for each exercise. Below I have a working snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function() {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function() {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function() {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function() {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function() {
$(this).parents("tr").find("td:not(:last-child)").each(function() {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
As you can see, if you try to add a new set to one exercise, it will also add a new line for the other exercise, which is not what I wanted. What I want is to be able to add a new set for specific exercise, without a new row being automatically added to another exercise.
How can I achieve this?

You have to uniquely identify each table and button in order to accomplish this. The easiest way is to add an unique id attribute to each table, then add that same value to a name attribute on the respective button.
Meaning, if we call the first table "table1" it needs an id attribute that equals "table1".. then the 'Add Set' button for that table needs to have a name attribute that is also "table1"..(keep in mind I am just using the value "table1" as an example - "table1" could be any value you want, just as long as they match... they have to match due to how I coded the function) For example:
<table id="table1"> ...
<button name="table1">...
This is just one way to do it.. You can do it differently.. the trick is just making sure you can uniquely identify each table and the button on that table..
I have made comments in the code below to make things more legible/understandable..
Demo:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function () {
$(this).attr("disabled", "disabled");
//
// ** Get the unique value we are using from the button **
//
let tableName = $(this).attr('name');
//
// ** Use the unique value on that button, to find the table **
//
var index = $(`#${tableName} tbody tr:last-child`).index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
//
// ** Use the unique value to append row to correct table **
//
$(`#${tableName}`).append(row);
$(`#${tableName} tbody tr`).eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function () {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function () {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function () {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("td:not(:last-child)").each(function () {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function () {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button
==========================================================================
-->
<table id="table1" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table1" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button **
==========================================================================
-->
<table id="table2" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table2" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>

I need to fill automatically the node value of a cell in my last input text “TextGesamt” after the input text keyup event “Schriftlich”

fotoI need to insert the node value automatically in the last input text "Gesamt" after entering any value from the first vertical column, inside the input text "Mundlich" and the first horizontal line, into the input text "Schriftlich". Ie .. I need to get the value of the node that crosses a value between the first row and the first column inserted into the input text "Mundlich and Schriftlich after event keyup after both textbox is filled.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/jquery.bdt.css" type="text/css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<style>
body{
background-image: url("/img/bg.png");
width: auto;
height:auto;
}
table.searchtbl td, table.pricing th {
text-align: center;
padding: 0px 2px 0px 2px;
border: 1px;
}
table.searchtbl th {
background-color: rgb(230, 61, 61);
border: 1px solid rgb(114, 224, 114);
color: white;
font-family: 'Times New Roman', Times, serif
}
table.searchtbl td {
border: 1px solid silver;
font-size: 14px;
font-family: Arial;
}
.highlighted {
color: white;
}
table.searchtbl {
border: 0px;
border-spacing: 0px;
}
.cur_col {
background-color: rgb(209, 164, 68) !important;
border: 1px solid rgb(14, 11, 5) !important;
border-left: 0px solid #CFE3F9 !important;
border-right: 0px solid #CFE3F9 !important;
}
.cur_cell {
background-color: #0a0ae9 !important;
border: 0px solid #706d5e !important;
border: 0px solid rgb(11, 78, 150) !important;
}
.cur_row {
background-color: rgb(209, 164, 68) !important;
border: 1px solid rgb(10, 8, 2) !important;
border-top: 0px solid rgb(209, 164, 68) !important;
border-bottom: 0px solid rgb(209, 164, 68) !important;
}
.frm {
float: right;
padding: 10% 20% 0px 0px;
margin-top: 30px;
}
* {
box-sizing: border-box;
}
.box1 {
float: left;
width: 50%;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
height: auto;
}
.box2 {
float: right;
width:50%;
padding-right: 0px;
padding-top: 0px;
padding-left: 0px;
height: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.bdt > thead > tr > th, .bdt > tbody > tr > td {
font-size: 13px;
}
.bdt tr:last-child td, .bdt tr:last-child th {
border-bottom: 2px solid #1b1916;
}
.bdt > tbody > tr > td, .bdt > tbody > tr > th, .bdt > tfoot > tr > td, .bdt > tfoot > tr > th, .bdt > thead > tr > td, .bdt > thead > tr > th {
border-color: #e6e7ed;
padding: 1px 0px 18px 53px;
}
.nota {
color: #fa0909
}
fieldset {
position: inherit;
border: none;
padding: 0;
}
legend {
float: left;
padding: 0;
margin-right: 5px;
width: 50px;
text-align: right;
}
label {
position: absolute;
left: -9999px;
}
#id{
width: 80px;
background-color: bisque;
}
#company{
width: auto;
}
#name{
width: auto;
text-transform: capitalize;
}
#m{
width: 100px;
}
#s{
width: 100px;
}
#g{
width: 90px;
background-color: ghostwhite;
}
td {
cursor: pointer;
}
.jumbotron{
height: 120px;
padding-bottom: 50px;
padding-top: 5px
}
.dateTime{
float: right;
padding: 20px 50px 0px 0px;
background-color: #fa0909;
height: auto;
width: auto;
}
.date{
font-size: 30px;
float: right;
padding-right: 50px;
color: rgb(62, 71, 62);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.time{
font-size: 20px;
float: right;
padding-bottom: 0px;
padding-right: 40px;
color: rgb(97, 100, 77);
font-family: 'Times New Roman', Times, serif;
}
.btnShow{
height: 14px;
width: 20px;
padding-top: 0px;
}
</style>
<body>
<div class="jumbotron">
<div class="date">
<span id="dataAtual"></span><br>
<div class="time">
<span id="horaAtual"></span>
</div>
</div>
<form class="form-inline">
<div class="container">
<input type="button" class="btn btn-danger mb-2 btn-sm"
onclick="exportTableToExcel('table', 'Teilnehmer')" value="Export">
<br><br>
<input type="text" class="form-control mb-2 mr-sm-2" name="name" id="name" placeholder="Name">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="m" id="m"
placeholder="Mundlich">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="s" id="s"
placeholder="Schriftlich">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="g" id="g" placeholder="Gesamt">
<input type="button" class="btn btn-primary mb-2 btn-sm" value="Add" onclick="addHTMLTableRow();">
<input type="button" class="btn btn-danger mb-2 btn-sm" value="Edit"
onclick="editHtmlTableSelectedRow()">
<input type="button" class="btn btn-warning mb-2 btn-sm" value="Delete" onclick="deleta()">
</div>
</form>
</div>
<div class="clearfix">
<div class="box2">
<table class='searchtbl' style="background-color: black">
<tr>
<th style="width:5px;height:5px"></th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
</tr>
<tr id="firstRow">
<th style="height:10">M</th>
<td></td>
<td class="row-s">A1<span>a</span></td>
<td class="row-s">A1<span>b</span></td>
<td class="row-s">A1<span>c</span></td>
<td class="row-s">A2<span>a</span></td>
<td class="row-s">A2<span>b</span></td>
<td class="row-s">A2<span>c</span></td>
<td class="row-s">B1<span>a</span></td>
<td class="row-s">B1<span>b</span></td>
<td class="row-s">B1<span>c</span></td>
<td class="row-s">B2<span>a</span></td>
<td class="row-s">B2<span>b</span></td>
<td class="row-s">B2<span>c</span></td>
<td class="row-s">C1<span>a</span></td>
<td class="row-s">C1<span>b</span></td>
<td class="row-s">C1<span>c</span></td>
<td class="row-s">C2<span>a</span></td>
<td class="row-s">C2<span>b</span></td>
<td class="row-s">C2<span>c</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>a</span></td>
<td>A1<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>a</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>b</span></td>
<td>A1<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>c</span></td>
<td>A1<span>b</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A2<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A2<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
</table>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.sortelements.js" type="text/javascript"></script>
<script src="js/jquery.bdt.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bdt.min.js" type="text/javascript"></script>
</body>
<script>
////INSERIR OS DADOS NO INPUT "Mundlich" (LINHA HORIZONTAL)
$(document).ready(function (e) {
$("#m").keyup(function () {
if ($(this).val() == "") {
$(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
return false;
}
var data = this.value.toUpperCase().split(" ");
$(".searchtbl").find("tr").not("tr:first").find(".row-m").each(function (index, elem) {
var $elem = $(elem);
for (var d = 0; d < data.length; ++d) {
// Highlight
if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
} else {
$elem.removeClass('highlighted');
}
//console.log();
if ($elem.find(".inputType").length == 1) {
if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
$elem.find(".inputType").addClass('highlighted');
} else {
$elem.removeClass('highlighted');
$elem.find(".inputType").removeClass('highlighted');
}
}
}
})
})
});
//INSERIR OS DADOS NO INPUT "Mundlich" (COLUNA VERTICAL)
$(document).ready(function (e) {
$("#s").keyup(function () {
if ($(this).val() == "") {
$(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
return false;
}
var data = this.value.toUpperCase().split(" ");
$(".searchtbl").find("tr").not("tr:first").find(".row-s").each(function (index, elem) {
var $elem = $(elem);
for (var d = 0; d < data.length; ++d) {
// Highlight
if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
} else {
$elem.removeClass('highlighted');
}
//console.log();
if ($elem.find(".inputType").length == 1) {
if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
$elem.find(".inputType").addClass('highlighted');
} else {
$elem.removeClass('highlighted');
$elem.find(".inputType").removeClass('highlighted');
}
}
}
})
})
});
</script>
</html>

function autosum(){
var oschrift=document.getElementById('s');
var omund=document.getElementById('m');
var schrift=parseFloat(oschrift.value);
var mund=parseFloat(omund.value);
if (oschrift.value!=schrift) schrift=0; //some safety
if (omund.value!=mund) mund=0;
document.getElementById('g').value=shrift+mund;
}

Cant save content editable to localstorage?

I want to save the content editable data to local storage.
Right now if you try to edit the stock table it changes, then when you refresh the page, it goes back to initial value.
Is there a way to do this automatically, without requiring a button to save it? Just by exiting the text box, it should save automatically.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inventory</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#hewrap{
text-align: center;
}
#he {
font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}
.fi {
border-radius:5px;
height: 30px;
}
#btn {
border-radius: 5px;
height: 30px;
background-color: blue;
color:white;
}
#ftr {
background-color: black;
}
</style>
</head>
<body>
<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>
<div id="hewrap">
<h1 id="he">Inventory</h1>
</div>
<table id="inventory">
<thead>
<tr>
<th>Description</th>
<th>Part-#</th>
<th>Required</th>
<th>Stock</th>
<th>Price</th>
<th>N/A</th>
</tr>
<tr id="ftr">
<td><input class="fi" type="text" id="one" placeholder="Description"></td>
<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
<td><input class="fi" type="text" id="three" placeholder="Required"></td>
<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
<td><input class="fi" type="text" id="five" placeholder="Price"></td>
<td><button id="btn" onclick="addRow()">ADD</button></td>
</tr>
</thead>
<tbody id="screen">
</tbody>
</table>
</body>
<script>
//scribble data
//save
$( document ).ready(function(){
$('#screen').html(localStorage.getItem("data"));
});
function addRow(){
var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
<td>'+$('#two').val()+'</td>\
<td>'+$('#three').val()+'</td>\
<td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
<td>'+$('#five').val()+'</td>\
</tr>'
$('#screen').append(str);
localStorage.setItem("data", $('#screen').html());
}
</script>
<script type="text/javascript">
getUserScribble();
</script>
</html>

Categories

Resources