Develop Reference

AlpineJS loop inside loop to add table row

I need help to solve this problem, i know AlpineJs must use something for "fragments", its fine when i workin on div, but when i do loop table row, and have another row, it become a problem, because i cant use div for the fragment. is there any solution?
here's my code
<template x-for="data in data">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data2 in data.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data3 in data2.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
</template>
</template>
</template>

How to add numbers in a <td> to an array only if another <td> contains certain text

I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!

To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>

Javascript code for limit selection of icons onclick eventlistener

I have the following HTML; I have tried to write some JavaScript to select up to 14 icons, and toggle the class from "text-muted" to "text-primary". After 14 icons have been selected it will become disabled, and no more toggle between the classes will work.
If we select the 14 icons after deselecting it will again allow me to select one more to complete the 14 but not more than 14.
var icons = document.getElementsByClassName("fa-baby");
for (int i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function() {
if (icons[i] === 14 || icons[i] > 14) {
this.style.classList.add("text-muted");
} else {
this.style.classList.toggle("text-primary");
}
})
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<table class="table ">
<tbody>
<tr>
<td>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane2" name="octane2">
<option value="Mar 2019">Mar 2019</option>
<option value="Apr 2019">Apr 2019</option>
<option value="Mai 2019">Mai 2019</option>
<option value="Jun 2019">Jun 2019</option>
<option value="Jul 2019">Jul 2019</option>
<option value="Aug 2019">Aug 2019</option>
<option value="Sep 2019">Sep 2019</option>
<option value="okt 2019">Okt 2019</option>
<option value="Nov 2019">Nov 2019</option>
<option value="Dez 2019">Dec 2019</option>
<option value="Jan 2020">Jan 2020</option>
<option value="Feb 2020">Feb 2020</option>
<option value="March 2020">Mar 2020</option>
<option value="March 2020">Apr 2020</option>
</select>
<label class="mdl-textfield__label" for="octane2">Geschlecht</label>
</div>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>April 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>May 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>June 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>July 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>Auguest 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>Setember 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>October 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>November 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>December 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>January 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>Febuary 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>March 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>April 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
</tbody>
</table>

I now created a basic example which should do what you want. Instead of using the text-primary and text-muted I used a specific CSS class to colourize. This is how the JS could look like so that you can achieve what you want:
var icons = document.getElementsByClassName("fa-baby");
for (let i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function() {
let ctn = document.getElementsByClassName("green").length;
if (this.classList.contains("green")) {
this.classList.remove("green");
}else if(ctn < 14){
this.classList.add("green");
}
});
}
You have to determine the count of selected elements e.g. green and check on the current count every time you click on an element. I added this new CSS class to better demonstrate the selection as for me the text-muted and text-primary didn't get the correct result. Maybe I did some mistake but even thought this highlighting is better for demonstration. A final solution might adapt the CSS class adding and removing. Additionally the code can probably be simplified or improved. It should only be a food for thought.
.green{
color: green;
}
Here is the full fiddle:
https://jsfiddle.net/khwd9tam/

the "Best " answer ... :)
const
MaxBabys = 14
,
iconBabys = document.querySelectorAll('td>i.fa-baby') // Be precise, babies can be anywhere!
,
BabysCount = {
count : 0,
onClick(e)
{
let ClassElm = e.target.classList;
if (ClassElm.contains('text-primary'))
{
ClassElm.remove('text-primary');
ClassElm.add('text-muted');
this.count--;
}
else if (MaxBabys > this.count)
{
ClassElm.remove('text-muted');
ClassElm.add('text-primary');
this.count++;
}
else
{ alert(` Babies limit ! (${MaxBabys})`) }
}
}
;
iconBabys.forEach( Baby_X=>{
Baby_X.addEventListener('click', e=>{BabysCount.onClick(e)})
});
for info :
iconBabys.forEach( Baby_X=>{...
is equivalent to :
for (let i=0, iMax=iconBabys.length; i <iMax ; i++)
{
let Baby_X = iconBabys[i];
Baby_X.addEventListener("click", function(e){
BabysCount.onClick(e)
})
}
const
MaxBabys = 14
,
iconBabys = document.querySelectorAll('td>i.fa-baby') // Be precise, babies can be anywhere!
,
BabysCount = {
count : 0,
onClick(e)
{
let ClassElm = e.target.classList;
if (ClassElm.contains('text-primary'))
{
ClassElm.remove('text-primary');
ClassElm.add('text-muted');
this.count--;
}
else if (MaxBabys > this.count)
{
ClassElm.remove('text-muted');
ClassElm.add('text-primary');
this.count++;
}
else
{ alert(` Babies limit ! (${MaxBabys})`) }
}
}
;
iconBabys.forEach( Baby_X=>{
Baby_X.addEventListener('click', e=>{BabysCount.onClick(e)})
});
table { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif }
th { background-color:teal; color: yellow;padding: 10px; font-size: 24px }
td { background-color: rgb(228, 224, 224); padding: 0 10px; font-size: 12px}
td p { margin: 8px; font-size: 18px}
.text-muted { color:lightslategrey }
.text-primary { color:green }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<table class="table ">
<thead>
<tr> <th colspan="3">Geschlecht</th> </tr>
</thead>
<tbody>
<tr>
<td><p>March 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>April 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>May 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>June 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>July 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>Auguest 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>Setember 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>October 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>November 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>December 2019</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>January 2020</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>Febuary 2020</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>March 2020</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
<tr>
<td><p>April 2020</p></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
<td><i class="text-muted fas fa-baby fa-2x"></i></td>
</tr>
</tbody>
</table>

There are some problems with your code. The var i your are trying to catch is changing, when firing the click events. I added an data attribute... Try something like this:
document.addEventListener("DOMContentLoaded", function() {
var icons = document.getElementsByClassName("fa-baby");
for (var i = 0; i < icons.length; i++) {
icons[i].setAttribute("data-i", i);
icons[i].addEventListener("click", function () {
var index = parseInt(this.getAttribute("data-i"));
if (index < 14) {
this.classList.add("text-muted");
} else {
this.classList.toggle("text-primary");
}
});
}
});

Search table and return correct table rows on button click using javascript/jQuery and the contents of the 'search' bar

Basically I currently have a search bar that works using a .keyup() function and the correct row/s are returned and the others hidden as the user enters a value. I am trying to learn how to do this (using .click() but my jQuery/javascript knowledge isn't too strong). Can someone help me adapt my current function to work so that the contents of the search bar is only used to search the table when the search button is clicked and not as a user is typing. Thanks a lot in advance.
HTML:
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button>Search</button>
</div>
Search Function:
<script>
$("#search").keyup(function(){
_this = this;
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
</script>

First, add an ID to your search button :
<button id="search-button">Search</button>
Then add the click event to your jQuery code.
Try this :
$("#search-button").click(function(){
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button id="search-button">Search</button>
</div>

Let's start adding an id attribute to your search button:
<button id="doSearch">Search</button>
Then in your javascript function just bind a closure on the button click event:
$("doSearch").on('click', function() {
var needle = $('#search').val().toLowerCase();
$.each($("#table tbody tr"), function() {
var haystack = $(this).text().toLowerCase();
if(haystack.indexOf(needle) == -1)
$(this).hide();
else
$(this).show();
});
});
In the code above I've even made a little improvement saving the "needle" value just once. In your snippet everytime $.each loops it has to find the DOM element, get the value and make it lowercase.

id to add search button
<button id="btn_search">Search</button> //add id
.find('td:eq(0)') gets the value of the column of the table (name)
$("#btn_search").on('click', function() {
$("table tbody tr").each(function(index) {
if($(this).find('td:eq(0)').text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
})

Collapsible table change chevron icon on click

I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});