We Keep Coding

Show div with information for the current table row hover

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>

Unable to get data from the second column of a table on clicking of the button in third column

I have a table which has four columns second being a paragraph field , the third being an input field and fourth being a button . What i want is on clicking of the button row the data from the paragraph column should be applied to the input field i.e third row .
Its not possible to select every row using each function as every row is different and theres only few rows like this . How can this be done
I have tried this but it didn't work
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function(){
alert("u");
var u = $(this).parent("tr").find('td:first').html();
alert(u);
});
});

Without knowing the exact HTML, I made this based on your explanation. If I understand correctly, this is what you want to achieve?
$("button").click(function() {
var row = $(this).closest("tr");
var name = row.find("p").html();
var input = row.find("input");
input.val(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Input</th>
<th>Button</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><p>John Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
<tr>
<td>1</td>
<td><p>Jane Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
</tbody>
</table>

Another solution would be
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function() {
var text = $(this).closest('tr').children('td:eq(1)').children().first().html();
$(this).closest('tr').children('td:eq(2)').children().first().val(text);
});
});
#tab_logic td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
<tr>
<td>one</td>
<td><p>I'm just a paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
<tr>
<td>two</td>
<td><p>I'm just another paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
</table>

handle mdl table check box

I'm using material desigin lite in my website
I have implemented this example:
http://www.getmdl.io/components/index.html#tables-section
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
my question is how to handle the check box in the table , they are added by the class : .mdl-data-table--selectable
there is no Id or class for them so what is the way to use them in javascript or sql server (deleting rows what i'm trying to implement)

You could check if they're are clicked with a jquery on method, why am not using the normal .click is to because of event delegation. Jquery docs do a perfect job explaining that.
Before I explain how I did it I will have a snippet that you can immediately play with under my explanation.
I basically used inspect element to look at the tables structure and it looked something like this
<tr>
<td>
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
With that information, we can do a lot. I personally used this to listen to clicks.
$(document).on("click",".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() { /* Code here*/ });
And with jquery parents & children methods we can achieve a lot, like read the content of all the table data with the following code in our click event listener
foo = $(this).parents().eq(2).children().text();
Or we can perhaps delete a whole row?
$(this).parents().eq(2).fadeOut();
What that would do is, look at the clicked checkbox using "this" as reference. Then go to levels up and remove a whole row.
<tr><!-- eq 2 -->
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
Or we can check for the content of a specific child like this
var secondChildContent = $(this).parents().eq(2).children().eq(2).text();
Where secondChildContent will be return the content. You can always change the eq (The one after children) value to the desired child number you want. In the following case secondChildContent would return "Acrylic"
<tr>
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>$2.90</td> <!-- eq 4 -->
$(document).ready(function() {
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//Removing row
$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2/*child number*/).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
//Removing table on click of first checkbox
if (parentID == "header") {
$("#mdlTable").fadeOut(1000);
$("#log").html("<b>Table removed!</b>");
} else {
//Don't pay attention to this
$("#log").html(
"<b>Second child content is: </b>" + secondChildContent +
"<br><b>All children content is: </b>" + allChildrenContent
)
}
});
});
#log,
#mdlTable {
margin: 1% 1% 1% 1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table id="mdlTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr id="header">
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<div id="log"></div>
</body>

When a checkbox is selected, the tr gets the class "is-checked" with Material Design Lite.
So your jquery can be like this:
$("table").find("tr.is-checked").each(function(){
// Do some stuff!
});
Update: Just read that the class "mdl-data-table--selectable " is being deprecated... This is the article on github

You can use this OnClick API function.
It uses like Android onClickListener, but it is for JavaScript.
TablesOnClickListener = function() {
var fun;
this.setOnClickListener = function(listener) {
fun = listener;
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2 /*child number*/ ).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
fun({
sen: secondChildContent,
text: allChildrenContent,
id: parentID
});
});
}
How to use:
Step 1: create new TablesOnClickListener
var tocl = new TablesOnClickListener()
Step 2: set Item OnClickListener
tocl.setOnClickListener(function(data){
console.log(data);
});
Now your Tables Item Listener are all set!

How to get first value of row in table on click?

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);

Customize table with jquery

I want to design a customize table layout. For example after adding data my table is created. Now I am showing column name in one column and column data in another column, I want to add functionality if I drag one row to third column, Then column structure will be modified and that row will be added to new column.
For example: This is my table: jsfiddle.net/x8L57md2/
code:-
<tr>
<td>Name</td>
<td> Ankur </td>
</tr>
<tr>
<td>Address</td>
<td>jaipur</td>
</tr>
<tr>
<td>State</td>
<td> Rajasthan</td>
</tr>
<tr>
<td>Country</td>
<td>India</td>
</tr>
<table>
If I move state column to right side of ankur(name) then another table column will be created and append it to table with data.
Like this: jsfiddle.net/ttzr2ezh/
code:-
<table border="1">
<tr>
<td>Name</td>
<td> Ankur </td>
<td>State</td>
<td> Rajasthan</td>
</tr>
<tr>
<td>Address</td>
<td>jaipur</td>
</tr>
<tr>
<td>Country</td>
<td>India</td>
</tr>
<table>

Dragging tr elements is a little tricky. Here's a modified version of a clever approach from a different post. You can view a fully working JSFiddle here: http://jsfiddle.net/xwyoe0y9/
// make sure you reference jQuery and jQuery UI
$(document).ready(function() {
var dragInfo = {};
$('table.rearrangeable tr').draggable({
helper: 'clone',
start: function(event, ui) {
dragInfo.tr = this;
dragInfo.helper = ui.helper;
}
});
$('table.rearrangeable tr').droppable({
drop: function(event, ui) {
var tr = ui.draggable;
$(this).append(dragInfo.tr.innerHTML);
$(dragInfo.tr).remove();
$(dragInfo.helper).remove();
}
});
});

Look up jQuery UI, there is simple functionality for making a UI item 'sortable'.
With this new library installed you just need to label the rows or individual elements and in Javascript make them 'sortable'.
HTML:
<table>
<tr class='makeSortable'>
<td>Element1-Title</td>
<td>Element1</td>
</tr>
<tr class='makeSortable'>
<td>Element2-Title</td>
<td>Element2</td>
</tr>
<tr class='makeSortable'>
<td>Element3-Title</td>
<td>Element3</td>
</tr>
</table>
Javascript:
$(function() {
$( ".makeSortable" ).sortable();
$( ".makeSortable" ).disableSelection();
});