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 = '';
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/bootstrap#4.6.0/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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/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 = '';
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/bootstrap#4.6.0/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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Related
On the product-info.html file, I want it to open the cart.html file on a different window and edit the values on the cart.html file about the name and price on the table that you get from the product-info.html file. However, I don't know how to edit a different file using another one's information. The JS file links both of them but I don't know what to do with that.
PRODUCT-INFO.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/ktane-utils.js"></script>
<link rel="stylesheet" href="style.css">
<script src="cartCode.js" async></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.2.0/css/fontawesome.min.css">
</head>
<body>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li>"Home"</li>
<li>"Store"</li>
<li>"Cart"</li>
<li>"Account"</li>
</ul>
</nav>
</div>
</div>
<div class="section">
<div class="page page-bg-01">
<div class="page-header">
</div>
<div class="page-content">
<h1><div class="item-title">IPHONE 14 PRO MAX</div></h1>
<img style='width: 50%' src="img/pictures/products/Iphone14/iphone14.png"><br>
<img style='width: 10%' src="img/pictures/products/Iphone14/iphone14front.png"><br>
<p><strong>Store/Iphones</strong></p>
<div class="item-price">Price: £899.99</div><br>
<p>Details: Get your gleaming photos taken with a 48MP main camera with an advanced quad-pixel sensor, plus better resolution
and an extra 256GB storage! The best phone creation in the world is at your hands. Buy only for £899.99!</p><br>
<button class="btn">Add To Cart</button><br>
<h3>OTHER PRODUCTS</h3>
<div class="advertise">
<a href="product details.html"><img style='width: 20%' src="img/pictures/products/Iphone14/iphone14.png">
<h4>Iphone 14 Pro Max</h4>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>£899.99</p></a>
</div>
</div>
<div class="footer">
<center><p>Email: <u>t.margub2112#gmail.com</u></p></center>
<center><p>Facebook: <u>Tawhidul Islam#tawhidulislam.islam.524</u></p></center>
<center><img style='width: 10%' src="img/pictures/Extra/icon.png" /></center>
<p style="text-align:left;">Copyright 2022 - Tawhid Productions</p>
</div>
</div>
</div>
</body>
</html>
CART.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/ktane-utils.js"></script>
<link rel="stylesheet" href="style.css">
<script src="cartCode.js" async></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.2.0/css/fontawesome.min.css">
</head>
<body>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li>"Home"</li>
<li>"Store"</li>
<li>"Cart"</li>
<li>"Account"</li>
</ul>
</nav>
</div>
</div>
<div class="section">
<div class="page page-bg-01">
<div class="page-header">
</div>
<div class="page-content">
<table style='width: 100%'>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tbody class="cart-items">
<tr class="cart-row">
<td><span class="cart-name">Iphone 14 Max Pro, £899.99 </span><button class="btn btn-danger" type="button">Remove</button></td>
<td><input class="cart-amt" type="number" value="1"></td>
<td><span class="cart-price">£899.99</span></td>
</tr>
</tbody>
</div>
</table><br>
<table style='width: 50%'>
<tbody class="cart-total-container-1">
<tr class="cart-total-container-2">
<td>Total</td>
<td class="cart-total">£899.99</td>
</tr>
</tbody>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="footer">
<center><p>Email: <u>t.margub2112#gmail.com</u></p></center>
<center><p>Facebook: <u>Tawhidul Islam#tawhidulislam.islam.524</u></p></center>
<center><img style='width: 10%' src="img/pictures/Extra/icon.png" /></center>
<p style="text-align:left;">Copyright 2022 - Tawhid Productions</p>
</div>
</div>
</div>
</div>
</body>
</html>
CARTCODE.JS
if(document.readyState = 'loading')
{
document.addEventListener('DOMContentLoaded', ready)
}
else
{
ready()
}
function ready()
{
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for(var i = 0; i < removeCartItemButtons.length; i++)
{
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-amt')
for(var i = 0; i < quantityInputs.length; i++)
{
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('btn')
for(var i = 0; i < addToCartButtons.length; i++)
{
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
}
function removeCartItem(event)
{
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged()
{
var input = event.target
if(isNaN(input.value) || input.value <= 0)
{
input.value = 1
}
if(((input.value * 10) % 10) != 0)
{
input.value = Math.floor(input.value)
}
parseInt(input.value)
updateCartTotal()
}
function addToCartClicked(event)
{
var button = event.target
var price = document.getElementsByClassName('item-price')[0].innerText
var title = document.getElementsByClassName('item-title')[0].innerText
addItemToCart(title, price)
}
function addItemToCart(title, price)
{
window.open('cart.html')
}
function updateCartTotal()
{
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for(var i = 0; i < cartRows.length; i++)
{
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-amt')[0]
var price = parseFloat(priceElement.innerText.replace('£',''))
var quantity = quantityElement.value
var finalPrice = Math.round(((quantity * price) + Number.EPSILON) * 100) / 100
total = total + finalPrice
}
var cartTotalContainer1 = document.getElementsByClassName('cart-total-container-1')[0]
var cartTotalContainer2 = cartTotalContainer1.getElementsByClassName('cart-total-container-2')[0]
cartTotalContainer2.getElementsByClassName('cart-total')[0].innerText = '£' + total
}
I have no idea what to do to change data from one file to another. Can anyone help? Also, I would like to only use JS and HTML.
when I click on the "Todo Ekleyin" button, I get a warning. However, I would like this alert to appear only once per press, not multiple times, and can be pressed again after the alert disappears. How can I achieve this and?
Thank you in advance for your answer, good work. (If there is a method other than the method you suggested, I would be glad if you can write its name.)
// Tüm Elementleri Seçme
const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const todoList = document.querySelector(".list-group");
const firstCardBody = document.querySelectorAll(".card-body")[0];
const secondCardBody = document.querySelectorAll(".card-body")[1];
const filter = document.querySelector("#filter");
const clearButton = document.querySelector("#clear-todos");
eventListeners();
function eventListeners() { // Tüm Event Listenerlar
form.addEventListener("submit", addTodo);
}
function addTodo(e) {
const newTodo = todoInput.value.trim();
if (newTodo === "") { // Alarm Verme
showAlert("danger","Lütfen Bir Todo Giriniz");
}
else {
addTodoToUI(newTodo);
}
addTodoToUI(newTodo);
e.preventDefault();
}
function showAlert(type,message){
const alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.textContent = message;
firstCardBody.appendChild(alert);
//setTimeout
setTimeout(function(){
alert.remove();
}, 1000);
}
function addTodoToUI(newTodo) { // String Değerini List Item olarak Ekleyecek.
// List Item Oluşturma.
const listItem = document.createElement("li");
// Link Oluşturma
const link = document.createElement("a");
link.href = "#";
link.className = "delete-item";
link.innerHTML = "<i class = 'fa fa-remove'></i>";
listItem.className = "list-group-item d-flex justify-content-between";
// Text Node
listItem.appendChild(document.createTextNode(newTodo));
listItem.appendChild(link);
// Todo List'e List Item'ı Ekleme
todoList.appendChild(listItem);
// Ekleme Sonrası Input'tan yazı Silme
todoInput.value = "";
}
// Todo Ekleme Bilgi Mesajı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Todo List</title>
</head>
<body>
<div class="container" style="margin-top: 20px">
<div class="card row">
<div class="card-header">Todo List</div>
<div class="card-body">
<form id="todo-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="todo" id="todo"
placeholder="Bir Todo Girin" />
</div>
</div>
<button type="submit" class="btn btn-danger">Todo Ekleyin</button>
</form>
<hr />
<!-- <div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div> -->
</div>
<div class="card-body">
<hr />
<h5 class="card-title" id="tasks-title">Todolar</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id="filter"
placeholder="Bir Todo Arayın" />
</div>
</div>
<hr />
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between">
Todo 1
<a href = "#" class ="delete-item">
<i class = "fa fa-remove"></i>
</a>
</li>-->
</ul>
<hr />
<a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="berkay.js"></script>
</body>
</html>
You can put an integer in your alert function and every using array increase a one more.
For example, if you want after 5 times don't show alert.
var a = 0;
var b = true;
if (newTodo === "" || b) { // Alarm Verme
showAlert("danger","Please Give me a Todo!");
a++;
if(a == 5 ){
b = false;
}
}
This question already has answers here:
What is DOM Event delegation?
(10 answers)
Closed 4 years ago.
I have a table in which an input control calls a java script event
oninput="this.value=this.value.replace(/[^0-9]/g,'');
By Clicking on Add Row new Row is being inserted but i want to call this event on new row as well . This event is to stop except positive whole numbers
using the following code.
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
Try the following syntax to add event handler to newly created element:
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
First let me start by saying I am very new to javascript. I am currently studying the subject as part of a course I am doing.
I have an assignment that requires me to put together image slices in a table built by javascript and place it in a on a HTML page.
I have had success with all of this except when i attempt to resize the table and div section with CSS the images separate leaving gaps in the image. Is there anyone out there who can see why i am getting this issue? Im pulling my hair out.
here is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/> <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg" alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
<div id="ImageContent"><script src="../../Script/ImageContent.js"> </script></div><!--this is the end of div id ImageContent-->
<div id="formContent">
<h1 class="prodhead">Order Item</h1>
<form action="#" name="orders">
<table id="formtab">
<tr>
<td width="20%"><label>Item Description:</label></td> <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
</tr>
<tr>
<td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
<tr>
<td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
</tr>
<tr>
<td><label>Total Price:</label></td><td><input type="text" name="total"></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
</table>
</form>
</div><!--this is the end of div id formContent-->
<div id="footer">
Home
Close
<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->
</body>
</html>
CSS Code
.myTable {
max-width:90%;
}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}
javascript
// constants
var colCount=5;
var rowCount=4;
// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");
// create the column array.
var collist = [col1,col2,col3,col4,col5];
// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0" align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {
document.write("<tr>");
for (colnum = 1; colnum <= colCount; colnum++) {
document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' + "</td>");
}
document.write("</tr>");
}
document.write('</table>')
Any help here would be great thanks.
I'm creating a data grip for a project and I need to use Bootstrap Datepicker to the Date field.
The problem is that in the table only the first row (that is previously created) has the datepicker working.
If I create a second row, the datepicker isn't working.
Could you please help me? I would like to have the datepicker working fine in every created row and only on the Date field.
Below is my code:
function getElementsByClassName(c,el){
if(typeof el=='string'){
el=document.getElementById(el);
}
if(!el){
el=document;
}
if(el.getElementsByClassName){
return el.getElementsByClassName(c);
}
var arr=[],
allEls=el.getElementsByTagName('*');
for(var i=0;i<allEls.length;i++){
if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
}
return arr;
}
function killMe(el){
return el.parentNode.removeChild(el);
}
function getParentByTagName(el,tag){
tag=tag.toLowerCase();
while(el.nodeName.toLowerCase()!=tag){
el=el.parentNode;
}
return el;
}
// Delete table row
function delRow(){
killMe(getParentByTagName(this,'tr'));
}
// Insert table row
function addRow() {
var table = getParentByTagName(this,'table')
var lastInputs=table.rows.length>2?
table.rows[table.rows.length-2].getElementsByTagName('input'):[];
for(var i=0;i<lastInputs.length-1;i++){
if(lastInputs[i].value==''){return false;}
}
// New table row vars
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.id = "expenseDate";
element1.type = "text";
element1.className="form-control datepicker";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.className="form-control";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.className="form-control";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.className="form-control";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "button";
element5.className="del btn btn-sm btn-danger";
element5.value='X';
element5.onclick=delRow;
cell5.appendChild(element5);
}
#ExpensesTable {
margin-top: 30px;
}
#ExpensesTable tr {
margin: 10px 0px 10px 0px;
}
#ExpensesTable td {
padding: 5px 5px 0px 5px;
}
#ExpensesTable th {
padding: 0px 5px 5px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table id="ExpensesTable">
<tr>
<th>Date:</th>
<th>From:</th>
<th>To:</th>
<th>Nr. Km:</th>
</tr>
<tr>
<td><input class="add btn btn-sm btn-success" type="button" value="Add expense" id="AddExpense"/></td>
</tr>
</table>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
(function(){
var els=getElementsByClassName("add","ExpensesTable");
for(var i=0;i<els.length;i++){
els[i].onclick=addRow;
}
els[0].onclick();
})();
</script>
<script>
$('#expenseDate').datepicker({
});
</script>
</body>
</html>
try to leverage jquery to speed coding up and then you end up with like,, 4-5 lines of code to do what you need :)
cheers,
$('.dateP').datetimepicker();
$('.dupli').on( 'click', function(e){
var dup = $('.cpy').first().clone();
$('.table').append( dup );
$('.dateP').datetimepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Event name</th>
<th>Date:</th>
<td><button type="submit" class="btn btn-default dupli">+</button></td>
</tr>
<tr class="cpy">
<td>
<input type="text" class="form-control" id="e1">
</td>
<td>
<div class='input-group dateP'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
</tr>
</table>