I have a problem in JavaScript to repeat a same tr after,when i click the td elements.
My html code bellow:
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates">
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date">
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date">
</td>
</tr>
I tried with this js but failed:
$('.budrow').click(function(){
$(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>');
});
Please help me.
Try to use:
var $table = $('#tabl2');
$table.click(function(e){
var $tr = $(e.target).closest('tr');
if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child"))
$tr.after($tr.clone());
});
JSFiddle.
Bind the click event to the clicked element, select the current row using closest() and then append the new row using after() function:
$('.btn').on('click', function() {
var that = $(this);
var newRow = '<tr><td colspan="3">This is a new row</td></tr>';
that.closest('tr').after(newRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
</tr>
</tbody>
</table>
You can clone and add the new row, also it will be better to use a add button separately
<button class="budrow">Add</button>
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates" />
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date" />
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date" />
</td>
</tr>
</table>
then
jQuery(function ($) {
var $tr = $('#tabl2 tbody tr').eq(0);
$('button.budrow').click(function () {
var $clone = $tr.clone();
$('#tabl2').append($clone);
$clone.find('.datepicker').removeClass('hasDatepicker').datepicker();
});
$('.datepicker').datepicker();
});
Demo: Fiddle
$('.budrow tbody input').click(function(e){
makeClone(e);
});
function makeClone(e){
var newClone = $(e.target).closest("tr").clone();
$("#tabl2 tbody").append(newClone);
$(newClone).click(function(ev){
makeClone(ev);
})
}
Related
I have made the function that helps me dynamically insert the new tr by just clicking one button, but when I reload the div with the help jquery and again hit the add new tr button it not appending.
I try to find the issue and I see the tr#row_{num} count is not resetting and starting from the last count.
for example -
If I appended 3 tr and reload the div and then, again when I click button for new tr adding it starting from 4 and not working/appending.
I used the table empty(); function but it also not working.
Please help me with how I fix this issue -?
$(document).on("click", "button#add_row", function() {
var table = $("#myTable");
var count_table_tbody_tr = $("#myTable tbody tr").length;
var row_id = count_table_tbody_tr + 1;
var html = '<tr id="row_' + row_id + '">';
html += '<td><input type="text" class="form-control ui-form-input firstname" autocomplete="off"></td>' + '<td> <input type="text" class="form-control ui-form-input lastname" autocomplete="off"></td><td></td></tr>';
if (count_table_tbody_tr >= 1) {
$("table#myTable tbody tr:first").before(html);
} else {
$("table#myTable tbody").html(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" id="myTable" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody>
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
My JsFddle for live working is here JSFIDDLE
Your code can be simplified to this
Note I moved the ID to to tbody
$(function() {
const $table = $("#myTable");
const $row = $("#row_1");
$("#add_row").on("click", function() {
$table.append(
$row
.clone()
.attr("id",`row_${$table.find("tr").length+1}`)
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
If the table is dynamic, you need
$(function() {
$(document).on("click","#add_row", function() {
const $table = $("#myTable");
const $row = $("#row_1");
$table.append(
$row
.clone()
.attr("id",`row_${$table.find("tr").length+1}`)
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">First Name</th>
<th style="text-align: center; vertical-align: middle;">Last Name</th>
<th style="width: 5%;">
<button type="button" id="add_row" class="btn btn-default">Add ROW</button>
</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="row_1">
<td>
<input type="text" class="form-control ui-form-input firstname" autocomplete="off">
</td>
<td>
<input type="text" class="form-control ui-form-input lastname" autocomplete="off">
</td>
<td></td>
</tr>
</tbody>
</table>
Here my HTML table:
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
The first row is to implement a filter, so it does not contain useful data.
The last column has an input tag, rather then a plain text.
I want to:
cycle among all rows/column
skipping the first row
pushing data into an array, keeping in mind the difference of the last column
This is the actual code:
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
// do something else
}
But:
it does not skip the first row
I'm not sure how to know if I'm in the last column to use .val() on the input tag
Ideally, I should check in each cell if there is an input tag to retrieve the data in the right way.
UPDATE
Second point fixed by myself:
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
if ($(this).find('input').length) data.push($(this).find('input').val().trim());
else data.push($(this).text().trim());
});
});
You need to filter within the tbody otherwise it will ignore the tr within thead since :first pseudo class selector selects the first one among the entire collection.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody').find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>
You can use [:first-child][2] as well which will work in both ways since it ignores both tr elements.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>
I have a HTML table like below.I'm going to access that values from jquery.But there's a problem
My HTML
<table class="table" id="examtbl">
<thead>
<tr>
<th>Ex No</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr id="7500">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="76" />
</td>
</tr>
<tr id="7600">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="66" />
</td>
</tr>
</tbody>
</table>
My Script
$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(".examNo").val()); < -- It hits3 times but everytime it shows me 7500 only.
});
});
** Could you please give me a solution to how to get those values to.
the thing is, that you always call $(".examNo") ... and that means, he always looks for the first item that fits... you have to use this in the inner each loop :)
$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="examtbl">
<thead>
<tr>
<th>Ex No</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr id="7500">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="76" />
</td>
</tr>
<tr id="7600">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="66" />
</td>
</tr>
</tbody>
</table>
$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(this).val());
});
});
You can use this
JS:
$("#examtbl > tbody > tr").each(function () {
$(this).find('td > input').each(function () {
if ($(this).hasClass('examNo'))
alert($(this).val()); //< -- It hits3 times but everytime it shows me 7500 only.
});
});
I want to SEARCH table data. My table td consists of textboxes.
The code for searching works when I directly add data in td's but does not when my data is a value in textbox. I've have done some coding for searching but it doesn't seem to work.
I just want to be able to search below table on input in a search box.
Screenshot of my table and code is given below :
products.html
<script type="text/javascript">
$(document).ready(
function() {
$("#search").keyup(
function ()
{
var value = this.value.toLowerCase().trim();
$("table tr").each(
function (index)
{
if (!index) return;
$(this).find("td").children().attr("value").each(
function ()
{
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
});
</script>
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:#10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<%! int cnt=0; %>
<c:forEach var="row" items="${result.rows}">
<tr>
<td hidden="true">${row.pid}</td>
<td>
<input type="checkbox" value="">
</td>
<td><input type="text" id='<%= "barcode"+cnt %>' value="${row.barcode}" name="barcodename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "name"+cnt %>' value="${row.name}" name="namename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "brand"+cnt %>' value="${row.brand}" name="brandname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "stock"+cnt %>' value="${row.stock}" name="stockname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "cost"+cnt %>' value="${row.cost}" name="costname" class="form-control input-sm"></td>
</tr>
<% ++cnt; %>
</c:forEach>
</tbody>
</table>
I partially found a solution. The search is working but it does not work as expected. It hides the cells which do not match the search string.
Following is the fiddle link for the same:
https://jsfiddle.net/freecoder/hfhtga0g/6/
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
_this = this;
// Show only matching TR, hide rest of them
$.each($('#mytable tbody tr td>input[type="text"]'), function() {
if ($(this).val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
<html>
<label for="search">Search products :</label>
<input type="text" id="search" placeholder="Enter text to search">
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:#10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td> <input type="checkbox"> </td>
<td> <input type="text" value="${row.barcode}"> </td>
<td> <input type="text" value="${row.name}"> </td>
<td> <input type="text" value="${row.brand}"> </td>
<td> <input type="text" value="${row.stock}"> </td>
<td> <input type="text" value="${row.cost}"> </td>
</tr>
</c:forEach>
</tbody>
</table>
</html>
I want when i click on the +add more button it should add the element same as in line no.1 also the S.No should incremented...and each row have remove option.
code in JSFIDDLE
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input id="1a" type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
Jquery clone() is for cloning DOM element and then you can append it. Consider code something like this:
$(function(){
$("#c").click(function(e){
e.preventDefault();
$("table.table tbody tr:first").clone().appendTo("table.table tbody");
});
})
DEMO
For increment of serial number:
$(function(){
var counter = 1;
$("#c").click(function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
tr.find("td:eq(0)").text(++counter);
});
})
See it in action
You can use .clone() to copy your first tr:
$(".text-right").on("click", function() {
var tr = $("table tr:eq(1)").clone(true);
$(tr).find("td:first").text($("table tr").length - 1);
$("table").append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
I remove id from input cause id must be unique. Also modify a bit the code to increase the numeric value of the td correct.
try:
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
</td>
</tr>
</tbody>
</table>
js:
function updateNumber() {
x = 0
$('table.table tbody tr').each(function(i,v){
$(this).find('td:eq(0)').text(x+1)
x++;
});
}
$("#c").on('click',function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
updateNumber();
console.log($('table.table tbody tr'));
});
$('body').on("click",".rm", function(e) {
e.preventDefault();
$(this).parents('tr').remove();
updateNumber();
});
jsfiddle:https://jsfiddle.net/pjeruccb/3/
Have a look at this:
$(".text-right").on("click", function() {
var prevNo = parseInt($(".table tr:last td:first-child").text());
var tr = $("table tr:eq(1)").clone(true);
$("table").append(tr);
$('.table tr:last-child td:first-child').html(prevNo + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
</tr>
</tbody>
</table>