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>
Related
I have a big table with multiple table heads. I have a simple js function to filter table data, but I need to make it so that it shows the table head section too. I added tbody and tr tags to my function but now it searches data in table but shows every thead section. How can I get that it shows only the specific thead section which contains searched tr element?
My code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can try the below approach with data attribute data-group to group thead and tbody into separate groups. That would help to recognize element sections and find string matches in groups easily.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase().trim();
$("#myTable thead").each(function() {
var group = $(this).data("group")
var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1
var selector = `tbody[data-group='${group}'] tr`
var allRows = $('#myTable').find(selector);
var isAnyRowMatched = false;
for (var row of $(allRows)) {
const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1
$(row).toggle(isRowMatched);
if ($(row).text().toLowerCase().indexOf(value) > -1) {
isAnyRowMatched = true;
}
}
$(this).toggle(isTheadMatched || isAnyRowMatched)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary" data-group="1">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody data-group="1">
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary" data-group="2">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody data-group="2">
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a Bootstrap table in the following format
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
</div>
I would like to get the ids of the checkboxes as they are being checked using d3. I've tried the following but it doesn't seem to work. What would be the best way to get the checked ids stored in an array using d3?
var checked = []
var boxes = d3.selectAll("input.jmolInline:checked");
boxes.each(function() {
checked.push(this.id)
});
console.log(checked)
use this code to get the job done
var inputs = d3.selectAll('input[type="checkbox"]')._groups[0];
document.getElementById('submit').addEventListener('click', function() {
var checked = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked.push(inputs[i].id);
}
}
document.getElementById('result').innerHTML = 'Array of ids selected ' + checked;
console.log(checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
<button id="submit">get Id</button>
<div id="result"></div>
</div>
I have a DOM tree as follow :
console.log($("table td:not(.customWrap)"));
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<table>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</table>
I use a selector $("table td:not(.customWrap)") to get some node that include 1,2,4.
But with this selector, I filter the node td.customWrap successfully and not filter its children <td class="noWrap">3<td>.
Actually, I don't want to get the node that has 3.
Try This : you have to just change $("table td:not(.customWrap * , .customWrap)")
$(function() {
$("table td:not(.customWrap * , .customWrap)").each(function() {
console.log($(this).text())
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<td class="noWrap">1
<td>
<td class="noWrap">2
<td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3
<td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</table>
You could use something like this:
var s = $("table td").filter(function() {
return $(this).closest('.customWrap').length == 0
});
Working demo
var s = $("table td").filter(function() {
return $(this).closest('.customWrap').length == 0
});
console.log(s)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</tr>
</table>
You can tell it not to return nested table td
Note this code only works if you have 1 levels of nested tables
console.log($("table tr td").not(".customWrap").not("table table tr td").text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<tr>
<td class="noWrap">1<td>
<td class="noWrap">2<td>
<td class="customWrap">
<table >
<tr>
<td class="noWrap">3<td>
</tr>
</table>
<td>
<td class="noWrap">4<td>
</tr>
</table>
If you need just the first level you could give your parent table an identifier then use the greater-than sign (>) in your selector like:
"#parent_table > tbody > tr > td.noWrap"
console.log( $("#parent_table > tbody > tr > td.noWrap").length + " Items" );
console.log( $("#parent_table > tbody > tr > td.noWrap").text() );
console.log( $("#parent_table > tbody > tr > td.noWrap") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="parent_table" border=1>
<tr>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
<tr>
</table>
I've a table with rows that I can toggle. Now I wanna search in the table. My search function work's but does not display the hidden rows. How can I do this? Here my search function.
$(document).ready(function(){
$("#search").keyup(function(){
var search = $(this).val();
$("table tbody tr").hide();
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:contains("+search+")").each(function(){
$(this).closest("tr").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="skills" id="skills" width="100%" cellspacing="0">
<tr class="header-1">
<th>Skill</th>
<th colspan="2">Theoretische Kenntnisse</th>
<th>Praktische Kenntnisse</th>
<th class="skills_pfl">Zuletzt gepfelgt</th>
</tr>
<tr class="header-2">
<th></th>
<th class="skills_ausb">Ausgebildet</th>
<th class="skills_ausb_jhr">Ausbildungsjahr</th>
<th></th>
<th></th>
</tr>
<tr id="74" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-74"></i> Anwendungsgebiete
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="body-74" class="table-body"></tbody>
<tr id="116" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-116"></i> Application Server
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Some peoples don't understandt me. The search logic works fine, but I've rows that I can toggle with a click. And these rows won't be display if i search the table. Here a screenshot.
Why don't you turn your logic around and hide only the ones you don't want to see? Like so:
$(document).ready(function() {
var consolidatedArray = $("table tbody tr td").slice();
$("#search").keyup(function() {
var search = $(this).val();
$("table tbody tr").show()
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:not(:contains(" + search + "))").each(function() {
$(this).closest("tr").hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>abc</td>
</tr>
<tr>
<td>efg</td>
</tr>
<tr>
<td>xsd</td>
</tr>
<tr>
<td>sdf</td>
</tr>
<tr>
<td>ffs</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
<input id="search" type="text"/>
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);
})
}