If you add a book you see the item added to the table with an awesome font fa-remove X. On hover I increase the size of icon but it slightly moves the text in the other td's. Is there a way to prevent this?
I found that if we wrap the link in a p tag and apply width:0 and margin-bottom:0 it will work but this seems like a hack. Is there a better way?
function Book(title,author,isbn){
this.title = title
this.author = author
this.isbn = isbn
}
function UI(){}
UI.addTr = function (book){
const table = document.getElementById("tbody");
const row = table.insertRow(-1);
const td0 = row.insertCell(0);
const td1 = row.insertCell(1);
const td2 = row.insertCell(2);
const td3 = row.insertCell(3);
td0.innerHTML = book.title;
td1.innerHTML = book.author;
td2.innerHTML = book.isbn;
td3.innerHTML = '<a href="#" class="fa fa-remove text-align-center"></a>';
const x = document.querySelectorAll('a')
//console.log(x,x[x.length - 1])
x[x.length - 1].addEventListener('click',myDelete)
}
UI.deleteTr = function(tr){
}
function myDelete(e){
//console.log(e.target)
}
const submit=document.getElementById('submit').addEventListener('click',mySubmit)
//console.log(document.getElementById('submit'))
function mySubmit(e){
e.preventDefault();
const inputs = Array.from(document.getElementsByClassName('inputs'))
let title, author, isbn
inputs.forEach((input,i) => {
switch(i){
case 0:
title = input.value
break
case 1:
author = input.value
break
case 2:
isbn = input.value
break
}
});
if(title == '' || author == '' || isbn == ''){
console.log('check inputs')
}else{
inputs.forEach((input) => {
input.value=''
})
const book = new Book(title,author,isbn)
UI.addTr(book)
}
}#submit{
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
h1{
font-size:3rem!important;
}
#submit{
font-size:12px;
}
body{
letter-spacing:.1rem;
}
a, a:hover{
text-decoration:none!important;
color:red!important;
text-align:left;
}
a:hover{
font-size:larger;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container w-75">
<h1 class="display-4 mb-4">Add Book</h1>
<form id="bookInputs">
<div class="form-group">
<label class='font-weight-bold' for="title">Title</label>
<input type="text" class="form-control inputs" id="title">
</div>
<div class="form-group">
<label class='font-weight-bold' for="author">Author</label>
<input type="text" class="form-control inputs" id="author">
</div>
<div class="form-group">
<label class='font-weight-bold' for="isbn">ISBN#</label>
<input type="text" class="form-control inputs" id="isbn">
</div>
<input id='submit' type='submit' value='submit' class='font-weight-bold w-100 bg-white border border-grey rounded'>
</form>
<table id='myTable' class="table table-striped">
<thead>
<tr>
<th class='border-top-0'>Title</th>
<th class='border-top-0'>Author</th>
<th class='border-top-0'>ISBN</th>
<th class='border-top-0'></th>
</tr>
</thead>
<tbody id='tbody'>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>Setting width constraints solves it.
Simple case:
#myTable td { width: 25%}
function Book(title,author,isbn){
this.title = title
this.author = author
this.isbn = isbn
}
function UI(){}
UI.addTr = function (book){
const table = document.getElementById("tbody");
const row = table.insertRow(-1);
const td0 = row.insertCell(0);
const td1 = row.insertCell(1);
const td2 = row.insertCell(2);
const td3 = row.insertCell(3);
td0.innerHTML = book.title;
td1.innerHTML = book.author;
td2.innerHTML = book.isbn;
td3.innerHTML = '<a href="#" class="fa fa-remove text-align-center"></a>';
const x = document.querySelectorAll('a')
//console.log(x,x[x.length - 1])
x[x.length - 1].addEventListener('click',myDelete)
}
UI.deleteTr = function(tr){
}
function myDelete(e){
//console.log(e.target)
}
const submit=document.getElementById('submit').addEventListener('click',mySubmit)
//console.log(document.getElementById('submit'))
function mySubmit(e){
e.preventDefault();
const inputs = Array.from(document.getElementsByClassName('inputs'))
let title, author, isbn
inputs.forEach((input,i) => {
switch(i){
case 0:
title = input.value
break
case 1:
author = input.value
break
case 2:
isbn = input.value
break
}
});
if(title == '' || author == '' || isbn == ''){
console.log('check inputs')
}else{
inputs.forEach((input) => {
input.value=''
})
const book = new Book(title,author,isbn)
UI.addTr(book)
}
}/******/
#myTable td{width:25%}
/******/
#submit{
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
h1{
font-size:3rem!important;
}
#submit{
font-size:12px;
}
body{
letter-spacing:.1rem;
}
a, a:hover{
text-decoration:none!important;
color:red!important;
text-align:left;
}
a:hover{
font-size:larger;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container w-75">
<h1 class="display-4 mb-4">Add Book</h1>
<form id="bookInputs">
<div class="form-group">
<label class='font-weight-bold' for="title">Title</label>
<input type="text" class="form-control inputs" id="title">
</div>
<div class="form-group">
<label class='font-weight-bold' for="author">Author</label>
<input type="text" class="form-control inputs" id="author">
</div>
<div class="form-group">
<label class='font-weight-bold' for="isbn">ISBN#</label>
<input type="text" class="form-control inputs" id="isbn">
</div>
<input id='submit' type='submit' value='submit' class='font-weight-bold w-100 bg-white border border-grey rounded'>
</form>
<table id='myTable' class="table table-striped">
<thead>
<tr>
<th class='border-top-0'>Title</th>
<th class='border-top-0'>Author</th>
<th class='border-top-0'>ISBN</th>
<th class='border-top-0'></th>
</tr>
</thead>
<tbody id='tbody'>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>