I have results shows up inside a table, I designed it to show as grid by separating them by td for each.
I used a JS code to filter the results by a text written in textbox, but the only results shows is the labels!
I want each td shows as a result, complete with the contents (Image + Input + label).
Here's the JS code & example of a table same what I have:
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#table *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Use closest this link to get parent td from your search and then toggle visibility.
below is logic to your solution.
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table label").filter(function() {
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>
Related
A new row is dynamically creating on clicking "add Row" button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here
function add_row(table_row_count)
{
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
var markup =
'<tr id="tbl_row_'+table_row_count+'" >'+
'<td><label>'+table_row_count+'</label></td>'+
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
'<td id="capacity_from_row_'+table_row_count+'" >'+
'<label>Range From :</label><br>'+
'<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'" />'+
'</td>'+
'<td>'+
'<label id="lbl_capacity_range_'+table_row_count+'" >Range Upto :</label><br>'+
'<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+
'</td>'+
'<td class="align-middle"></i> Add Row</td>'+
'<td class="align-middle"></i> Delete Row</td>'+
'</tr>';
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count)
{
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
How to solve the issue. kindly help me.
Thanks in advance.
Different radio button groups are created when the name attribute of the radio buttons is different. Also, in the solution below, I made it easier to express dynamic content by using template literals.
Note the following statement in the dynamic element written into the markup variable in the add_row() method:
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
/* This variable will be used to create new radio button groups. */
let counter = 0;
function add_row(table_row_count) {
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
/* With each iteration, the content of the counter variable is incremented. */
++counter;
var markup =
`<tr id="tbl_row_${table_row_count}">
<td>
<label>${table_row_count}</label>
</td>
<td>
<label>Value in Range? :</label>
<!-- Note the name="option${counter}" statement so that the radio buttons have different groups. -->
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
</td>
<td id="capacity_from_row_${table_row_count}">
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_${table_row_count}"/>
</td>
<td>
<label id="lbl_capacity_range_${table_row_count}">Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_${table_row_count}"/>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-success add-row" id="add-row_${table_row_count}" onClick="add_row('${table_row_count}');" >
<i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row
</a>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-danger delete-row" id="delete-row_${table_row_count}" onClick="delete_row('${table_row_count}');" >
<i class="fa fa-trash fa-lg text-danger" aria-hidden="true"></i> Delete Row
</a>
</td>
</tr>`
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count) {
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.
For Example
1.) If you have two radios with same name
Only one value can be selected at a time.
2.) Now after adding another row your code will look like
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>
name is same for all radio buttons so only one will be selected at a time.
Fix:
In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option_'+table_row_count+'" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option_'+table_row_count+'" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
Fixing this will fix the issue.
*** Change dynamic radio input name. here, your code create all dynamic radio input with the same name. ***
I am trying to send records of my table as form using javascript. I have tried using method below.
I know my foreach function is not capturing the tag. How do I solve it so i can send to php and receive as POST['SHOWTITLE']
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" disabled="">
</td>
</tr>
<tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tr>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
You could iterate all input tags like this:
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("tbody input[type=text]").each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
Please try this i.e. remove disabled="" to readonly. If an element is disabled, its value is not sent to the server. So, the correct code is as below:
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</td>
</tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id).children().each(function() {
$(this).children().each(function(){
$(this).clone().appendTo(form);
});
});
document.body.appendChild(form);
form.submit();
}
This html is not require any javascript to submit the form and yes you need to write CSS to make those inner DIV inline that can be easily achieve using CSS flex and please keep in mind this is only for one row, you have to iterator the whole html to create another row.
<div>
<form action="orderTicket.php" method="POST">
<div>
<input type="text" class="form-control transparent-input" name="1" value="1">
</div>
<div>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</div>
<div>
<button type="submit" class="btn btn-outline-success">Room</button>
</div>
</form>
</div>
My tr is defined inside the table tag like this:
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Now, I am using the following snippet to create the cloned above code, all work but the placement is not right, I want it to be creating underneath the tr tag before this <div class="nextitem"> tag, not sure what I am doing wrong here
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
console.log(obj);
obj.parents('table').append(clonedObj);
initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
If I understand your question, you want new cloned <tr> elements to be added BEFORE the element with the "new item" tag.
What we are going to do is utilize jQuery's built in .clone() method instead of doing it ourself. Once we have the cloned object we use your existing code to remove the New Item button and add the Remove button.
After we do that we'll utilize jQuery's .before() method to insert the new, cloned element before the original object. (You could use .after() if you wanted this to be inserted after the original object)
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first();
var clonedObj = obj.clone();
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
obj.before(clonedObj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</div>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
You may also want to clear the inputs of the original object so that it is empty after the clone is created. (or clear the inputs of the cloned object, up to you).
References:
https://api.jquery.com/clone/
https://api.jquery.com/after/
Try below code
Use obj.parents('table').find("tr:eq(0)").after(clonedObj); instead of obj.parents('table').append(clonedObj);
$('.createNewItemTag').click(function() {
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function() {
$(this).parents('tr').first().remove();
});
//console.log(obj);
obj.parents('table').find("tr:eq(0)").after(clonedObj);
//initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item</div>
</td>
</tr>
</table>
Js Fiddle Demo : JSFiddle
Something like this?
$(document).on('click', '.createNewItemTag', function() {
var rw = $(this).parents('tr');
var ix = rw.index() +1; //remove +1 to insert above curr row
var obj= rw.clone();
obj.addClass('newcol').find('td:first-child').text('New Item');
$('table tr:nth-child('+ix+')').after(obj);
});
table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2"><input type="text" value="customerid"></td>
</tr>
<tr>
<td>
<div id="stlineitems"><label for="stlineitems">Item(s)</label></div>
</td>
<td>
<div class="onlyleft">
<select>
<option>Options go here</option>
</select>
</div>
<div class="moveboxleft">
<input type="text" value="Provide Rate" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Notes:
(1) Switched to using .on() to allow newly added rows to be cloned
I have a repeating table with a hidden row and when clicking the a checkbox I have the row appearing, however when adding more than one table the same row always appears instead of the row that has just been cloned. I would appreciate any help with this.
My code looks like the following:
HTML:
<table class="repeatingTable">
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
<input type="text" name="name" id="InputName" class="InputID_1" />
</td>
<td>
<label for="req">Required</label>
</td>
<td>
<input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
</td>
</tr>
<tr id="HiddenFields" class="HiddenFields_1">
<td>
<label for="Box">Box Number</label>
</td>
<td>
<input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
</td>
<td>
<label for="id">ID Number</label>
</td>
<td>
<input type="number" name="id" id="inputNo" class="InputNo_1" />
</td>
</tr>
</table>
<div class="expensesBtns">
<input id="repeatingBtn" type="button" value="Add Another" />
</div>
Javascript:
document.getElementById("HiddenFields").style.visibility = "hidden";
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
document.getElementById("HiddenFields").style.visibility = "hidden";
}
else {
document.getElementById("HiddenFields").style.visibility = "visible";
}
})
$('#repeatingBtn').click(function (e) {
//$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
// $(this).attr("id", $(this).attr("id") + "_cloned");
//})
e.preventDefault();
var lastRepeatingGroup = $('.repeatingTable').last();
var cloned = lastRepeatingGroup.clone(true);
cloned.insertAfter(lastRepeatingGroup);
cloned.find("input").val("");
//resetAttributeNames(cloned);
});
I have a js fiddle here: jsfiddle
Any help is greatly appreciated.
Check your UPDATED FIDDLE.
Worked after some changes in ChexkBox_1 click event, you have to use $(this) instead of document.getElementById("HiddenFields") to deal with current checkbox clicked :
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
}
else {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
}
});
NOTE : when you clone the row you have to change id because element IDs should be unique within the entire document.
My code is attached below.
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<form>
<input type='button' value='Add Another Product' id='aprod' />
</form>
<table id='page3_inside'>
<tr id='ln1'>
<td>
<label for="product_name">Product Name</label>
<br />
<select class='input name_of_product' style='width:150px; height:34px;' name="name_of_product[]">
<option value="">Select from List</option>
</select>
</td>
<td>
<label for="product_cat">Product Category</label>
<br />
<input type='text' class="input product_category" name="product_category[]"
style="font-family:verdana; width:150px; border: 1px solid #000000;" readonly="readonly" />
</td>
<td>
<label for="qty">Qty</label>
<br />
<input type="text" value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty"
onkeypress="return isNumberKey(event)" />
</td>
<td>
<label for="unit">Unit</label>
<br />
<input type='text' class="input unit" style="width:100px;" name="unit[]" readonly="readonly" />
</td>
<td>
<label for="brand">PO Number</label>
<br />
<input type="text" value="" class="input po" name="po[]" placeholder="PO Number"
style='width:150px; height:28px;' />
</td>
<td>
<img src='http://www.oasisservicedoffices.co.uk/wp-content/uploads/2014/08/Delete-button-150x150.jpg'
class='del' width='30px' style='cursor:hand;cursor:pointer;' />
</td>
</tr>
</table>
</body>
</html>
$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});
I created a delete button for appended elements. but as you can see, there is a delete button on the first row. what i want to do is remove that delete button, and only display it on the next row upon pressing the 'Add Another Product' button.
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
You could just hide the first delete button with css
table tr:first-child .del{
display: none;
}
DEMO
If you want delete button to the last element only:
$('#aprod').on('click', function() {
var el = $('#page3_inside tr:last').clone()
$('#page3_inside').find('.del').remove();
el.appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
$('body').on('click', '.del', function() {
$(this).closest('tr').remove();
});
Demo: http://jsfiddle.net/tusharj/f772sovm/8/
You can append the img directly in JS. Remove it from your HTML.
$('#aprod').on('click', function() {
var i=$('#ln1').clone().appendTo('#page3_inside');
i.append('<img src="http://www.oasisservicedoffices.co.uk/wp-content/uploads/2014/08/Delete-button-150x150.jpg" class="del" width="30px" style="cursor:hand;cursor:pointer;">')
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
Fiddle
You can try this
$( "#page3_inside table" ).first().find('img').css("display", "none");