I got an input and two icons (that work like buttons) and I want them to be side by side in a table.
Besides, when on click of the icons ("buttons"), I want it to get me the value of the input.
$(document).on("click", "#add", function() {
alert($("#add").closest());
});
.w3-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {
padding: 0 3px;
}
#quantidade i:hover {
background-color: #0F292F;
cursor: pointer;
}
#quantidade {
padding-left: 80px;
}
table {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="w3-table">
<thead>
<tr>
<th colspan="3">
<h2>Lista das Compras</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td id='quantidade' class='w3-right'>
<input type='text' class='w3-input w3-left' value='1'>
<div>
<i id='add' class='fa fa-angle-up'></i>
<i id='rem' class='fa fa-angle-down'></i>
</div>
</td>
</tr>
</tbody>
</table>
Demo
Try the following:
$(document).on("click", "#add", function(){
alert($("#add").closest('td').prev().find('input[type=text]').val());
});
.w3-table {
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {padding: 0 3px;}
#quantidade i:hover {
background-color: #0F292F;
cursor:pointer;
}
#quantidade {padding-left: 80px;}
table {width: 40%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>
<tr>
<td>Arroz</td>
<td id='quantidade'>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
$(document).on("click", "#add", function(){
alert($("#button1").val());
});
Change your jquery code
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').prev('input').val());
});
As you said you have changed your table structure like this
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>
So code for new structure table will be
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').parent().prev('td').find('#button1').val());
});
Hope this will help you.
It works with this:
$(document).on("click", "#add", function(){
alert($(this).closest("tr").find('input').val());
});
Related
I have an issue with my HTML, where when I go to add more than 3 new assets into my table, the buttons below (Add new asset, save and submit) are not being pushed down. Is this a flex issue and how would I go about solving this? I put all of my buttons into a div because I found this aligned my page better. But when I did not have my buttons in a div, it works. I am reframing my code to have more div's to keep everything contained.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<form>
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</form>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function(){
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header{
text-align: center;
margin-bottom: 50px;
}
h1, h2{
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input{
text-align: center;
}
input#date{
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
height: 100px;
/* border: 1px solid red; */
}
.flex-box {
width: 40px;
height: 1000px;
/* background: pink; */
}
.button{
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove{
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th> Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th> Description</th>
<th> Cost/ Est. Cost</th>
<th> Method of Disposal</th>
<th> RC to Credit</th>
<th> Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>
You had added heights for both .flex and .flex-box. This was forcing them to stay the size they were.
Also, you didn't need the form tags for each row.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function() {
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header {
text-align: center;
margin-bottom: 50px;
}
h1,
h2 {
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input {
text-align: center;
}
input#date {
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
}
.flex-box {
width: 40px;
/* background: pink; */
}
.button {
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove {
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th> Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th> Description</th>
<th> Cost/ Est. Cost</th>
<th> Method of Disposal</th>
<th> RC to Credit</th>
<th> Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;" />EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>
The way I've done this in the past is to iterate a row count for each <tr> tag as the table is created. This helps with sorting, and you can easily specify a sort order.
However, since your table is pre-existing, the only answer I can really see is to simply rebuild the entire table and flow it into the correct element (the table element, in your case). No row order required, just put the rows in, in the order you want them.
I hope that helps a little.
Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.
In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery
I leave the code so that you can see how I currently have it. Any ideas?
SCRIPT
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
CSS
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
HTML
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class= "text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < count($calls); ++$i) { ?>
<tr class="text-center">
<td id="id"><?= $calls[$i]['date'] ;?></td>
<td id="database"><?= $calls[$i]['calls'] ;?></td>
<td id="total"><?= $calls[$i]['sales'] ;?></td>
<td><div class="arrow"></div></td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>
As your dates are display in dd-mm-yyyy so easy way to get month is to use split method then once we get month we need to loop through trs to hide all month expect the first one and also add odd class to it.
Then, onclick of tr just get the month from td and then loop through trs with same month add up class to that td and show same tr.
Demo code:
//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
//get month
var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
//loop thorough tr to find same month tr
$("tbody > tr").not(this).each(function() {
var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
if (mnth == mnth_other) {
$(this).toggle();
$(this).find(".arrow").toggleClass("up");
}
});
});
var date_current;
//loop through tr
$("tbody > tr").each(function() {
//get month
var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
//check if not equal
if (date_current != dates) {
$(this).addClass("odd");
$(this).find(".arrow").addClass("down");
date_current = dates;
} else {
//hide other tr
$(this).hide()
}
})
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class="text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
21-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
12
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
20-12-2020
</td>
<td id="database">
222
</td>
<td id="total">
21
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>
My goal is to have my table interactive, and all code within one doc. I don't want to reference JavaScript or CSS outside of the main document, and this may be where my issue is coming from.
It seems like JavaScript isn't working when the buttons are clicked, and I'm not sure what's going on.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>
Needed to add a function to the tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>
I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:
Javascript
function onload(){
$("#addbutton").on("click",addRow);
$(".delete").onclick(function(){
$(this).closest('tr').remove();
});
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
There is no onclick method in jQuery, use click instead.
$(".delete").click(function() {
$(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Row 1</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="delete">Del</button></td>
</tr>
</table>
You should use event delegation for delete button. since you are adding button dynamically.
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>";
//Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
Another way you can delete row .... during adding new row give that row an id and call an onclick function during delete.
function deleterow(id){
$("#newrow-"+id+"").remove();
}
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
I want to give orange color to even rows through jQuery in table.
But that is not working for me.
Below is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the code in custom.css:
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
Below is the code in custom.js:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
I am a beginner in jQuery.
I am looking for a short and simple way.
$(document).ready(function(){
$('.myTable tr:even').addClass('highlight');
});
Remove dot from addClass function
You dont really need jQuery to get this effect. Unless, you have a specific use case / requirement, you could just use the odd, even pseudo classes to accomplish your need.
Here is a sample.
table,
table td {
border: 1px solid white;
background: green;
color: white;
}
table tr:nth-child(even) td {
background-color: orange;
}
.highlight {
background: orange;
}
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
This is a small example using CSS and jQuery :
// Execute a function when the DOM is fully loaded.
$(document).ready(function () {
// Set the .alt class for the alternate rows
$('.myTable tr:nth-child(even)').addClass('alt');
});
/** Style for the body **/
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
.alt {
background-color:#eee;
}
/** Style for the table **/
.myTable {
border-collapse:collapse;
font-size: 0.917em;
max-width:500px;
min-width:450px;
}
.myTable td {
border:1px solid #333;
padding:4px 8px;
}
.myTable td:nth-child(1) {
width:200px;
}
.myTable td:nth-child(2) {
width:150px;
}
.myTable td:nth-child(3) {
width:100px;
}
/** Style for the cointainer **/
#body {
clear: both;
margin: 0 auto;
max-width: 534px;
}
html, body {
background-color:White;
}
hr {
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="body">
<h3>Table 1</h3>
<table class="myTable">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td>1600</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h3>Table 2</h3>
<table class="myTable">
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
</div>
You are almost there. The problems in your code are
You want to highlight td and your selector is tr.
Syntax for .addClass() should be addClass('highlight') and not addClass('.highlight').
Replace this:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
with:
$(document).ready(function(){
$('.myTable td:odd tr').addClass('highlight');
});
According to documentation :odd selects even rows:
In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.
RUNNING CODE:
$(document).ready(function(){
$('.myTable tr:odd td').addClass('highlight');
});
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>