We Keep Coding

retrieving just one value from the DOM with 100 datas listed through JS

I am trying to get just one ID when I click the Delete button, but I am receiving the whole list of it. Here is how I tried with jQuery. (solutions in both js and jquery is welcome)
the DOM :-
<tbody>
<tr class="tablerow">
<td class="delete"> </td>
<td class="id"></td>
</tr>
</tbody>
appending the data to the DOM (100 data is being fetched):-
let apiGetter = JSON.parse(localStorage.getItem('data'));
apiGetter.map((item,index) => {
del.append('<li> DELETE </li>');
id.append(`<li> ${item.id}</li>`);
}
My Solution that is listing all the ids that are in the DOM. (i want the id of the button that's clicked on)
$('.delete').click(function() {
let id = $(this).next('.id').text();
console.log(id); // 0 1 2 3 4 5 6 ... 98 99 100
})

Follow this code
HTML
<table>
<thead>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="delete" data-id="1">Delete</td>
</tr>
<tr>
<td>2</td>
<td class="delete" data-id="2">Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td class="delete" data-id="3">Delete</td>
</tr>
</tfoot>
</table>
Jquery
$(document).on('click','.delete',function(){
alert($(this).data('id'));
})
CSS
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
It very easy and it will work.

JQuery html table search by many attributes

I would like to search by three attributes on each row.
I am able to search by one attribute, like this:
var rows = $("#tbl1 > tbody > tr[cName=1]");
But this throws error:
var rows = $("#tbl1 > tbody > tr[cName=1,cLastN=2]");
How to search by all three attributes?
$("#btn1").click(function(){
debugger;
var rows = $("#tbl1 > tbody > tr[cName=1]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr cName='1' cLastN='2' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='2' cLastN='2' cMiddleN='4'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='5' cLastN='7' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button id="btn1">Search</button>

.You need to include the attribute selectors separately, depending on your requirement. If you want to select any element with either attribute (ie. OR logic) use this:
var rows = $('#tbl1 > tbody > tr[cName="1"], #tbl1 > tbody > tr[cLastN="2"]');
Whereas if you want elements with both attributes (ie. AND), use this:
var rows = $('#tbl1 > tbody > tr[cName="1"][cLastN="2"]');
Also be aware that you're using completely non-standard attributes which can cause issues with JS. I'd suggest changing them to data-* attributes instead.

You can use commas (,) to perfom OR selectors
$("#btn1").click(function(){
debugger;
var rows = $("#tbl1 > tbody > tr[cName=1] , #tbl1 > tbody > tr[cName=2], #tbl1 > tbody > tr[cName=3]");
console.log(rows)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr cName='1' cLastN='2' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='2' cLastN='2' cMiddleN='4'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr cName='5' cLastN='7' cMiddleN='3'>
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button id="btn1">Search</button>

I want to add a class attribute to row of table and remove this attribute from other sibling row by jquery

I want to add a class="selected" attribute to a row click by user and remove this attribute from other siblings. Because I will get this row by its class attribute on a button click. I have tried so many j Queries but no j Query is working. Please give me a solution which can help me out.
This is my table on loading the page
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>121</td>
<td>register121</td>
<td>34344</td>
</tr>
</tbody>
</table>

$('tr').click(function() {
$('tr').removeClass('selected'); //remove the class from all tr
$(this).addClass('selected'); //add to clicked tr
})
.selected {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
</tbody>
</table>

using jQuery:
var lastSelected;
$("table tr").click(function() {
$(lastSelected).removeClass("selected");
$(this).addClass("selected");
lastSelected = this;
});
jsFiddle

You can do it in following way:
$(document).ready(function() {
$("#saptable tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
.selected {
background: gray
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
<tr>
<td>
222
</td>
<td>
register222
</td>
<td>
78778
</td>
</tr>
</tbody>
</table>

There is a siblings() method to search for siblings.
$("#saptable tbody > tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});

You can first remove class from all tr and then add to the current.
$('#saptable tbody tr').click(function(){
$('#saptable tbody tr').removeClass('selected');
$(this).addClass('selected');
});
You can keep the last selected row and remove the selected only from this row instead of removing from all rows. It will be more efficient solution.
$prevRow = null;
$('#saptable tbody tr').click(function(){
if($prevRow != null)
$prevRow.removeClass('selected');
$(this).addClass('selected');
$prevRow = $(this);
});

Can't display a third column in my HTML table (drilldown functionality jQuery / JavaScript ) [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm working on this HTML Table with drilldown functionality, it works for one column but I cant display a third column, I want to click on subcategory column and display another column but Im stuck in this part .
This is my JS code
function toggleVisibilitySubcategory() {
$('table.drillDown th:nth-child(2)').toggle();
$('table.drillDown tbody td:nth-child(2)').toggle();
}
function toggleVisibilityItem() {
$('table.drillDown th:nth-child(3)').toggle();
$('table.drillDown tbody td:nth-child(3)').toggle();
}
$(function () {
toggleVisibilitySubcategory();
toggleVisibilityItem();
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
console.log( "click on parent" );
$(this).nextUntil('.parent').toggle();
if ($(this).find("td:hidden").length > 0) {
toggleVisibilitySubcategory();
}
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').click(function() {
$childRows.hide();
});
$table.find('button.show').click(function() {
$childRows.filter('.child').show();
});
$table.find('tr.child').click(function(){
$(this).nextUntil('.child').show()
});
});
});
This is the HTML table.
<table class="drillDown" border="1" align="center">
<thead>
<th>Category</th>
<th>Subcategory</th>
<th>Item</th>
<th>LW</th>
</thead>
<tbody>
<!--PARENT ROW-->
<tr class="parent">
<td>Category 1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="child" >
<td> </td>
<td>Subcategory_1 A
<td>a</td>
<td></td>
</tr>
<tr class="child">
<td> </td>
<td>Subcategory_1 B</td>
<td>a</td>
<td></td>
</tr>
</tbody>
</table>

My solution is to create a new toggle function to hide/show last table column and use it likes in the followig snippet:
function toggleVisibilitySubcategory() {
$('table.drillDown th:nth-child(2)').toggle();
$('table.drillDown tbody td:nth-child(2)').toggle();
}
$(function () {
toggleVisibilitySubcategory();
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
console.log( "*****Click on Parent" );
$(this).nextUntil('.parent').toggle();
if ($(this).find("td:hidden").length == 1) {
toggleVisibilitySubcategory();
}
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').click(function() {
$childRows.hide();
});
$table.find('button.show').click(function() {
$childRows.filter('.child').show();
});
$table.find('tr.child').click(function(){
$(this).nextUntil('.child').show()
});
});
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table class="drillDown" border="1" align="center">
<colgroup>
<thead>
<tr>
<th>Category</th>
<th>Subcategory</th>
</tr>
</thead>
</colgroup>
<tbody>
<!--PARENT ROW-->
<tr class="parent">
<td>Category 1</td>
<td colspan="2">$12,345.45</td>
</tr>
<tr class="child" >
<td> </td>
<td colspan="2">Subcategory_1 A</td>
</tr>
<tr class="child">
<td> </td>
<td colspan="2">Subcategory_1 B</td>
</tr>
<!--PARENT ROW-->
<tr class="parent">
<td>Category 2</td>
<td colspan="2">$135,754.99</td>
</tr>
<tr class="child" >
<td> </td>
<td colspan="2">Subcategory_2 A</td>
</tr>
<tr class="child">
<td> </td>
<td colspan="2">Subcategory_2 B</td>
</tr>
<tr class="child">
<td> </td>
<td colspan="2">Subcategory_2 C</td>
</tr>
<tr class="parent">
<td>Catgegory 3</td>
<td colspan="2">$232,563.46</td>
</tr>
<tr class="child" >
<td> </td>
<td colspan="2">Subcategory_3 A</td>
</tr>
<tr class="child">
<td> </td>
<td colspan="2">Subcategory_3 B</td>
</tr>
<tr class="child">
<td> </td>
<td colspan="2">Subcategory_3 C</td>
</tr>
</tbody>
</table>

You mean like this: https://jsfiddle.net/az0w2c8a/
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})
Alternatively if you need to add additional columns to your table you can use either ':nth-child()'
$('.drillDown tr td:nth-child(2), .drillDown tr th:nth-child(2)').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
$('.drillDown tr td:nth-child(2), .drillDown tr th:nth-child(2)').show();
})
if you need to hide all columns except the first one you can use the '.not()' method.
$('.drillDown tr td, .drillDown tr th').not(':first-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
$('.drillDown tr td, .drillDown tr th').not(':first-child').show();
})

Remove only the tr on the tbody

I have an html which, of course, have a table element, and in the tbody, I have a button that will delete rows of the table.
I have assigned an onclick="" function to the button. (Function here)
How to delete only the rows on the body of the table (tbody), and not the row in the head of the table (thead) ?
FIDDLE HERE

Wrap body rows to tbody element and than you can to select only table tbody tr to be removed. With jQuery you can do $('table tbody tr').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
</tbody>
</table>
<button onClick="$('#table tbody tr').remove()">Remove all rows</button>