We Keep Coding

How do I keep buttons visible when searching table rows in javascript?

Basically where I have the 3 buttons 1, 2, and 3 in the second column first row if I type 3 the only button shows up is 3....removing buttons 1 and 2
for example if I'm looking for text with "2" in it it should still show
I want all buttons to stay regardless if they show up in the search or not...can this be achieved?
I have atleast 4 columns visible at all times and I want to search ONLY the text in the < TD > not the element text in the < TD > so radio buttons, buttons, check boxes....I want those to be immune from searches always show them as long as that particular row has the text snippet in one of the columns of that row just search the text in < TD >
Googling the right phrase has led me here because google assumes I want a checkbox to search a table....NO....I want a search to only focus on text not element text if that makes sense
Thanks
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
document.querySelectorAll('#myTable 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 id="myTable" border="2">
<thead><tr>
<th>Col1</th>
<th>Col2</th>
</tr></thead>
<tbody>
<tr><td>2</td><td>
<table>
<tr><td>2<button type="button">1</button></td></tr>
<tr><td>5<button type="button">2</button></td></tr>
<tr><td>9<button type="button">3</button></td></tr>
</table></td></tr>
<tr><td>test4</td><td><button type="button">5</button></td></tr>
</tbody>
</table>

If you do not want to hide the sub table rows your selector needs to only touch the outside table.
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
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 id="myTable" border="2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>
<table>
<tr>
<td>2<button type="button">1</button></td>
</tr>
<tr>
<td>5<button type="button">2</button></td>
</tr>
<tr>
<td>9<button type="button">3</button></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test4</td>
<td><button type="button">5</button></td>
</tr>
</tbody>
</table>

how to select a range of html table cell value in javascript?

Please help!
I have a html table and for example I want to select the first 4 cell value of the table but I don't know how.
I tried:
var table = document.getElementById("td")
selectedCell = table.cells[0:4]
javascript does not understand this way.

You can access a cell by its row index and cell index like this:
var table = document.getElementById('table1')
for(let rowIndex = 0; rowIndex < 2; rowIndex++){
for(let cellIndex = 0; cellIndex < 2; cellIndex++){
console.log(table.rows[rowIndex].cells[cellIndex]);
}
}
<table id="table1" style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>March</td>
<td>$70</td>
</tr>
<tr>
<td>April</td>
<td>$160</td>
</tr>
</table>
if you give some sample data and an expected output I can use it to help you to make adjustment to this.

Hide empty html table rows

Problem
I have a table with one or more empty rows. How to hide empty rows from the table?
For example
1 - John | Alfredo
2 - Mark | Zuck
3 - |
4 - Carl | Johnson
In this case, I'd like to delete the third row.
Step Tried
I found how to delete a specific row, what about deleting all the empty rows?
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable")
var rowToDelete = 2;
myTable.deleteRow(rowToDelete)
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>

This is how you can dynamically hide empty table rows with javascript.
deleteEmptyRows();
function checkIfCellsAreEmpty(row) {
var cells = row.cells;
var isCellEmpty = false;
for(var j = 0; j < cells.length; j++) {
if(cells[j].innerHTML !== '') {
return isCellEmpty;
}
}
return !isCellEmpty;
}
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
for(var i = 0; i < myTable.rows.length; i++) {
var isRowEmpty = checkIfCellsAreEmpty(myTable.rows[i]);
if (isRowEmpty) {
myTable.rows[i].style.display = "none";
}
}
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>

Here, a simple method for row is empty (this allows us to check for other conditions easily later).
Loop over rows and call remove if empty.
const rowIsEmpty = (tr) => Array.from(tr.querySelectorAll('td')).every(td => td.innerText === "");
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
myTable.querySelectorAll('tr').forEach(tr => {
if(rowIsEmpty(tr)) tr.remove();
});
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Was answered in another thread.
Jquery: hiding empty table rows
Loops through all table tr rows, and checks td lengths. If the td length is empty will hide.
$("table tr").each(function() {
let cell = $.trim($(this).find('td').text());
if (cell.length == 0){
console.log('Empty cell');
$(this).addClass('nodisplay');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
</tr>
<tr>
<!-- Will hide --> <td></td>
</tr>
</table>

With native Javascript:
function removeRow(src) {
var tableRows = document.getElementById(src).querySelectorAll('tr');
tableRows.forEach(function(row){
if((/^\s*$/).test(row.innerText)){
row.parentNode.removeChild(row);
}
});
}
removeRow('myTable');
The only problem is when you have some other characters in the row, except the whitespaces. This regex checks for blank characters, but if u have a dot inside or any other non empty character, it will fail.

How do I iterate a tables rows and pass a specific cell value to an array when a checkbox is checked?

I am trying to allow a user to select table rows with a checkbox, once they select the rows and click on a button I want row id text to be stored in an array.
Here is the HTML code for the table to give you an idea of the structure:
<table id="test" class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Location</th>
<th>Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>The Name</td>
<td>The Location</td>
<td><input type="checkbox" class="checkbox" /></td>
</tr>
<tr>
<td>2</td>
<td>The Name</td>
<td>The Location</td>
<td><input type="checkbox" class="checkbox" /></td>
</tr>
<tr>
<td>3</td>
<td>The Name</td>
<td>The Location</td>
<td><input type="checkbox" class="checkbox" /></td>
</tr>
</tbody>
</table>
So as you can see there is an ID column and each row has a checkbox for selection. The concept is that you click on the checkbox to choose the rows you want and that will pass the ID values from the selected rows to an array.
I am half way there but I can't get the checkbox part to work at all. Here is my javascript code to demonstrate my approach to this.
var table = $('#test').not('thead tr'),
rows = table.find('tr:not(:has(th))').get(),
ids = [],
rowcount = rows.length,
r,cells,cellcount,c,cell;
//Rows
for (r = 0; r < rowcount; r++) {
cells = rows[r].cells;
cellcount = cells.length;
var checkbox = $(rows).find(".checkbox");
//Cells
for (c = 0; c < cellcount; c++)
{
cell = cells[c];
var content = cells[0].innerHTML;
if(checkbox.is(":checked")) {
ids.push(content);
}
}//cells
//ids.push(content);
}//rows
//This is the button that will grab the array that's been populated by the checkboxes.
$('#go').on('click', function() {
console.log(ids);
})

If your ID is always in the first column
//Get all the checked checkboxes
var checkboxes = $('#test tbody input:checked');
//Loop through every checkbox
for (let i = 0; i < checkboxes.length; i++){
// <input> <td> <tr> <td>
ids.push(checkboxes[i].parentElement.parentElement.firstChild.innerHTML);
}

Javascript: Delete a specific table cell when it is clicked

I was working on a university project. They told us to make 2 arrays. The first will have 3 cells with 3 images, and the second will be empty with 1 row.
I need to remove the image from the cell clicked each time in the first table and copy it to the second table!
My problem is that deleteCell() function will only delete the first element each time. I don't know how to delete the CLICKED cells from my table row!
My JS:
var table1 = document.getElementById("myTable");
var table2 = document.getElementById("myTable2");
function DL1() {
var row = document.getElementById("myRow1");
row.deleteCell();
}
function CR2() {
var row = document.getElementById("myRow2");
}
My HTML:
<table id="myTable" class="auto-style1">
<tr id="myRow1">
<td onclick="DL1()"><img src="../../2.jpg" /></td>
<td onclick="DL1()"><img src="../../1.gif" /></td>
<td onclick="DL1()"><img src="../../3.png" /></td>
</tr>
</table>
<table id="my2Table">
<tr id="myRow2"></tr>
</table>

var table1=document.getElementById("myTable");
var table2=document.getElementById("myTable2");
function DL1(elem){
var row = document.getElementById("myRow1");
for(i=0;i<row.children.length;i++) {
if(row.children[i]==elem) {
row.deleteCell(i);
row2=document.getElementById("myRow2");
row2.appendChild(elem);
}
}
}
<td onclick="DL1(this)"><img src="http://placehold.it/100x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/150x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/200x100"/></td>
Demo: https://jsfiddle.net/Lt2cyw0g/2/
So, you need to get index of clicked element (pass it to the function, and check index, and use it in deleteCell() function), then add element to the second table row...

Just pass clicked element to the function:
var table1 = document.getElementById("myTable");
var table2 = document.getElementById("myTable2");
function DL1(td) {
td.parentNode.removeChild(td);
}
function CR2() {
var row = document.getElementById("myRow2");
}
<table id="myTable" class="auto-style1">
<tr id="myRow1">
<td onclick="DL1(this)">
<img src="../../2.jpg" />
</td>
<td onclick="DL1(this)">
<img src="../../1.gif" />
</td>
<td onclick="DL1(this)">
<img src="../../3.png" />
</td>
</tr>
</table>
<table id="my2Table">
<tr id="myRow2"></tr>
</table>

Hope it helps, no need ID:
var a = document.querySelectorAll("table tr");
for(var b in a){
var c = a[b];
if(typeof c == "object"){
c.onclick = function (){
this.offsetParent.deleteRow(this.rowIndex);
}
}
}
<table >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>b</td></tr>
</table>
<table>
<tr><td>a</td><td>aa</td><td>aa</td></tr>
<tr><td>b</td><td>bb</td><td>bb</td></tr>
<tr><td>c</td><td>cc</td><td>cc</td></tr>
</table>