Let's say I have a table with some rows. I would like to have a page for each row.
Every time I select a row and press the Show selected button, the row is appended to the table, if I select 40 rows, 40 rows will be appended to the table, but what I want is that 40 pages are created and each page has one table with only one row.
JSFiddle Demo
Current result:
Desired result:
I am confused, how can I assign a href ="#" to a row in a table?
If I am not mistaken I have to do something like this (Bootsrap 4.0 documentation):
One way would be when you append rows inside your table show only first tr and hide others and when user click on any page number you can show that row and hide other .
Demo Code :
$(function() {
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
var buttons = "<button type='button' class='btn prev'> Prev </button>"
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
buttons += `<button type="button" data-id="${index}" class="btn indexs">${index + 1 }</button>`
});
buttons += `<button type="button" class="btn next">Next</button>`
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
$("#pagination").html(buttons)
$("#pagination button:eq(1)").addClass("btn-primary")
$("#secondTable1 tr , #secondTable2 tr").hide() //hide trs
$("#secondTable1 tr:eq(0) , #secondTable2 tr:eq(0)").show() //show only first one
}
});
//this code will get called when number(1,2,.) is clicked not for next/prev btn you need to write logic for next/prev button .
$("#pagination").on("click", ".indexs", function() {
$(this).addClass("btn-primary").siblings().removeClass("btn-primary") //add class
var data_id = $(this).data("id") //get index
$("#secondTable1 tr , #secondTable2 tr").hide() //hide all tr
$("#secondTable1 tr:eq(" + data_id + ") , #secondTable2 tr:eq(" + data_id + ")").show() //show tr where index matches..
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</div>
</div>
<div id="pagination"></div>
Related
Iam trying to display multiple products to upload at once by using add product button, it displays the entire table to enter the product details. Here Iam facing the issue with add column option.
When I click on add grade option, columns are added successfully for one product, but if it comes for multiple products it will added to every table. So this is the 1st issue.
And secondly whatever the codes are entered in dynamic table were affected to packing list table.
Here is the code which I have tried.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
<style type="text/css">
input[type=text] {
width: 150px;
}
.form-group{
padding-bottom: 30px;
}
</style>
<style type="text/css">
.table-content {
padding: 20px;
}
.remove {
margin-left: 10px;
color: red;
}
.remove:hover {
cursor: pointer;
}
.form-control {
width: 90px;
}
</style>
<script>
$(document).ready(function(){
var max=2;
var x = 1;
$("#add_product").click(function(){
var html = '<div class="table-content"><div style="padding-bottom: 20px;"><button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button><button type="button" class="btn btn-info add-col">Add Grades</button></div><table class="table table-bordered table-hover table-sortable"><thead><tr><tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr><tr><th>Delete code</th><th class="text-center">CODES</th><th class="text-center">PRODUCTION</th><th class="text-center">REGN NO</th><th class="text-center"><select name="grade1" id="grade1" class="form-control"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select></th><th id="total">TOTAL</th></tr></tr></thead><tbody><tr><td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td><td><input type="text" name="codes[]" placeholder="CODES" class="form-control"/></td><td><input type="text" name="production[]" placeholder="production" class="form-control"/></td><td><input type="text" name="reg_no[]" placeholder="reg_no" class="form-control"/></td><td><input type="number" name="quantity1[]" class="form-control"/></td><td id="total1"><input type="number" placeholder="total" name="total[]" class="form-control"/></td></tr></tbody></table></div>';
if(x <= max){
$("#products").append(html);
x++;
}
});
$("#table_field").on('click','#remove',function(){
$(this).closest('tr').remove();
/*x--;*/
});
});
</script>
</head>
<body>
<div class="container">
<center>
<h1 style="padding-bottom: 50px;">CODE LIST</h1>
</center>
<form>
<div class="form-group">
<label class="control-label col-sm-2">Consignee</label>
<div class="col-sm-10">
<input type="text" name= "consignee" class="form-control" placeholder="Enter Consignee">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Exported TO</label>
<div class="col-sm-10">
<input type="text" name="exportedto" class="form-control" placeholder="Enter Exported TO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">PO</label>
<div class="col-sm-10">
<input type="text" name="po" class="form-control" placeholder="PO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Brand</label>
<div class="col-sm-10">
<input type="text" name="brand" class="form-control" placeholder="Enter Brand">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">INV NO</label>
<div class="col-sm-10">
<input type="text" name="invno" class="form-control" id="invno" placeholder="Enter INV NO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product">PRODUCT</label>
<div class="col-sm-10">
<input type="text" name="product" class="form-control" id="product" placeholder="Enter Product">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="packing">Type of Packing</label>
<div class="col-sm-10">
<input type="text" name="packing" class="form-control" id="packing" placeholder="Type of Packing">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button id="add_product" type="button" class="btn btn-warning">Add Product</button>
</div>
</div>
<div id="products">
<div class="table-content">
<div style="padding-bottom: 20px;">
<button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button>
<button type="button" class="btn btn-info add-col">Add Grades</button>
</div>
<table class="table table-bordered table-hover table-sortable">
<thead>
<tr>
<tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr>
<tr>
<th>Delete code</th>
<th class="text-center">
CODES
</th>
<th class="text-center">
PRODUCTION
</th>
<th class="text-center">
REGN NO
</th>
<th class="text-center">
<select name="grade1" id="grade1" class="form-control">
<option value="0">Select</option>
<option value="13/15">13/15</option>
<option value="16/20">16/20</option>
<option value="21/25">21/25</option>
<option value="26/30">26/30</option>
<option value="31/40">31/40</option>
<option value="41/50">41/50</option>
<option value="51/60">51/60</option>
<option value="61/70">61/70</option>
<option value="71/90">71/90</option>
<option value="91/110">91/110</option>
</select>
</th>
<th id="total">TOTAL</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td id="total1">
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
<div id="packing-list">
<h4 style="color: red">Packing List</h4>
<table class="table table-bordered table-hover table-sortable" id="packing-list">
<thead>
<tr>
<tr>
<th>S.No</th>
<th class="text-center">
DAY CODE
</th>
<th class="text-center">
SOURCE CODE
</th>
<th class="text-center">
HON QTY IN Kgs
</th>
<th class="text-center">
USED QTY IN Kgs
</th>
<th class="text-center">AFTER HEAD LESS IN Kgs</th>
<th class="text-center">
PEELING IN Kgs
</th>
<th class="text-center">
SOAK OUT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN M/c
</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
<tr>
<th colspan="4" class="text-center">TOTAL</th>
<th>Total 1</th>
<th>Total 2</th>
<th>Total 3</th>
<th>Total 4</th>
<th>Total 5</th>
<th>Total 6</th>
</tr>
<tr>
<th colspan="5" class="text-center">YEILD %</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
<!-- <center>
<input type="submit" class="btn btn-success" name="codelist" id="save" value="submit">
</center> -->
</body>
<script type="text/javascript">
// we're binding a lot of different click event-handlers to this element
// there's no point looking it up every time we do so:
var body = $('body');
// binding the click event for the add-row button:
body.on('click', 'button.add-row', function() {
// getting the relevant <table>:
var table = $(this).closest('div.table-content'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
var table = $(this).closest('div.packing-list'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
});
body.on('click', 'span.remove-row', function() {
$(this).closest('tr').remove();
});
body.on('click', 'span.remove-col', function() {
// getting the closest <th> ancestor:
var cell = $(this).closest('th'),
// getting its index with jQuery's index(), though
// cell.prop('cellIndex') would also work just as well,
// and adding 1 (JavaScript is zero-based, CSS is one-based):
index = cell.index() + 1;
// finding the closest <table> ancester of the <th> containing the
// clicked <span>:
cell.closest('table')
// finding all <td> and <th> elements:
.find('th, td')
// filtering that collection, keeping only those that match
// the same CSS-based, using :nth-child(), index as the <th>
// containing the clicked <span>:
.filter(':nth-child(' + index + ')')
// removing those cells:
.remove();
});
body.on('click', 'button.add-col', function() {
// finding the table (because we're using it to find both
// the <thead> and <tbody>:
var table = $(this).closest('div.table-content').find('table'),
thead = table.find('thead'),
// finding the last <tr> of the <thead>:
lastTheadRow = thead.find('tr:last-child'),
tbody = table.find('tbody');
att = table.find('#total');
// creating a new <th>, setting its innerHTML to the string:
$('<th>', {
'html': '<select name="grade1" id="grade1" class="form-control pull-left"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select><span class="pull-left remove remove-col"><i class="glyphicon glyphicon-trash"></span>'
// appending that created <th> to the last <tr> of the <thead>:
}).insertBefore(att);
// creating a <td>:
$('<td>', {
// setting its text:
'html': '<input type="number" name="quantity1[]" class="form-control"/>'
// inserting the created <td> after every <td> element
// that is a :last-child of its parent:
}).insertBefore('td:last-child');
});
</script>
</html>
this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table
In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//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>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .
On the table I created, there is an anchor tag embedded with a cross icon and I want to assign an event to it, however when I click it nothing happen.
I have tried various way including $(".remove1"), $("#productTable tbody tr td a"),...
Then I try to debug in chrome by setting up breakpoint but it just won't go into the function.
the table
<table class="table" id="productTable">
<thead class="thead-primary">
<tr class="text-center">
<th> </th>
<th> </th>
<th>Product name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/beef.jpg);"></div>
</td>
<td class="product-name">
<h3>Beef Noodles Soup</h3>
</td>
<td class="price">RM12.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="2" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM24.00</td>
</tr>
<tr class="text-center">
<td class="product-remove"><span><i class="ion-ios-close remove1"></i></span></td>
<td class="image-prod">
<div class="img" style="background-image:url(images/dumpling.jfif);"></div>
</td>
<td class="product-name">
<h3>Dumpling</h3>
</td>
<td class="price">RM5.00</td>
<td class="quantity">
<div class="input-group mb-3">
<button class="quantity-left-minus">-</button>
<input type="text" name="quantity" class="quantity form-control input-number" value="1" min="1" max="100">
<button class="quantity-right-plus">+</button>
</div>
</td>
<td class="total">RM5.00</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$(".product-remove a").on("click", function() {
console.log("test");
});
});
when i click on the a nothing written out in console, please help.
Plain JS:
const icons = document.querySelectorAll('.product-remove a');
icons.forEach(element => {
element.addEventListener("click", function(e){
e.preventDefault();
console.log("yeah");
})
});
You need to give the anchor tag some sort of clickable area though:
.product-remove a{
display: block;
padding: 8px;
background: goldenrod;
}
I have a html table. Each row has input field with hidden borders. When I press a button then it should give me all the values of input field of each table row
without using id and class, if it is possible.
Html:
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018'/> </td>
<td> <input type='text' value='Cash'/> </td>
<td> <input type='text' value=''/> </td>
<td> <input type='text' value='20000'/> </td>
<td> <input type='text' value='15000'/> </td>
<td> <input type='text' value='-5000'/> </td>
<td> <input type='button' value='Delete'/> </td>
</tr>
</tbody>
</table>
</div>
<button class='btn btn-success'>Show</div>
</div>
JavaScript I tried
var rowsInTable = $("#detailTable tr").length;
rowsInTable--;
row.parentNode.removeChild(row);
for(i=1;i<=rowsInTable;i++)
{
console.log(document.getElementById("detailTable").rows[i].innerHTML);
}
Since JQuery is not tagged, this is how I would do it in Javascript only:
var tableRows = document.getElementById("detailTable").rows
for (i = 1; i < tableRows.length; i++) {
var myrow = tableRows[i];
for (j = 0; j < myrow.cells.length; j++) {
var mytd = myrow.cells[j];
console.log(mytd.children[0].value);
}
}
Here is the JSFiddle demo
You can further fine-tune it to get your formatted output.
P.S: Check your console for the output.
Here you go!
$('button').on('click', function() {
$('#detailTable > tbody').find('tr').each(function() {
console.log($(this).find('input'));
});
});
Here I am using $.map to get the values
Also use jQuery to delete the row
$(function() {
$(".btn-success").on("click", function() {
var values = $("#detailTable tbody input[type=text]").map(function() {
return this.value;
}).get();
alert(values);
});
$("[type=button][value=Delete]").on("click", function() {
$(this).closest("tr").remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018' /> </td>
<td> <input type='text' value='Cash' /> </td>
<td> <input type='text' value='' /> </td>
<td> <input type='text' value='20000' /> </td>
<td> <input type='text' value='15000' /> </td>
<td> <input type='text' value='-5000' /> </td>
<td> <input type='button' value='Delete' /> </td>
</tbody>
</table>
</div>
<button type="button" class='btn btn-success'>Show</button>
</div>
i have a table when the table row is selected.i want that particular row to be appended in another table.
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>
There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>
EDIT: Used loop instead repeating
Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})
<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.
$('#myModal').modal('toggle');
$(document).on('change', 'input[type="checkbox"]', function(e){
if($(this).is(":checked"))
{
var row = $(this).closest('tr').html();
$('.table2 tbody').append('<tr>'+row+'</tr>');
}
else
{
$('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
}
$('#row').on('click', ':checkbox', function (event) {
$(this).closest('tr').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="col-md-6">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<table class="table1 table table-bordered" id="echo">
<h3 style="text-align: center;"></h3>
<tr>
<td>1</td>
<td name="echo">A</td>
<td>1500</td>
<td><input type="checkbox" value="1" class="check-box"></td>
</tr>
<tr>
<td id="2">2</td>
<td name="fetal_echo">B</td>
<td>2000</td>
<td><input type="checkbox" value="2" class="check-box"></td>
</tr>
<tr>
<td id="1">3</td>
<td value="abc">C</td>
<td>8500</td>
<td><input type="checkbox" value="3" class="check-box"></td>
</tr>
<p id="output"></p>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button>
</div>
</div>
</div>
</div>
<table class="table2 table table-bordered" id="row">
<tbody>
</tbody>
</table>
<div>
#vijay mishra and #Vishnu Bhadoriya thankyou for your support....You are really awesome.