Develop Reference

jquery - show / hide elements rows by elemenst in data-id array

I have table with rows like that:
<tr class="listRow" data-id="[11,0]">...</tr>
<tr class="listRow" data-id="[1,2,3]">...</tr>
How i can using JQuery filter specific rows with element in array? For example by button click show all rows with 1 in array and hide rest.
Edit - my sample code so far:
i don't know how to filtering elements in data-id array.
$(document).on('click','#filterList',function()
{
var element = $(this).data("id");
// how to filter elements in rows
}
);

If i understand correctly:
$('#check').click(function() {
$('.listRow').each(function() {
if($.inArray(1, $(this).data().id)>-1) {
$(this).show();
}
else {
$(this).hide()
}
});
});
$('#check').click(function() {
$('.listRow').each(function() {
if($.inArray(1, $(this).data().id)>-1) {
$(this).show();
}
else {
$(this).hide()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr class="listRow" data-id="[1,0]">
<th class="tg-0pky">Here is 1</th>
<th class="tg-0pky">xxxx</th>
<th class="tg-0pky"></th>
<th class="tg-0pky"></th>
</tr>
</thead>
<tbody>
<tr class="listRow" data-id="[11,0]">
<td class="tg-0pky">Not 1</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr class="listRow" data-id="[15,0]" >
<td class="tg-0pky">Not 1</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr class="listRow" data-id="[1,0,3]">
<td class="tg-0pky" >Here is 1</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
</tbody>
</table>
<button id="check">
Click
</button>

when you press the button, loop through all the elements that have a data-id
parse the data-id as json, which will give you an array
if the array includes the id you're looking for, set the class to hide or show (where they have the display css assigned accordingly)
here's what that might look like without jquery and using style and opacity. Usually it's done using class but this is for demonstration purposes, changing to use classes should be straight forward.
function findElsById(id){
var matches = []
document.querySelectorAll('[data-id]').forEach(function(el){
try{
var arr = JSON.parse(el.dataset.id)
if (arr.includes(id)) matches.push(el)
} catch (e){
// prolly not valid json
}
})
return matches
}
function show(id){
var els = findElsById(id);
console.log('show', id, '\nshowing: ', els)
if (els) {
els.forEach(function(el){
el.style = 'opacity:1'
})
}
}
function hide(id){
var els = findElsById(id);
console.log('hide', id, '\nhiding: ', els)
if (els) {
els.forEach(function(el){
el.style = 'opacity:0.1'
})
}
}
<table>
<tr class="listRow" data-id="[1,0]"><td>1, 0</td></tr>
<tr class="listRow" data-id="[1,2]"><td>1, 2</td></tr>
</table>
<button onclick="hide(0)">-0</button>
<button onclick="hide(1)">-1</button>
<button onclick="hide(2)">-2</button>
<button onclick="show(0)">+0</button>
<button onclick="show(1)">+1</button>
<button onclick="show(2)">+2</button>

JQuery/JavaScript - Perform calculations on 2 cells in each row and return results to 3rd cell in each row

I am attempting to do some calculations on two cells in each row (each has a unique class) and return the results to a third cell (has its own class as well). I have put each class into its own array and I am able to access the elements within. I am not entirely sure I am evening approaching this the right way, any help would be much appreciated. The math is (sub1 - sub2) / sub2
Here is my JSFiddle and here is my html for my table:
var sub1 = [];
var sub2 = [];
var sub3 = [];
$(function subP() {
$('.sub1').each(function(i, e) {
sub1.push($(e).text());
});
$('.sub2').each(function(i, e) {
sub2.push($(e).text());
});
$('.sub3').each(function(i, e) {
sub3.push($(e).text());
});
var x = (sub1[0] - sub2[0]) / sub2[0];
$('.sub3:first').html(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<th>test0</th>
<th>test1</th>
<th>test2</th>
<tr>
<td class="sub1">1</td>
<td class="sub2">2</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">3</td>
<td class="sub2">4</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">5</td>
<td class="sub2">6</td>
<td class="sub3">0</td>
</tr>
</tbody>
</table>

You haven't loaded the jQuery library in your fiddle. That's why your code doesn't work, otherwise your code does something. It gets the result of calculation and sets it to all .sub3 elements.
This is one way of getting the expected result.
$('.sub3').text(function() {
var $this = $(this);
var sub1 = +$this.siblings('.sub1').text();
var sub2 = +$this.siblings('.sub2').text();
return ((sub1 - sub2) / sub2).toFixed(2);
});

Here's a way to do it
var sub1 = [];
var sub2 = [];
var sub3 = [];
$(function subP() {
$('.sub1').each(function(i, e) {
sub1.push($(e).text());
});
$('.sub2').each(function(i, e) {
sub2.push($(e).text());
});
$('.sub3').each(function(i, e) {
var x = (sub1[i] - sub2[i]) / sub2[i];
$(this).html(x);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<th>test0</th>
<th>test1</th>
<th>test2</th>
<tr>
<td class="sub1">1</td>
<td class="sub2">2</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">3</td>
<td class="sub2">4</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">5</td>
<td class="sub2">6</td>
<td class="sub3">0</td>
</tr>
</tbody>
</table>

jQuery - Remove and group from HTML table

i have a dynamic table like this:
<table cellspacing="0" cellpadding="0">
<col width="80" span="3">
<tr id="id-1">
<th colspan="3" width="240">TITLE-1</th>
</tr>
<tr>
<td>val-1</td>
<td>val-2</td>
<td>val-3</td>
</tr>
<tr id="id-1">
<th colspan="3">TITLE-1</th>
</tr>
<tr>
<td>val-2</td>
<td>val-2</td>
<td>val-3</td>
</tr>
<tr id="id-2">
<th colspan="3">TITLE-2</th>
</tr>
<tr>
<td>val-1</td>
<td>val-2</td>
<td>val-2</td>
</tr>
</table>
In this table is 3 TR element with same ID. i want to remove all TR except first TR.
If not is duplicate IDs nothing change with this TR.
And i need also: in TR's is 3 td's. result must be next. if value is same group this td's:
<tr>
<td>val-2</td>
<td>val-2</td>
<td>val-3</td>
</tr>
result
<tr>
<td colspan="2">val-2</td>
<td>val-3</td>
</tr>
tnx

i changed id > class
$(".idxx:gt(0)").remove();

I did a function to parse tr's and td's. See here http://jsfiddle.net/mig1098/qo4xvqjm/ :
var mapTable={
_tr:function(){
var tabletr = $('table tr');
var compareid = '';
tabletr.each(function(){
var id = $(this).attr('id');
if(typeof id != 'undefined'){
if(compareid == ''){
compareid = id;
}else if(compareid == id){
$('#'+id).next().remove();
$('#'+id).remove();
}
}
});
},
_td:function(){
tabletr = $('table tr');
tabletr.each(function(){
var tdtext = {"obj":"","txt":"","count":1};
console.log($(this).find('th').text());
$(this).find('td').each(function(){
var td = $(this);
if(tdtext.txt == ''){
tdtext.txt = td.text();
tdtext.obj = td;
}else if(tdtext.txt == td.text()){
tdtext.count +=1;
td.hide();
td.addClass('todelete');
}else{
//before to change
tdtext.obj.attr('colspan',tdtext.count);
//
tdtext = {"obj":td,"txt":td.text(),"count":1};
}
});
if(tdtext.count > 1){
tdtext.obj.attr('colspan',tdtext.count);
}
$('.todelete').remove();
});
},
init(){
mapTable._tr();
mapTable._td();
}
}

Unable to remove rows from table

I am having the table with following data in it
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>
I would like to delete the row based on the particular data given in table.
But I don't have any idea on how to delete the rows based on the particular data

Try this:
var table = document.querySelector('table');
var filterInput = document.querySelector('#filter');
filterInput.onkeyup = function () {
var val = this.value;
var td = table.getElementsByTagName('td');
var rows = [];
[].slice.call(td).forEach(function (el, i) {
if (el.textContent === val) {
rows.push(el);
}
});
rows.forEach(function(el) {
el.parentNode.style.display = 'none';
});
};
<input type="text" id="filter" placeholder="Hide row containing...">
<table>
<tr>
<td>cat</td>
<td>dog</td>
</tr>
<tr>
<td>hen</td>
<td>cock</td>
</tr>
</table>

Find the required element and then use style property to hide it. In the example, I went onto hide the table data element corresponding to the data dog.
var tds = $("td");
for(var i =0 ; i< tds.length ; i++)
{
var tdval = tds[i].innerHTML;
if(tdval.trim()=="dog")
{
document.getElementsByTagName("td")[i].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>

php id of element td inside of td

i have that table, i would like to take ID's of the td's inside of all of the elements of td by php or JS.
Can you help me ?
<table id="czytelnicy">
<tr>
<td class="kolumna pogrubienie">I</td>
<td class="kolumna pogrubienie" id="B_1_1">B_1_1</td>
<td class="kolumna" id="B_1_2">B_1_2</td>
<td class="kolumna" id="B_1_3">B_1_3</td>
<td class="kolumna" id="B_1_4">B_1_4</td>
<td class="kolumna" id="B_1_5">B_1_5</td>
<td class="kolumna" id="B_1_6">B_1_6</td>
<td class="kolumna" id="B_1_7">B_1_7</td>
<td class="kolumna" id="B_1_8">B_1_8</td>
<td class="kolumna pogrubienie" id="B_1_9">B_1_9</td>
<td class="kolumna" id="B_1_10">B_1_10</td>
<td class="kolumna" id="B_1_11">B_1_11</td>
<td class="kolumna pogrubienie" id="B_1_12">B_1_12</td>
<td class="kolumna" id="B_1_13">B_1_13</td>
</tr>
</table>

USE JQUERY
var index = 1;
$("table#czytelnicy tr td").each(function(){
$(this).attr('id', 'B_1_'+index+'');
index++;
});

Using Plain JavaScript
var ids = document.getElementsByTagName('td');
var id_arr = [];
for(var i = 0; i<ids.length; i++) {
id_arr.push(ids[i].id);
}
console.log(id_arr);
OUTPUT
["", "B_1_1", "B_1_2", "B_1_3", "B_1_4", "B_1_5", "B_1_6", "B_1_7", "B_1_8", "B_1_9", "B_1_10", "B_1_11", "B_1_12", "B_1_13"]
Fiddle here

Using JQuery. You can put every id in an array.
var idArray = [];
$("table#czytelnicy tr td").each(function(){
idArray.push($(this).attr("id"));
});
return idArray
Working Fiddle
You can return it or do whatever you want. Hope I helped.

$('.kolumna').each(function(){
alert($(this).attr('id'));
});
//this give all id under that class