How to check no element remained? - javascript

Here is my code:-
$("span").on('click', function() {
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $(this).closest("table").find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
As you see, when I remove one element (there are still some other element), but there is not any element appears. Why? And how can I fix it?


When $(this).closest("tr").remove(); executes the element is removed from DOM to scope of this is completely lost.
Store the reference of table before removing the row, then perform the remove operation.
var table = $(this).closest("table");
$("span").on('click', function() {
//Store the reference of table before removing the row.
var table = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>


Since you removed the clicked span so:-
var remained_trs = $(this).closest("table").find("span");
will be undefined (because $(this) is unrecognisable now), that's why code is not working.
Need to do like below:-
$("span").on('click', function () {
var table = $(this).closest("table");//get clicked span table and create it's object
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if ( remained_trs.length < 1 ) {
table.html('there is not any element'); // change html of corresponding table not the body
}
});
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<td>Four</td>
<td><span>×</span></td>
</tr>
<tr>
<td>Five</td>
<td><span>×</span></td>
</tr>
<tr>
<td>Six</td>
<td><span>×</span></td>
</tr>
</table>
Note:-Also instead of $('body').html('there is not any element'); use table.html('there is not any element'); (since you have multiple tables)


you are deleting current row before getting next thats why it happen
$("span").on('click', function() {
var nearTable = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = nearTable.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>


You are removing the parent element of the element you are clicking, so $(this) doesn't exist when you are trying to find the other spans. You need to cache the closest table by doing
var $closestTable = $(this).closest("table");
DEMO
$("span").on('click', function() {
var $closestTable = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $closestTable.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>


you are deleting current row before getting next thats why it happen
$("span").on('click', function () {
var table = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if ( remained_trs.length < 1 ) {
$('body').html('there is not any element');
}
});


check for table rows instead of the span you are deleting and referring to!
$("span").on('click', function () {
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $('#table1 tr').length;
if ( remained_trs < 1 ) {
$('body').html('there is not any element');
}
})
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>

Related

How to show filter result number in jQuery?

I'm working with a common Jquery filter, but It's not Showing total find or result number. I tried, but it showing wrong result. Another fact it when I clear the input field, it should clear the number too. Rather it showing more false number. Please look at my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search.." tada-table="a">
<br><br>
<p id="search-result-num"></p>
<table class="a">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Aram</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("input").on("keyup", function() {
var valThis = this.value;
$("table").find("tr td").each(function() {
if ($(this).attr("data-search") !== "false") {
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(valThis.toLowerCase());
var regex = new RegExp(valThis, "ig");
text = text.replace(regex, (match, $1) => {
// Return the replacement
return "<mark>" + match + "</mark>";
});
/*This is what I'm trying to show */
var num = text.length;
$("#search-result-num").html(num);
$(this).html(text);
if (position !== -1) {
setTimeout(function() {
if ($(this).parent().find("mark").is(":empty")) {
$("mark").remove();
}
}.bind(this), 0);
} else {
$(this).text(text);
}
}
if ($(this).parent().find("mark").length > 0) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
});
</script>
Why it not showing exact or correct result number ? And when I clear the input field, the number should clear. Rather it showing more wrong number.

You can add this to the end of your keyup function:
$("#search-result-num").text($('table tbody tr:visible').length);
This will count the visible rows in your table body.
Hope this is what your looking for.
Demo
$("input").on("keyup", function() {
var valThis = this.value;
$('table').find('tr td').each(function() {
if ($(this).attr('data-search') !== 'false') {
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(valThis.toLowerCase());
var regex = new RegExp(valThis, 'ig');
text = text.replace(regex, (match, $1) => {
// Return the replacement
return '<mark>' + match + '</mark>';
});
$(this).html(text);
if (position !== -1) {
setTimeout(function() {
if ($(this).parent().find('mark').is(':empty')) {
$('mark').remove();
}
}.bind(this), 0);
} else {
$(this).text(text);
}
}
if ($(this).parent().find('mark').length > 0) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
$("#search-result-num").text((valThis.length > 0 ? $('table tbody tr:visible mark').length : ""));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search.." tada-table="a">
<br><br>
<p id="search-result-num"></p>
<table class="a">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Aram</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>

Jquery from ouput element highlight matching element in table row

How to highlight
Victor and Steve....(and other from #output if is change)
Html
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
jquery
var gg = $('#output').text();
$(document).ready(function(){
$('table tr').each(function(){
if($(this).find('td').eq(1).text() == gg){
$(this).css('background','red');
}
});
});
here the JSFiddle

You can use includes() to check if string contains sub-string.
var gg = $('#output').text();
$('table tr').each(function() {
if (gg.includes($(this).find('td').eq(1).text())) {
$(this).css('background', 'red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>Victor</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>Steve</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>Michael</td>
<td>17</td>
</tr>
<tr>
<td>9</td>
<td>Michaela</td>
<td>20</td>
</tr>
</table>

If you change your jQuery to this:
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
That should solve it.
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
This is converting the gg variable into an array of names and then inside the each function we're checking if the name is in the array.

A "functional" style solution
var gg = $('#output').text()
$(document).ready(function(){
$('table tr').css('background', function(){
return (gg.indexOf($(this).find('td').eq(1).text())>=0 )? 'red' : 'transparent';
})
});

Deleting a user selected column in a html table using javascript ( no jQuery)

I have implement the following code to delete a column in a html table. I want to be able to implement this when the user selects a certain column rather than just the last column being deleted all the time - can anyone help ?
function deleteColumn(){
var lastColumn = document.getElementById('Overall Result');
var table = document.getElementById('tg-LTO9U');
var rowCount = table.rows.length;
for(var i=0;i<rowCount;i++){
table.rows[i].deleteCell(table.rows[i].cells.length-2);
}
}
Delete Column

UPDATED 2021
Delegate instead
window.addEventListener("load", function() {
const table = document.getElementById("myTable")
table.querySelectorAll("th").forEach((th, i) => th.innerHTML += ` <sup><a href="#" data-idx="${i}" class="del" >X</a></sup>`);
table.addEventListener("click", function(e) {
const tgt = e.target.closest("a");
if (tgt && tgt.classList.contains("del")) {
const idx = tgt.dataset.idx;
[...table.rows].forEach(row => row.cells[idx].remove());
}
})
})
sup {
font-size: xx-small
}
.del {
text-decoration: none
}
<table id="myTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>

Show table row in a same color

I want the color of a row depending on the value
Here is the code: but always takes the first color.
$(document).ready(function() {
$('#myTable td.xs').each(function() {
if ($(this).text() < 10) {
$(this).closest('tr').css('background-color', 'green');
} else {
$(this).closest('tr').css('background-color', 'red');
}
});
});
html:
<tr class="xs">
<td class="xs">5/td>
<td class="xs">10</td>
<td class="xs">12</td>
</tr>

In your case, all the <td>s share the same <tr>, so the last color set by the loop will win (red in your example, because the last <td> has 25). So either you need to change the colour of the <td> or you need to put the <td>s in their individual <tr>s, or you need to be more specific about which <td> in the <tr> you want to use.
Option 1: Change colour of <td>:
$(document).ready(function() {
$('#myTable td.xs').each(function() {
if ($(this).text() < 10) {
$(this).css('background-color', 'green');
} else {
$(this).css('background-color', 'red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="xs">
<td class="xs">5</td>
<td class="xs">10</td>
<td class="xs">12</td>
</tr>
</table>
Option 2: Individual <tr>:
$(document).ready(function() {
$('#myTable td.xs').each(function() {
if ($(this).text() < 10) {
$(this).closest('tr').css('background-color', 'green');
} else {
$(this).closest('tr').css('background-color', 'red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="xs">
<td class="xs">5</td>
</tr>
<tr class="xs">
<td class="xs">10</td>
</tr>
<tr class="xs">
<td class="xs">12</td>
</tr>
</table>

Make entire column disappear

How can I make the left column in a table disappear using plain JS?
This is my approach:
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
<script>
var tab, td;
window.onload = function() {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "none";
i++;
}
}
function vis() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "block";
i++;
}
}
</script>
It works, but I have to use "ugly" loops.
Maybe there is a more efficient way by just saying column[0].display = "none".
Here is the fiddle.

Take advantage of CSS hierarchy and nth-child selectors.
Use selector tr td:nth-child(1) to select all the first column td elements.
JSfiddle
var tab;
// Use DOMContentLoaded instead of load event
document.addEventListener('DOMContentLoaded', function() {
tab = document.getElementById('tab');
});
function inv() {
tab.classList.add('hide');
}
function vis() {
tab.classList.remove('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
Demo using toggle with single button.
function toggle() {
document.getElementById('tab').classList.toggle('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="toggle()">Toggle</button>

By the use of some empty css classes and jQuery, you are able to achieve that in a one-liner:
<table id="tab" border="1">
<tr>
<td class="col1">abc</td>
<td class="col2">def</td>
</tr>
<tr>
<td class="col1">ghi</td>
<td class="col2">jkl</td>
</tr>
<tr >
<td class="col1">mno</td>
<td class="col2">pqr</td>
</tr>
</table>
now you can just do:
jQuery(".col1").hide();
(mind the selector with a dot before the class name)

The most efficient solution would be to inject and remove a stylesheet and let the browser do the work.
Fiddle: https://jsfiddle.net/4L4h7ea1/2/
var tab, td;
var hideFirstColumnCss = document.createElement('style');
hideFirstColumnCss.setAttribute('id', 'hideCssStyle');
hideFirstColumnCss.innerHTML = '#tab td:first-child { display: none; }';
window.onload = function () {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
document.head.appendChild(hideFirstColumnCss);
}
function vis() {
var style = document.getElementById('hideCssStyle');
style.parentNode.removeChild(style);
}

Use the row tags to get to your cells to hide/show them. That way you can specify an index for the row as all cells are direct children of their row.
var tab, td;
window.onload = function () {
tab = document.getElementById("tab");
tr = tab.getElementsByTagName("tr");
}
function inv() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "none";
}
}
function vis() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "block";
}
}

Categories