Adding table row for only specific table - javascript

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>

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>

Input in table is causing the table width to change

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>

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>

how to switch between two tables

I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r

You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>

Categories

Resources