I am in the home stretch of my table updating software..... The problem is when I have search filled with some information and it shows the correct rows....the moment I click a + or - button the entire table redraws......
How can I click the buttons and keep everything filtered?
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
//if (search_length == 0)
//{
// location.reload();
//}
document.querySelectorAll('#myTable > tbody > tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
//fix the button issue here
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
function increment(editableObj,column,qty,id,increase_value){
var increase_value;
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
//alert(column);
//var input=document.getElementById("myInput");
//var myTable=document.getElementById("myTable");
// alert(column);
if(qty=='')
{
qty=0
}
increase_value=parseInt(qty) + parseInt(increase_value);
$(editableObj).css("background","#FFF url(../include/loaderIcon.gif) no-repeat right");
//alert(increase_value);
$.ajax({
url: "edit.php",
type: "POST",
//data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
data:'column='+column+'&editval='+increase_value+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
//location.reload();
//table.ajax.reload();
$("#myTable").load(" #myTable > *");
//alert(inputStr);
document.querySelectorAll('#myTable > tbody > tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
//fix the button issue here
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
});
}<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type to search">
<!--table class="tbl-qa"-->
<table id="myTable" border = "2" class="sortable">
<caption>test</caption>
<thead>
<tr class="header">
<th width="150px" data-tablesort-type="string">Name</th>
<th width="150px" class="table-sort">Location</th>
<th width="150px" class="table-sort">Diameter</th>
<th width="150px" class="table-sort">Length</th>
<th width="150px" class="table-sort">Qty</th>
<th width="150px" class="table-sort">Price</th>
<th width="150px" class="table-sort">Extended Price</th>
<th width="150px" class="table-sort">Action</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="table-row" id="table-row-9855">
<td height="75px" contenteditable="true" onBlur="saveToDatabase(this,'name','9855')" onClick="editRow(this);">1</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'location','9855')" onClick="editRow(this);">2</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'diameter','9855')" onClick="editRow(this);">3</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'length','9855')" onClick="editRow(this);">4</td>
<td>
<table width=98%><tr><td>
<table><tr>
<td contenteditable="true" onBlur="saveToDatabase(this,'qty','9855')" onClick="editRow(this);">2</td>
</tr></table>
</td><td align=right><table margin=0px>
<tr><td>
<button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','-1');">--</button></td>
<td align="center">1</td>
<td><button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','1');">+</button></td>
</tr>
<tr><td>
<button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','-2');">--</button></td>
<td align="center">2</td>
<td><button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','2');">+</button></td>
</tr>
<tr><td>
<button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','-3');">--</button></td>
<td align="center">3</td>
<td><button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','3');">+</button></td>
</tr>
<tr><td>
<button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','-5');">--</button></td>
<td align="center">5</td>
<td><button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','5');">+</button></td>
</tr>
<tr><td>
<button id="button"9855 class="edit_100button" type="button" onclick="increment(this,'qty','2','9855','-100');">--</button></td>
<td align="center">100</td>
<td><button id="button"9855 class="edit_100button" type="button" onclick="increment(this,'qty','2','9855','100');">+</button></td>
</tr>
<tr><td>
<button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','-1000');">--</button></td>
<td align="center">1000</td>
<td><button id="button"9855 class="edit_button" type="button" onclick="increment(this,'qty','2','9855','1000');">+</button></td>
</tr>
</table>
</td></tr></table>
</td>
<!--td contenteditable="true" onBlur="saveToDatabase(this,'price',$'9855')" onClick="editRow(this);"></td>
-->
<td contenteditable="true" onBlur="saveToDatabase(this,'price','9855')" onClick="editRow(this);">$5</td>
<td> $10.00 <td><a class="ajax-action-links" onclick="deleteRecord(9855);">Delete</a></td>
</tr>
<tr class="table-row" id="table-row-9856">
<td height="75px" contenteditable="true" onBlur="saveToDatabase(this,'name','9856')" onClick="editRow(this);">test</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'location','9856')" onClick="editRow(this);">test</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'diameter','9856')" onClick="editRow(this);">5</td>
<td contenteditable="true" onBlur="saveToDatabase(this,'length','9856')" onClick="editRow(this);">6</td>
<td>
<table width=98%><tr><td>
<table><tr>
<td contenteditable="true" onBlur="saveToDatabase(this,'qty','9856')" onClick="editRow(this);">2</td>
</tr></table>
</td><td align=right><table margin=0px>
<tr><td>
<button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','-1');">--</button></td>
<td align="center">1</td>
<td><button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','1');">+</button></td>
</tr>
<tr><td>
<button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','-2');">--</button></td>
<td align="center">2</td>
<td><button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','2');">+</button></td>
</tr>
<tr><td>
<button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','-3');">--</button></td>
<td align="center">3</td>
<td><button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','3');">+</button></td>
</tr>
<tr><td>
<button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','-5');">--</button></td>
<td align="center">5</td>
<td><button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','5');">+</button></td>
</tr>
<tr><td>
<button id="button"9856 class="edit_100button" type="button" onclick="increment(this,'qty','2','9856','-100');">--</button></td>
<td align="center">100</td>
<td><button id="button"9856 class="edit_100button" type="button" onclick="increment(this,'qty','2','9856','100');">+</button></td>
</tr>
<tr><td>
<button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','-1000');">--</button></td>
<td align="center">1000</td>
<td><button id="button"9856 class="edit_button" type="button" onclick="increment(this,'qty','2','9856','1000');">+</button></td>
</tr>
</table>
</td></tr></table>
</td>
<!--td contenteditable="true" onBlur="saveToDatabase(this,'price',$'9856')" onClick="editRow(this);"></td>
-->
<td contenteditable="true" onBlur="saveToDatabase(this,'price','9856')" onClick="editRow(this);">$4</td>
<td> $8.00 <td><a class="ajax-action-links" onclick="deleteRecord(9856);">Delete</a></td>
</tr>
</tbody>
</table>