I've a following HTML code for table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
And I've following jQuery code on above table:
$(document).ready(function() {
$('.products').click(function () {
var new_row = $('#reb1').clone();
/*Here I want to use the id as #blacklistgrid_1. As the there may be more than one tables present the ids could be #blacklistgrid_2, #blacklistgrid_3, and so on. So it should be dynamic not static for value 1*/
var tbody = $('tbody', '#blacklistgrid');
/*And in this line too, I want to access the tr and t body of that table with specific id only*/
var n = $('tr', tbody).length + 1;
new_row.attr('id', 'reb' + n);
$(':input', new_row).not('.prod_list').remove();
//new_row.find("td:eq(1)").html();
$('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo( $(new_row.find('td:first')) );
tbody.append(new_row);
$('.delete').on('click', deleteRow);
});
});
I've written my requirement in form of commentin above code. So someone please help me in achieving this. Thank you.
You can do make your code, id starts with blacklistgrid
$('[id^= blacklistgrid_]') // here you can access all elements whose id starts
// with backlistgrid_
and for accessing their specific children
$('[id^= blacklistgrid_]>td')
What others tried to explain in comments,
Here using class selector, you're going to access their id
$.each('.table', function () { // iterate all the table elements
var id = $(this).prop('id');
if (id === "blacklistgrid_1") { // check for the ids
//Perform ToDos
var tds = $(this).find('td');
// using tds perform its ToDos
}
});
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>
I'm trying to write a jQuery function to apply filters to multiple columns.
Example:
html
<table id="myTable" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">Address</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 0);"></td>
<td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 1);"></td>
<td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 2);"></td>
</tr>
<?php while ($row = $res->fetchArray()) { ?>
<tr>
<td><?php echo "{$row["address"]}"?></td>
<td><?php echo "{$row["name"]}"?></td>
<td><?php echo "{$row["description"]}"?></td>
</tr>
<?php } ?>
</tbody>
</table>
js
function filterTable(table, text, col) {
$(table + " > tbody > tr").not(':first').find("td").eq(col).filter(function() {
$(this).closest("tr").toggle($(this).text().toLowerCase().indexOf(text) > -1)
});
}
When the keyup event is fired a call the filterTable function passing the id of the table to be filtered, the text inserted by the user and the index of the column.
The goal is to hide the rows whose target column doesn't contain the text. I skip the first row because it contains the filter input textboxes.
I also want to let the user to enter multiple filters on different columns.
Even typing something in only one input textbox the behavior is not correct: when I type something that doesn't match all the rows hide.
I searched for similar questions (i.e. jQuery column filters) but the answers don't seem to work - when applying another filter the previous one is removed.
UPDATE
This is the actual html code generated:
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">Address</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 0);"></td>
<td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 1);"></td>
<td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 2);"></td>
</tr>
<tr>
<td>1000</td>
<td>Date</td>
<td>Date of the event</td>
</tr>
<tr>
<td>1001</td>
<td>Time</td>
<td>Time of the event</td>
</tr>
<tr>
<td>1002</td>
<td>Code</td>
<td>Requested code</td>
</tr>
</tbody>
</table>
You are not doing it right, the filterTable function must be like this:
function filterTable(table) {
var filterColumn1Value = $(table + " > tbody > tr:first-child").find('td').eq(0).find('input').first().val().toLowerCase();
var filterColumn2Value = $(table + " > tbody > tr:first-child").find('td').eq(1).find('input').first().val().toLowerCase();
var filterColumn3Value = $(table + " > tbody > tr:first-child").find('td').eq(2).find('input').first().val().toLowerCase();
$(table + " > tbody > tr").not(':first').filter(function() {
var column1Value = $(this).find("td").eq(0).text().toLowerCase();
var column2Value = $(this).find("td").eq(1).text().toLowerCase();
var column3Value = $(this).find("td").eq(2).text().toLowerCase();
$(this).toggle(column1Value.indexOf(filterColumn1Value) > -1 &&
column2Value.indexOf(filterColumn2Value) > -1 &&
column3Value.indexOf(filterColumn3Value) > -1)
});
}
And the calling of the function should be just:
filterTable('#tableParameters');
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>
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);
})
}
i am using a table in which i am sending data from a form by using a javascript
the code is
<div class="row">
<div class="span*">
<table id="production" class="table table-bordered" style="margin:10px auto;border:1px solid #999;width:95%">
<thead>
<tr>
<td scope="col" width="200">Product Name</td>
</tr>
<tr>
<td scope="col" width="300">Product Quantity</td>
</tr>
</thead>
</table>
</div>
</div>
</div></div>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="prodname">Product Name:</label>
</td>
<td>
<input id="prodname" name="product name" type="text" />
</td>
</tr>
<tr>
<td>
<label for="prodquantity">Product Quanitity:</label>
</td>
<td>
<input id="prodquantity" name="product quantity" type="text" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add</button>
</form>
And the javascript code is :
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
How can I retrieve the elements of two columns in two rows instead of columns ?
If I understood your problem right, you want to display the data on 2 rows instead of 2 columns.
<table id="production">
<tr>
<th>Product Name</th>
</tr>
<tr>
<th>Product Quantity</th>
</tr>
</table>
function updateForm() {
var prdn = document.getElementById("prodname").value;
var prdq = document.getElementById("prodquantity").value;
var table=document.getElementById("production");
var rows=table.rows;
var cell1=rows[0].insertCell(-1);
var cell2=rows[1].insertCell(-1);
cell1.innerHTML=prdn;
cell2.innerHTML=prdq;
}
This is provided you can change your HTML structure. What i did was:
structure the table as two rows with the first element in each row as a table header.
get the rows of the table
for each row append a cell at the end
set the content of the cell
Here is a demo:
http://jsfiddle.net/QzcZN/
you should use the selector with id and found the table , get the rows and per every row get the TD , like this example...
http://fiddle.jshell.net/beME9/show/