I'm trying to write a jQuery takes the value from the between the tags to be an attribute named data-row-key="xx"
my html looks like this:
<table id="linksgrid">
<thead>
</thead>
<tbody>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
but I need to look like this:
<table id="Table1">
<thead>
</thead>
<tbody>
<tr class="grid-row" data-row-key="1">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row" data-row-key="2">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
noticed the added attribute to the tag,
any help or hint to point me in the right direction will be greatly appreciated, thanks
UPDATE
before I posted the question i tried
$('td[data-name="BrokenLink_ID"]').each(function() {
var id = $(this).text();
var table = document.getElementById('linksgrid');
var rows = table.rows;
for (var i = 0, 1 = rows.lenght; i < l; i++) {
rows[i].data = id
}
});
$('#linksgrid tr').each(function() {
$(this).data('row-key', $(this).text());
// or $(this).attr('data-row-key', $(this).text());
});
Something like this:
$('.grid-cell').each(function() {
$(this).parent().attr('data-row-key', $(this).text());
});
// run a function on each instance of .grid-row
$('.grid-row').each(function() {
// grab the text from the current child .grid-cell
var myAttrVal = $(this).find('.grid-cell').text();
// add the attribute to this row
$(this).attr('data-row-key', myAttrVal);
});
Select all tr elements and add a data-row-key value as follows:
$('#linksgrid tbody tr').data('row-key', function() {
return $('td', this).text();
});
$('.grid-row').each(function() {
var no = $(this).children('td').text()
$(this).attr('data-row-key', no);
});
$('.grid-cell').each(function(){ // loop through each grid-cell
var currentValue = $(this).text(); // get its text
$(this).closest('.grid-row').attr('data-row-key', currentValue); // add the attribute to the grid-cell's parent
});
Related
<table>
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>
In the above code, I want to know the position of Aman using its id
You can try something like this:
html:
<table id="myTable">
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>
js:
function getIdFromTable(searchValue)
{
var t = document.getElementById("myTable");
var trs = t.getElementsByTagName("tr");
var tds = null;
for (var i=0; i<trs.length; i++)
{
tds = trs[i].getElementsByTagName("td");
for (var n=0; n<tds.length;n++)
{
if (tds[n].innerText === searchValue) {
return tds[n].id;
}
}
}
}
getIdFromTable('Aman'); // will return 2
Easiest way to find position by id would be using prevAll().length. Something like this:
function findPositionById(id){
return $('#mytable').find('#'+id).prevAll().length
}
console.log('Adi Position', findPositionById(1));
console.log('Aman Position', findPositionById(2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="mytable">
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>
<table class="table table-hover">
<thead>
<tr><th> Block</th>
<th>Size</th></tr>
</thead>
<tbody id="poolTable" class="tbody">
<tr>
<td>78</td>
<td>18</td>
</tr>
<tr>
<td>52</td>
<td>21</td>
</tr>
<tr>
<td>54</td>
<td>19</td>
</tr>
</tbody>
</table>
Hi, I want to filter the html table data by using jquery,
can anyone try to resolve this please!!
Please try bellow JavaScript for to get content of each td
$("#filter").keyup(function(){
var filter = $(this).val();
$("#poolTable > tr").each(function(e){
cells = this.cells;
for(i=0; i< cells.length; i++){
alert(cells[i].innerHTML);
}
});
})
function filter(){
var text = $('#search').val();
$('#poolTable tr').show();
if (text != "") {
$('#poolTable tr td.number').each(function() {
if ($(this).text().indexOf(text) >= 0) {
$(this).parent().show();
return true;
} else {
$(this).parent().hide();
}
});
This works. Here number is the class name of td. It only filters the single column.
You can try this
https://sunnywalker.github.io/jQuery.FilterTable/
It is a jQuery plugin that will allow you to filter your table.
I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?
Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});
you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.
The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.
Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.
hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});
I want to get the entire column of a table header.
For example, I want to select the table header "Address" to hide the address column, and select the "Phone" header to show the correspondent column.
<table>
<thead>
<tr>
<th id="name">Name</th>
<th id="address">Address</th>
<th id="address" class='hidden'>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>Nightmare Street</td>
<td class='hidden'>123</td>
</tr>
<tr>
<td>Luis</td>
<td>Lost Street</td>
<td class='hidden'>3456</td>
</tr>
</tbody>
I want to do something like http://www.google.com/finance?q=apl (see the related companies table) (click the "add or remove columns" link)
Something like this would work -
$('th').click(function() {
var index = $(this).index()+1;
$('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide()
});
The code above will hide the relevant column if you click on the header, the logic could be changed to suit your requirements though.
Demo - http://jsfiddle.net/LUDWQ/
With a couple simple modifications to your HTML, I'd do something like the following (framework-less JS):
HTML:
<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input>
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input>
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input>
<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy</td>
<td>Nightmare Street</td>
<td>123</td>
</tr>
<tr>
<td>Luis</td>
<td>Lost Street</td>
<td>3456</td>
</tr>
</tbody>
Javascript:
var cb = document.getElementsByClassName("chk");
var cbsz = cb.length;
for(var n = 0; n < cbsz ; ++n) {
cb[n].onclick = function(e) {
var idx = e.target.getAttribute("data-index");
toggleColumn(idx);
}
}
function toggleColumn(idx) {
var tbl = document.getElementById("tbl");
var rows = tbl.getElementsByTagName("tr");
var sz = rows.length;
for(var n = 0; n < sz; ++n) {
var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx];
el.style.display = el.style.display === "none" ? "table-cell" : "none";
}
}
http://jsfiddle.net/dbrecht/YqUNz/1/
I added the checkboxes as it doesn't make sense to bind the click to the column headers as you won't be able to toggle the visibility, only hide them.
You can do something with CSS, like:
<html>
<head>
<style>
.c1 .c1, .c2 .c2, .c3 .c3{
display:none;
}
</style>
</head>
<body>
<table class="c2 c3">
<thead>
<tr>
<th id="name" class="c1">Name</th>
<th id="address" class="c2">Address</th>
<th id="phone" class="c3">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c1">Freddy</td>
<td class="c2">Nightmare Street</td>
<td class="c3">123</td>
</tr>
<tr>
<td class="c1">Luis</td>
<td class="c2">Lost Street</td>
<td class="c3">3456</td>
</tr>
</tbody>
</table>
</body>
</html>
To hide a column, you add with Javascript the corresponding class to the table. Here c2 and c3 are hidden.
You could add dynamically the .c1, .c2,... in a style tag, or define a maximum number.
The easiest way to do this would be to add a class to each td that matches the class of the header. When you click the , it checks the class, then hides every td with that class. Since only the s in that column would hide that class, it would effectively hide the column.
<table>
<thead>
<th>Name</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td class="Name">Joe</td>
<td class="Address">123 Main St.
</tbody>
</table>
And the script something like:
$('th').click( function() {
var col = $(this).html(); // Get the content of the <th>
$('.'+col).hide(); // Hide everything with a class that matches the col value.
});
Something like that, anyway. That's probably more verbose than it needs to be, but it should demonstrate the principle.
Another way would be to simply count how many columns over the in question is, and then loop through each row and hide the td that is also that many columns over. For instance, if you want to hide the Address column and it is column #3 (index 2), then you would loop through each row and hide the third (index 2).
Good luck..
Simulating the Google Finance show/hide columns functionality:
http://jsfiddle.net/b9chris/HvA4s/
$('#edit').click(function() {
var headers = $('#table th').map(function() {
var th = $(this);
return {
text: th.text(),
shown: th.css('display') != 'none'
};
});
var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
$.each(headers, function() {
h.push('<th><input type=checkbox',
(this.shown ? ' checked ' : ' '),
'/> ',
this.text,
'</th>');
});
h.push('</tr></thead></table></div>');
$('body').append(h.join(''));
$('#done').click(function() {
var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
$.each(showHeaders, function(i, show) {
var cssIndex = i + 1;
var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
if (show)
tags.show();
else
tags.hide();
});
$('#tableEditor').remove();
return false;
});
return false;
});
jQuery('thead td').click( function () {
var th_index = jQuery(this).index();
jQuery('#my_table tbody tr').each(
function(index) {
jQuery(this).children('td:eq(' + th_index + ');').each(
function(index) {
// do stuff here
}
);
}
);
});
here's a working fiddle of this behaviour:
http://jsfiddle.net/tycRW/
of course, hiding the column with out hiding the header for it will have some strange results.