We Keep Coding

Selecting a table data using javascript/jquery

Hi i am new to javascript and jquery.I just like to know if there is any way of selecting a table data using this format:
$("#myTable").row[index1][index2];
where index1 is row index, index2 is column. Anything similar is fine too.

Try this : you can use .eq() in jQuery to traverse through tr and td with specified index
var td = $("#myTable").find('tr:eq('+index1+')').find('td:eq('+index2+')');
var data = $(td).text();// you can use .html() if you need html inside td

Try This:
$(function(){
$('input').click(function()
{
var t= $(this).attr('class');
var text= $('.time'+t).text();
alert(text);
});
$('td').click(function()
{
var index = this.cellIndex;
alert($('tr:first').find('td').eq(index).text());
});
});
http://jsfiddle.net/oL4pfgda/

It will iterate your table cells and print the values-
$("#myTable>tr>td").each(function () {
var cell_value = $(this).html();
alert(cell_value);
})

How can I bind a click event to dynamically created TDs?

I have a function that takes some json data and puts it into a table. I'm trying to bind a click event to certain table elements. In this case the table has two columns 'Drink Name' and 'Drink Type'. I want the two columns to have different events so I'm trying to give them class tags so I can bind the event to a given class.
The lines wrapped in ** are pseudo code for what I'm trying to do. I've tried looking at a bunch of stuff and can't quite figure this out...thanks!!
function totable(data){
var d = document.getElementById("drinkList");
d.setAttribute("class","panel panel-default");
var dd = document.createElement("div");
dd.setAttribute("class","panel-heading");
dd.appendChild(document.createTextNode("Drink list"));
d.appendChild(dd);
var mytable = document.createElement("table");
mytable.setAttribute("class","table");
var thr = document.createElement("tr");
for(var key in data[0]){
var th = document.createElement("th");
th.appendChild(document.createTextNode(key));
thr.appendChild(th);
}
mytable.appendChild(thr);
for(var i=0;i<data.length;i++){
var r = document.createElement("tr");
for(var key in data[i]){
var td = document.createElement("td");
**td.setClassName("drinkEntry");**
td.appendChild(document.createTextNode(data[i][key]));
r.appendChild(td);
}
mytable.appendChild(r);
}
d.appendChild(mytable);
**$("#drinkEntry").on("click", viewDrink);**
}

Replace **td.setClassName("drinkEntry");** with $(td).click(viewDrink);.

you can use method .on() with document to bind the event instead directly to the class (not id) because the instance doesn't exist already
try this:
$(document).on("click",".drinkEntry", function(){
});

Try this
$('body').on('click','#drinkEntry',function(){
//Your Codes
});

To bind event to dynamically created items you must use .on() jQuery function.
In your case it should looks like:
$('#drinkEntry').on("click", function () {
//logic
});

try out
$('body').on('click', 'td.drinkEntry', function() {
alert("td clicked");
});
JsFiddler Demo
you can also read help full aticle for this : Bind events to dynamically created elements using jQuery

How to get all td's spans by clicking outside button?

i have been read alotof article about each(function(){ .... to get values html tablee childs. But i can not do that. i would like you help me. My some bad experiments are not working.There is a outside a button which is not in rows. While clicking a button, row values must return me.I need td's span values...
My not working samples: NOT WORKING:
var id = $("#listsends").closest("tr").find(".label label-warning").text();
NOT WORKING :
alert(id);
$("#listsends").find('.label label-warning').each(function () {
var textval = $('.label label-warning').text(); // this will be the text of each <td>
alert(textval);
});
var t = $('.label label-warning');
for (var i = 0; i < t.length; i++)
alert(t[i].text());
By clicking web button(outside of table, not inside) , tables's td ^s span values:

$("#listsends").find('.label label-warning').each(function () {
var textval = $(this).text(); // as this is the scope of the element
alert(textval);
});

Get id from html table when clicking an input inside the table

How can you get the id of a table when you click an input element?
I don't need the rowId etc.
I've tried parentNode.id but I can't seem to get the id.
In the end I'd like to do something like this:
var tabelid = INPUT....parentNode.parentNode.id;
var table = document.getElementById(tabelid);
Example:

How about this:-
Demo
Html
<table id="tblTest">
<tr>
<td>
<input type="text" id="txtTest" onclick="getParent.call(this)" />
</td>
</tr>
</table>
I am using call here so that i get the elements context inside the getParent event callback.
Javascript
function getParent()
{
var parent = this.parentNode;
var tagName = "table";
while (parent) { //Loop through until you find the desired parent tag name
if (parent.tagName && parent .tagName.toLowerCase() == tagName) {
alert(parent .id);
return;
}
else
{
parent = parent .parentNode;
}
}
}
If you are using Jquery:-
in the click event you can just do $(this).closest('table').attr('id')

If you are using jQuery you can use closest to find the closest matching ancestor like so:
var tableID = "";
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').attr('id');
});
]);
Edit:
If you actually want to do something with that table (for instance add a class), you could do the following:
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').addClass('myClass');
});
]);
This simply removes the need to fetch the table ID, store it, and then fetch the table based on it's ID. Since you already found the table in order to get its ID you can just manipulate it right away.

You have to ascend the DOM from TD to TABLE keeping in mind that browsers may inject a TBODY if you haven't specified it. So, your code should look something like this:
var tableCells = document.getElementsByTagName('td'),
cellCount = tableCells.length,
i;
for (i = 0; i < cellCount; i += 1) {
tableCells[i].onclick = function () {
var tableId = getTableId(this);
console.log(tableId);
};
}
function getTableId(node) {
var element = node;
while (element.tagName.toLowerCase() !== 'table') {
element = element.parentNode;
}
return element.id;
}
Check out the demo.

Is it possible to add table cells dynamically and give them a different id?

In this fiddle you see a table with a select-field where you should select a name.
Below there are 5 input-fields where one could type in some text and 3 input-fields which are set to readonly.
I wanted to ask whether there is a way to add table cells dynamically when clicking on the button. The result should like this fiddle. The id should be incremented by i+.
I tried cloning the code, but could't figure out how to do increment the id of the cloned input-field. The only input-fields I do not want to clone are the readonly input-fields.
Do you have an example code or a link you would recommend? A hint to start would be helpful as well.
I've been searching the net already, but wasn't able to find something.

Here is the code you ask (i added an id to the button to target it easy)
$('#add').click(function(){
$(this)
.closest('table')
.find('tr td:first-child:not(:has([readonly]))')
.each(function(){
var $this = $(this);
$this
.clone()
.each(function(){
var $inp = $(':input',this);
var id = $inp.attr('id');
var idwithoutnum = id.replace(/([0-9]+)$/,'');
var maxId = $(':input[id^='+idwithoutnum+']:last').attr('id');
var idnum = parseInt(/([0-9]+)$/.exec(maxId)) + 1;
var newid = id.replace(/([0-9]+)$/,idnum);
$inp.attr('id', newid);
alert(newid); // remove this line
})
.insertAfter($this
.closest('tr')
.find('td:last')
);
});
});
example at http://jsfiddle.net/fMZDd/7/

I would choose not to use tables for dom manipulation. Either way, here is how you could do it.
to add a table cell
var td = document.createElement("td")
var idVals = prevId.match(/^([a-z_]*)([0-9]+)$/)
td.innerHTML = "<input type='text' id='"+ idVals[1] + (parseInt(idVals[2]) + 1) +">";
tr.appendChild(td)
Hope this helps.