Develop Reference

Search through Table Cells

I have a table which is hidden which contains 1272 rows and within it 3 columns with a
Store Name
Postcode
Button
The script is meant to search for all td cells for either a store name or a postcode and is not returning the desired results.
This is a link to the search
Advice appreciated
$("#searchterm").on("keyup", function() {
var value = $.trim($(this).val().toLowerCase());
$("table#participating_stores tr:gt(0)").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find("td");
var id = $.trim($tdElement.text().toLowerCase())
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
//highlight matching text, passing element and matched text
$row.show();
}
}
});
});

I think this is what you are looking for. I've made this runnable snippet which hopefully makes things more clear for you and anyone else trying to think about this problem.
$("#searchterm").on("keyup", function() {
var value = $(this).val();
$("table tr:not(:first)").show().filter(function(index) {
return $(this).find("td").text().indexOf(value) == -1;
}).hide();
});
table, tr, td, th{
border: 1px solid black;
padding: 3px;
}
table th{
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>Postal Code</th><th>Store Name</th></tr>
<tr><td>12345</td><td>store name</td></tr>
<tr><td>99999</td><td>another store name</td></tr>
<tr><td>54321</td><td>yet another name</td></tr>
<tr><td>34343</td><td>4th name</td></tr>
<tr><td>87898</td><td>fifth name</td></tr>
</table>
<br />
<input type="text" id="searchterm" placeholder="search"></input>

Insert a "tag x" in variations chart if without stock

I want to insert a (x) inside variations without stock (quantity="0")
i'm working inside a ecommerce plataform that not have support for this.
my codes JS: (helped by the forum)
/*var buttons = "";
$("select option").each(function () {
buttons += "<input type='button' value='" + this.value + "'/>";
});
$("select").replaceWith(buttons);
*/
var selectName = $('select').attr('name');
// add a hidden element with the same name as the select
var hidden = $('<input type="hidden" name="'+selectName+'">');
hidden.val($('select').val());
hidden.insertAfter($('select'));
$("select option").unwrap().each(function() {
var btn = $('<div class="btn">'+$(this).text()+'</div>');
if($(this).is(':checked')) btn.addClass('on');
$(this).replaceWith(btn);
});
HTML + CSS EMBED:
<!-- Variações -->
<iluria.if.product.has.variations>
<div class="product-variations-container">
$iluria.product.variations
</div>
<script src="variations.js"></script>
<style>
*.product-variations-container > div:nth-child(4) { display: none; }*
div.btn {display: inline-block;border: 2px solid #ccc;margin-right: 5px;padding: 2px 5px;cursor: pointer;}
div.btn.on {background-color: #777;color: white;}
</style>
</iluria.if.product.has.variations>
$(document).on('click', '.btn', function() {
$('.btn').removeClass('on');
$(this).addClass('on');
$('input[name="'+selectName+'"]').val($(this).text());
});
Forum suggest to insert this
Screen that i want:
Link of one product "P" + "M" have stock, "G" not
Link product: http://www.hdmclothing.com.br/pd-3d1b01-sainha-azul.html
Thanks!

jQuery search from the begining of input of value in first column

I have a very simple dynamic table search script
What I'm trying to figure out is, how do I make it search from the begining of the value?
eg. I only want it to show the row with the word london in it if one were to search it as lo or lon, currently if you type in on, or ondon it'll return true.
also with this example, how do I force it to only search the first column of each row?
$(document).ready(function() {
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').hide();
$('table tbody tr').filter(':contains("' + text + '")').show();
}
});
});
th {
cursor: pointer;
text-align: left;
}
td {
width: 100px;
}
input[type="text"] {
padding: 10px 5px;
margin: 25px 0;
font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
<input type="text" placeholder="search somethingn" />
</div>
<table id="items">
<thead>
<th>item</th>
<th>something else</th>
</thead>
<tbody>
<tr>
<td>london</td>
<td>test</td>
</tr>
<tr>
<td>new york</td>
<td>test 2</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/8p4w62pe/

There is no built in startsWith selector, but you can write your own:
$.extend($.expr[":"], {
"startsWith": function(elem, i, data, set) {
var text = $.trim($(elem).text()),term = data[3];
return text.indexOf(term) === 0;
},
});
You will also need to change your selector to select the td (not the tr). To only select the first td add :first-child to the selector. Then change the show() to apply to the parent using parent():
$('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();
Full code:
$(document).ready(function() {
$.extend($.expr[":"], {
"startsWith": function(elem, i, data, set) {
var text = $.trim($(elem).text()),term = data[3];
return text.indexOf(term) === 0;
},
});
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').hide();
$('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();
}
});
});
Working JS Fiddle

You can loop each of the row, get the first column and then hide the whole row if substring can't be found
$(document).ready(function() {
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').each(function() {
if($(this).find("td:first-child").html().indexOf(text) === -1) {
$(this).hide();
}
});
}
});
});

jQuery how to auto adjust the number list when 1 of the list is removed?

I want to automatically adjust the number list that was created using .append(). Example, if there are 4 items added on the list which will numbered from 2-4 respectively and if I removed item number 3, the item number 4 will automatically be number 3 and if I add a new item, it will be the last on the list. Here's my code below.
$('#display').click(function() {
$('#show').show();
});
var c = 1;
$('#append').click(function() {
var cnt = $('.cnt').val();
for (var i = 0; i < cnt; i++) {
c++;
$('#inputs').append("<div id='inputs' name='" + c + "'>" + c + ".)<button id='remove' name='" + c + "'>X</button></div>");
}
});
$(document).on('click', '#inputs #remove', function() {
var nm = $(this).attr('name');
$('div[name="' + nm + '"]').remove();
c--;
});
#show {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
<br>
<input type='text' class='cnt' value='1' placeholder="num of append" />
<button id='append'>+</button>
<br>
<div id='inputs'>
1.)
</div>
</div>
Here is the jsfiddle of the code.

here is your answer
Fiddle Here
$('#display').click(function() {
$('#show').show();
});
var c = 1;
$('#append').click(function() {
var cnt = $('.cnt').val();
for (var i = 0; i < cnt; i++) {
c++;
$('#inputs').append("<div class='inputs' name='" + c + "'><span class='number'>" +c + "</span>.)<button class='remove' name='" + c + "'>X</button></div>");
}
});
$(document).on('click', '#inputs .remove', function() {
var nm = $(this).attr('name');
$('div[name="' + nm + '"]').remove();
c--;
resetCount();
});
function resetCount(){
$('#inputs div.inputs').each(function(i){
$('.number', $(this)).text(i+2);
$('input', $(this)).attr('name', i+2);
});
}
#remain,
#total {
background-color: #333;
width: 60px;
height: 20px;
color: #fff;
padding: 0 10px;
}
input:focus {
background-color: #000;
color: #fff;
}
input {
background-color: #ccc;
}
#show {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='display'>Display</button>
<div id='show'>
<br>
<input type='text' class='cnt' value='1' placeholder="num of append" />
<button id='append'>+</button>
<br>
<div id='inputs'>
1.)
</div>
</div>

You should not be using the same ID for different elements
Also the way you could do this is by creating a function that resets the elements counting after each add/delete event
When creating and appending elements in jQuery its better to use this syntax:
$('<ELEMENT TAG/>',{
ATTRIBUTE: VALUE
});
When looping through elements in jQuery its better to use $.each
$('#append').on('click', function(){
$('<div/>', {
'class': 'inputs',
html: '<span class="count"></span><input type="text" class="time" name="0" value="00:00:00"/><button>X</button>'
}).appendTo('#inputs');
resetInputsCount();
});
$('#inputs').on('click', '.inputs button', function(){
var $this = $(this);
$this.parent().remove();
resetInputsCount();
});
//The function that resets the count span text and the name value based on the current count of elements
function resetInputsCount(){
//looping through elements
$('#inputs div.inputs').each(function(i){
//caching the current element in a var named $this
var $this = $(this);
//changing the count span text to i+2 the 2 is added because the index starts at 0 and there is already one element 1.)
$('.count', this).text((i+2) + '.) ');
//change the value of the input name
$('input', $this).attr('name', i+2);
});
}
Demo on JSFiddle

I know theres an answer already but since I did the work I might as well post it.
Here's the fiddle for the example
here's the code:
Html
<div id='button'>
<span>Add</span>
</div>
<div id='content'></div>
CSS
#button span {
padding: 5px 15px;
background: #ccc;
cursor: pointer;
}
#button {
margin: 5px 0;
}
.delete {
cursor: pointer;
padding: 0 5px;
border: 1px solid gray;
}
jQuery
$(document).ready(function() {
var index = 1;
$('#button').on('click', function() {
var add = '<div class="new"><span class="number">' + index + '</span><input type="text"/><span class="delete">x</span></div>';
$('#content').append(add);
index++;
});
$(document).on('click', '.delete', function() {
index--;
$(this).parent().remove();
var index2 = 1;
var newelement = $('.new');
$(newelement).each(function() {
$(this).find('.number').text(index2);
index2++;
});
});
});

Using your html structure and adding some input fields (to be sure we maintain values)
Here is my approach:
(Also fixed duplicate id and names you have)
$('#display').click(function() {
$('#show').show();
});
var c = 1;
var inputs = [];
$('#append').click(function() {
var cnt = $('.cnt').val();
for (var i=0; i<cnt; i++) {
c++;
$div = $("<div id='input"+c+"' />").data('index', c);
$span = $("<span />").text(c+".)");
$button = $("<button class='input_remove' />").text("X");
$input = $("<input type='text' class='small' />").attr("name","input"+c);
$div.append($div).append($span).append($input).append($button);
$('#inputs').append($div);
}
});
$(document).on('click', '.input_remove', function() {
index = $(this).parent().data('index');
$("#inputs").find('#input'+index).remove();
c = 1;
$("#inputs").find('div').each(function(index,ele){
c++;
$(ele).attr('id',"input"+c).data('index',c)
.find("span").text(c+".)").end()
.find("input").attr("name","input"+c);
});
});
#show {
display: none;
}
.small { width:100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
<br>
<input type='text' class='cnt' value='1' placeholder="num of append" />
<button id='append'>+</button>
<br>
<div id='inputs'>
1.)
</div>
</div>

How to dynamically create table in html with certain constraints?

i want to take input from user(number) and display image as many times as number.If user inputs 5 then the image should be displayed 5 times next to each other with corresponding number below the images-Below 1st image '1' 2nd Image '2'.Basically putting this table in loop.
<HTML>
<BODY>
<TABLE>
<TR>
<TD>
<IMG SRC="C:/Users/User/Desktop/RE/G.JPG">
</TD>
</TR>
<TR><TD ALIGN="CENTER">1</TD>
</TABLE>"
</BODY>
</HTML>

You can use jQuery for this task and write a function that generates HTML with a dynamic value:
Complete Solution
<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function generateTable(number) {
return "<table><tr><td>" +
"<img src='C:/Users/User/Desktop/RE/G.JPG'></td></tr><tr><td align='center'>" +
number +
"</td></table>";
}
$(function(){
var userInput = 3;
for (var i = 0; i < userInput; i++) {
$('#dynamic').append(generateTable(i + 1));
}
});
</script>
</head>
<body>
<div id='dynamic'></div>
</body>
</html>

You can add an input and a button to trigger the function.
You could also check if the inserted value is actually a number or not.
$(document).on('click', '#add', function() {
var that = $(this);
var times = parseInt($('#times').val());
for (i=1;i<=times;i++) {
$('#table-wrp').append('<table class="table-times"><tbody><tr><td><img src="http://code52.org/aspnet-internationalization/icon.png" /></td></tr><tr><td>' + i + '</td></tr></tbody></table>');
}
});
$(document).on('input', '#times', function() {
var that = $(this);
var value = that.val();
if ((value != '' || value != false) && !isNaN(value)) {
$('#add').prop('disabled', false);
} else {
$('#add').prop('disabled', true);
}
});
#table-wrp {
height: 80px;
}
.table-times {
width: 100px;
height: 80px;
float: left;
border-collapse: collapse;
}
.table-times td {
border: 1px solid #d8d8d8;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="textbox" id="times" />
<button id="add" disabled>Add</button>
<div id="table-wrp"></div>

Or for a pure javascript version of Pugazh's answer
var tab = "<div></div>";
var num = prompt("Enter a number");
for(i = 0; i < num; i++){
document.getElementById('tab').innerHTML += "<div><div><img src='http://placehold.it/150x150'></div><div></div></div>";
}
img{
float: left;
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
height: 100px;
width: 100px;
margin: 10px;
}
<div id="tab"></div>
This will work just as well, but doesn't require jQuery as well.

<HTML>
<BODY>
<div id="tbl"></div>
</BODY>
</HTML>
<script>
var num = prompt("Enter a number");
var div=document.getElementById("tbl");
var l1='',l2="";
for(i=0;i<num;i++)
{
l1 += '<td><img src="C:/Users/User/Desktop/RE/G.JPG"></td>';
l2 += '<td>'+i+'</td>';
}
div.innerHTML = "<table><tr>"+l1+"</tr><tr>" + l2 + "</tr></table>";
</script>

Try this
$(function() {
var tab = "<div></div>";
var num = prompt("Enter a number");
for (i = 0; i < num; i++) {
$("#tab").append("<div class='left'><div><img src='http://placehold.it/150x150'></div><div>" + (i + 1) + "</div></div>");
}
});
div.left {
display: inline-block;
margin-right: 5px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="tab">
</div>
</body>
</html>