get all the td elements of tr when clicked - javascript

I have a table and when user clicks into a link need to copy the content of that row and populate them into other fields e.g. edit information. How can the row content be populated as an array
<table id='mytable' border='1'>
<thead>
<th id='ID'>ID</th>
<th id='Email'>Email</th>
</thead>
<tr>
<td>1</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>xyz#gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>pqr#gmail.com</td>
</tr>
</table>
jsfiddle link
http://jsfiddle.net/keJBZ/5/

Not sure why I've answered this one as your question is as vague as it is.
If you want to pull the information from a selected row into an array, here is how you can do it:
http://jsfiddle.net/KyleMuir/keJBZ/6/
var array = new Array();
$('#mytable tr').on('click', copyIntoArray);
function copyIntoArray() {
var self = $(this);
var tds = self.children('td');
array.push(tds[0].innerText, tds[1].innerText);
}
It would make a lot of sense to build up an object to push onto the array so you could have KVP or something similar to provide some context.
EDIT
Here is your fixed version. No need for the array. I also gave your inputs IDs of "email" and "username" for easier selection.
http://jsfiddle.net/KyleMuir/keJBZ/21/
Final code:
$('#mytable tr').on('click', setInformation);
function setInformation() {
$("#edit").show();
var self = $(this);
var tds = self.children('td');
$('#username').val(tds[1].innerText);
$('#email').val(tds[2].innerText);
}
FINAL EDIT?!? turns out FireFox doesn't support .innerText, replaced it with the jQuery to retrieve the values.
http://jsfiddle.net/KyleMuir/keJBZ/24/
This:
$('#username').val(tds[1].innerText);
$('#email').val(tds[2].innerText);
becomes:
$('#username').val($(tds[1]).text());
$('#email').val($(tds[2]).text());
Hope this helps.

Give each row an ID, and then in your JavaScript, use getElementById to get the row which is clicked. Then you can also get all the columns of that row using the same function. You can put all the columns in a var and then use that var to populate whatever you want.

Related

How to get html td cell value by Javascript

I am trying to get the information from my table td's, using javascript. How can i achieve this? I have tried and failed, because i do not exactly understand the JS. So far, i have managed to get one of them to work, which is 'id' but thats just getting info from the db directly, the td values ive been unable to.
echoing the vals in my php update page shows the id val being passed successfully, but none others.
EDIT
Per your last comment I can recommend you use an event listener on all <td> tags and this way you can just get the relevant text of the specific <td> that the user clicked:
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.addEventListener('click', function(){
console.log(this.innerText)
});
}
<table>
<tr>
<td class="awb">I am the first awb</td>
<td class="awb">I am the second awb</td>
</tr>
<tr>
<td class="differentClass">I am the first differentClass</td>
<td class="differentClass">I am the second differentClass</td>
</tr>
</table>
You are approaching this all wrong...
Instead of this:
var awbno = String(tr.querySelector(".awb").innerHTML);
Do this:
var awbno = document.querySelector(".awb").innerHTML;
Here is a snippet:
var awbno = document.querySelector(".awb").innerHTML;
console.log(awbno);
<table>
<tr>
<td class="awb">Test Text inside a td tag</td>
</tr>
</table>
in order to get the contents of any element using class
let value = document.querySelector('.className').innerHTML;
in order to get the contents of a specific TD
let value = document.querySelector('td.className');

jQuery how to update range number of rows in table

I have table like this.
<tbody>
<tr class="count"><td class="int">1</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">2</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">3</td>...</tr>
<tr class="hide"></tr>
</tbody>
I used jQuery for dinamic webpage. when user removed a row from list, i need update number range at client again.
this is my code. but my result wrong expected.
$('.count').each(function() {
var ind = $(this).index()+1;
$(this).find(".int").html(ind);
});
*Note for rows that class hide not for view on browser, it for other point.
please help me to find it.
$(this).index() will not work in these case, because hidden elements also have index. Try like following.
$('.count').each(function(i) {
var ind = i + 1;
$(this).find(".int").html(ind);
});

Jquery - Access table values (tr children - td) and change them

Found a few posts about this but none answered my question properly.
I want to access some values in my table and change them using a click function in js using jquery. How can I access this and change it without using innerHTML?
<table class="tg">
<tr>
<th class="tg-031e">Race</th>
<th class="tg-031e">space holder lol</th>
</tr>
</table>
var tableArray = $("table").children().children();
$("#input img.Majin").click(function() {
//tableArray[0].innerHTML = "";
});
Use following find function :
$("table").find('classname');

how to convert/transform an HTML table tbody (with rowspans) TO json?

I have an HTML table with combined row td's, or how to say, I don't know how to express myself (I am not so good at English), so I show it! This is my table:
<table border="1">
<thead>
<tr>
<th>line</th>
<th>value1</th>
<th>value2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>2.3</td>
<td>2.4</td>
</tr>
</tbody>
</table>
(you can check it here)
I want to convert this table to a JSON variable by jquery or javascript.
How should it look like, and how should I do it? Thank you, if you can help me!
if you want to convert only text use this one :
var array = [];
$('table').find('thead tr').each(function(){
$(this).children('th').each(function(){
array.push($(this).text());
})
}).end().find('tbody tr').each(function(){
$(this).children('td').each(function(){
array.push($(this).text());
})
})
var json = JSON.stringify(array);
To make a somehow representation of your table made no problem to me, but the problem is how to parse it back to HTML! Here a JSON with the first 6 tags:
{"table":{"border":1,"thead":{"th":{"textContent":"line","tr":"textContent":"value1",...}}}}}...
OR for better understanding:
{"tag":"table","border":1,"child":{"tag":"thead","child":{"tag":"th","textContent":"line",
"child":{"tag":"tr","textContent":"value1","child":...}}}}...
Closing tags are included.
For further explanations I need to know whether your table is a string or part of the DOM.
I belive this is what you want:
var jsonTable = {};
// add a new array property named: "columns"
$('table').find('thead tr').each(function() {
jsonTable.columns = $(this).find('th').text();
};
// now add a new array property which contains your rows: "rows"
$('table').find('tbody tr').each(function() {
var row = {};
// add data by colum names derived from "tbody"
for(var i = 0; i < jsonTable.columnsl.length; i++) {
row[ col ] = $(this).find('td').eq( i ).text();
}
// push it all to the results..
jsonTable.rows.push( row );
};
alert(JSON.stringify(jsonTable));
I think there should be some corrections, but this is it I think.

table mapping by th and first td in row to populate from json object

using php to echo json array inline i want js/jquery to populate table according to these data.
HTML table
<table>
<thead>
<tr>
<th>Time</th>
<th data-day='2013-03-15'>15-3</th>
<th data-day='2013-03-16'>16-3</th>
<th data-day='2013-03-17'>17-3</th>
</tr>
</thead>
<tbody>
<tr data-time='09'>
<td>9am</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var arr=[
{"date":"2013-03-15","id":"4","time_booked":"09:00:00"},
{"date":"2013-03-15","id":"1","time_booked":"09:10:00"},
{"date":"2013-03-17","id":"5","time_booked":"09:30:00"}
];
$.each(arr,function(){
console.log('id:'+this.id+'inside:'+this.date+'|'+this.time_booked);
});
</script>
i want to loop thro arr and according to its date and time_booked write id inside td.
for example first row will go to td with date-day='2013-03-15' and data-time='09'
so how can i do this using javascript ?
im thinking should i include data-day,data-time inside each td in tbody ? or is there a better way to do it ?
current approach:
include data-day inside each tr so html of tbody is
<tr data-time='09'>
<td data-day='2013-03-15'></td>
<td data-day='2013-03-16'></td>
etc..
</tr>
then use js
$.each(arr,function(){
var rday=this.date;
var rtime=this.time_booked;
var sel='tr[data-hr="'+rtime.substr(0,2)+'"]';
var dom=$(sel).find('td[data-day="'+rday+'"]').first();
if(dom.length)dom.append(this.id);
});
but i have a feeling its stupid ! there must be a way to map table using x,y (table head,row head) or there is none ?
I think the jQuery index function is what you're looking for. In the code sample below, I've used it to fetch the colIndex for the date. In this case, it fetches all of the th cells within the table, and uses .index(..) with a selector seeking the required date. This gives the column index of the date you're seeking, and from there it's all pretty straight-forward.
var arr=[
{"date":"2013-03-15","id":"4","time_booked":"0900"},
{"date":"2013-03-15","id":"1","time_booked":"0910"},
{"date":"2013-03-17","id":"5","time_booked":"0930"}
];
$.each(arr,function(){
var cell = GetCellByDateAndTime(this.date, this.time_booked);
$(cell).text(this.id);
});
function GetCellByDateAndTime(date, time) {
var colIndex = $("#BookingsTable th").index($("[data-day='" + date + "']"));
var row = $("#BookingsTable tr[data-time='" + time + "']")
var cell = $(row).children($("td"))[colIndex];
return cell;
}
And a Fiddle.

Categories