I have one table with first numeric column:
<table id="toppings" border="1" cellpadding="2">
<tr id="id1">
<td>3</td>
<td>row12</td>
<td>row13</td>
</tr>
<tr id="id2">
<td>12</td>
<td>row22</td>
<td>row23</td>
</tr>
<tr id="id3">
<td>15</td>
<td>row32</td>
<td>row33</td>
</tr>
<tr id="id4">
<td>22</td>
<td>row42</td>
<td>row43</td>
</tr>
<tr id="id5">
<td>23</td>
<td>row52</td>
<td>row53</td>
</tr>
<tr id="id6">
<td>55</td>
<td>row62</td>
<td>row63</td>
</tr>
</table>
How can I get first value/column of row on clicking row.
I found following example doing the same.
http://www.vbforums.com/showthread.php?522104-HTML-table-on-click-event
But I don't want to add event to each row manually as my table is having billions of records. Please help me. How can I get the row value (first column) on clicking row?
$("#toppings tr").click(function(){
alert( $(this).children().closest("td").html());
});
fiddle:
http://jsfiddle.net/k1ezbcrk/
example for one row could be
<tr id="id2">
<td>12</td>
<td>row22</td>
<td>row23</td>
</tr>
<script>
function getColumnValue(elem){
alert(elem.innerHTML);
}
</script>
$("#toppings tr").click(function(){
alert( $(this).children().first().html());
});
You could use event delegation
var table = document.getElementsByTagName('table')[0];
function getValue(){
console.log(event.target.parentElement.firstElementChild.innerText);
}
table.addEventListener('click', getValue, false);
Related
I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.
To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});
You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>
I started on that http://jsfiddle.net/DRFBG/
And if I add tables so mytable1, mytable2,...
<table id="mytable1" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>
<table id="mytable2" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>
How could I uniform my javascript code for all tables?
I've already tried passing by table[div^=mytable]*, but the problem is the second selector in the function.
So any ideas please? Thank you? Sorry for my english
By the way, the code is to remove th with empty td for each table
$('#mytable2 th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable2 tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
One approach is, selecting tables first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:
$('table').each(function()
{
var tb_id = $(this).attr('id');
$('#'+tb_id+' th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#'+tb_id+' tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
});
Here is the working jsfiddle
To select all on your page you can use "table" selector.
So you'd need to use $('table2 th') instead of $('#mytable2 th')
One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.
Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:
$('table').each(function() {
var $table = $(this);
var rows = $table.find('tr').length - 1; // -1 to account for the headings
$table.find('th').each(function(i, th) {
var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
if ($empty.length == rows)
$empty.add(this).addClass('to-remove');
})
$table.find('.to-remove').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td></td>
<td>1</td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td></td>
<td>2</td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td></td>
<td>3</td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td></td>
<td>4</td>
</tr>
</table>
<table id="mytable2" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td>1</td>
<td></td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td>2</td>
<td></td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td>3</td>
<td></td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td>4</td>
<td></td>
</tr>
</table>
I have a table with many rows, each row has each own id. I want when i hover the row, i can get it's ID (i will process php to get the data), and append to the div (div will fade out after hover).
<table id="listtemp" class="table datatable">
<thead>
<tr>
<th>Số PO</th>
<th>Số hợp đồng</th>
<th>Số hóa đơn</th>
<th>Doanh nghiệp</th>
<th>Người mua</th>
<th>Sales</th>
<th>Ngày tạo</th>
<th>Tình trạng</th>
<th>Chi tiết</th>
</tr>
</thead>
<tbody>
<?php
for($i = 0; $i < 10; $i++){
?>
<tr id="<?=$i;?>">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php } ?>
</tbody>
</table>
Using JQuery bind table tr hover and just get id from that.
$('#waypointsTable tr').hover(function() {
console.log($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="waypointsTable" border="1">
<tbody>
<tr id="1">
<td>some text</td>
</tr>
<tr id="2">
<td>some text</td>
</tr>
<tr id="3">
<td>some text</td>
</tr>
</tbody>
</table>
Here you go with an example of getting Id on hover https://jsfiddle.net/r6tbv9uz/
$('table tbody tr').hover(function(){
console.log($(this).attr('id'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="1">
<td>test</td>
</tr>
<tr id="2">
<td>test</td>
</tr>
<tr id="3">
<td>test</td>
</tr>
<tr id="4">
<td>test</td>
</tr>
</tbody>
</table>
best way is to write a hover function
$('#table tr').on('hover',function(){
var id = $(this).attr('id');
})
It will be better if you use mouseenter event rather than hover because hover event will be triggered when you will take your pointer on the row and when you will leave it.
So it will initiate your php request two times when you enter your pointer on a row and when you leave. And so, probably it will leave the info DIV there on the row and it will not fadeout.
Instead use mouseenter like this:
$('table tbody tr').on('mouseenter',function(){
var id = $(this).attr('id');
});
In the beiginning add class hidden to tbody.
<script>
$("#listtemp tr").hover(function (){
id = $(this).attr('id');
$.ajax({
type: 'POST',
dataType: 'json',
url: 'name of php file to get data',
data: { id: id }, //sending id to php file
success: function(response) {
$('tbody').removeClass('hidden');
$('tbody').fadeOut();
}
});
});
})
</script>
I Need to delete a table row with pure javascript. The table has only a class name, no id.
Here is a fiddle with my first try:
var table = document.getElementsByClassName('table');
while(table.rows.length > 0) {
table.deleteRow(1);
}
https://jsfiddle.net/5s0w6cwL/
Thanks for any advice.
You have to get first element.
var table = document.getElementsByClassName('table')[0];
because document.getElementsByClassName method returns a NodeList.
var table = document.getElementsByClassName('table')[0];
table.deleteRow(1);
<table class="table" border="1">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td>delete me</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<div class="NewsResultsList">
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>No Results</td>
</tr>
</table>
</div>
I need to hide the second row and the third row.
$('div.NewsResultsList table tr:eq(1)').hide();
$('div.NewsResultsList table tr:eq(2)').hide();
That didn't do it? What is wrong?
Here are a couple of ways to do it:
jsBin demo
$('.NewsResultList tr:gt(0)').hide();
$('.NewsResultList tr').slice(-2).hide();
$('.NewsResultList tr').not(':eq(0)').hide();
$('.NewsResultList tr td:contains("No")').parent('tr').hide();
$('.NewsResultList tr').not(':first').hide();
$('.NewsResultList tr').eq(-1).hide().end().eq(-2).hide();
$('.NewsResultList tr:last').prev().andSelf().hide();
Use this Script:
<script type="text/javascript">
$(document).ready(function (e) {
$('.NewsResultsList tr:eq(1)').hide();
$('.NewsResultsList tr:eq(2)').hide();
});
</script>
You spelled NewsResultList wrong in your jQuery call. ("NewsResultsList")... ;)
You have wrong selctors to get to that table rows:
It should actually be
$('div table tr:eq(1)').hide();
$('div table tr:eq(2)').hide();
DEMO
Two issues:
You have NewsResultsList in your selector, but the class is NewsResultList. The two don't match.
And, you are missing a </td> in the table.
Fix those two issues and it works here: http://jsfiddle.net/jfriend00/pfemk/
Try this for in your html/PHP:
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr class="hideMe">
<td> </td>
<td></td>
</tr>
<tr class="hideMe">
<td>No Results</td>
</tr>
</table>
</div>
and this in your jQuery/javascript:
$('#something').click( function() {
$('.hideMe').hide();
});