We Keep Coding

can't use .val on element found by .find

I have a dynamically generated table, with (currently) a set rule that the first column has to be an unique identifier of some sort. The table is generated based on a json file, altought i don't think that's really important here.
Each table row has a anchor tag added with class="delete". when i click that anchor tag, i execute the following code:
e.preventDefault();
var idCell = $(this).closest('tr').find('td')[0];
If i console.log(idCell),i get <td>01</td> in my console.
If i console.log(typeof idCell) i get object.
If i console.log the type of a random element from the DOM, i get object as well.
My issue is: I cannot get the .val() from idCell, while i can access the .val() from any element directly filtered from the DOM.
My primary concern is why this is(n't) happening, and if there is a fix existing for this type of problem, i would be most gratefull if you would share it with me.
EDIT 1:
Here you have an example table.
<table>
<tr>
<th>
id
</th>
<th>
delete
</th>
</tr>
<tr>
<td>
01
</td>
<th>
delete
</th>
</tr>
</table>
please try to get me the ID of the table, when i click on the delete link, preferably using jQuery.

As JJJ and
Daniel A. White mentioned, The solution is:
1) To use .eq(0) instead of [0] to keep the selector a jQuery element.
2) To use .text() instead of .val() since only input fields have values, and table cells don't.

here's the script (works fine by me)
$(".delete").bind("click",function(e) {
e.preventDefault();
var idCell = $(this).closest('tr').find('td');
idCell.html("");
});

Dynamically insert/remove table rows (including how to give ID's to added rows)

I'm trying to implement a dynamically growing/shrinking table as in the picture. I know I need to use the insertRow() function, but I'm confused about how to dynamically give ID's to the rows. I need to be able to disable the end date input field if the checkbox is checked (that's why the need to give ID's). I need to be able to insert rows and delete rows. I'm fairly experienced in programming concepts but new to JavaScript and web development in general. If anyone could point me to sample code or explain if there is another efficient way of doing it, I'd greatly appreciate it.
http://imgur.com/68t3dH2

An example whitout id, working for each line control,
like you screenshot (id's are just a way among others...)
You can't have multiple identical id's, then
Assuming your action button's are called by their respective classname,
".add" and ".del"
For Removing
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
});
For a New line
$(".add").on("click", function()
{
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq("+lineOffset+")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
Table test
<table>
<tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
<tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>
(function() {
$(".del").on("click", function() {
// removing the line of element clicked
$(this).parents("tr").remove();
});
$(".add").on("click", function() {
var line = $(this).parents("tr"); // get the line of element clicked
var lineOffset = line.index(); // get the offset position of this line
// and using css selector, you can simply add line after another
$("table tr:eq(" + lineOffset + ")").after(line.clone(true));
// line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr id="a_0">
<td>test0</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_1">
<td>test1</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
<tr id="a_2">
<td>test2</td>
<td><span class="del">[X]</span><span class="add">[o]</span>
</td>
</tr>
</table>
However, you can see in my example, the ID's beginning by a_*
are not used (yes, it's not necessary and relative as your case)
And another way to make that is to use the jquery method .index()
to get the line offset clicked and.. remove or copy it!
Note :
If you realy need to use a line ID,
well, you can proceed by using css selectors like that:
$("tr[id^='a_']")
IF EMPTIED TABLE
$(".del").on("click", function()
{
// removing the line of element clicked
$(this).parents("tr").remove();
if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
$("#hidden_control").show(); // or .css("display", "block");
});
$("#hidden_control").on("click", function()
{
$("table").append("<tr><td>...</tr>"); // add a new first line
$(this).hide(); // and hide it directly until next reinit
});
// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">
// or, hidden row solution (where colspan=6 depend the number of cell you have:
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>
// CSS class for hidden_control
#hidden_control
{ display: none; }
Documentation :
Go on https://api.jquery.com/, and search for "parents", "after", "remove", "append", "html", "index"

Wrap each row with a class or row.
if you want to add:
var form="<div> <input type='text'></div>";
$(document).on('click', ".add", function(){
$(form).insertAfter($(this).closest("#fields"));
});
delete:
$(document).on('click', ".remove", function(){
$(this).closest('div').remove();
});
jsFiddle demo

You don't need ID's for that. The JavaScript handler for the checkbox can locate the End Date field by navigating the DOM tree. Starting at the checkbox, walk up the DOM tree (e.g. parent()) to find the cell (<TD>), then walking the siblings (next() twice), and down to the input field (e.g. find('input')).
As for adding a new row, you can follow the advice of this answer:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
And you remove a row by calling remove() on the <TR>.

Edit HTML Table Data cell using Jquery

I have an HTML table, and each cell of the table will have two data attributes. What I'm trying to do is set a button to switch the value being shown in the table between those two attributes.
<table class="table1">
<tbody>
<tr>
<td data-original="A" data-new="B"> A </td>
</tr>
</tbody>
</table>
I'm able to set new text and get attributes outside the table, but whenever I try to within the table I keep receiving an error:
'Uncaught -> TypeError: undefined is not a function'.
I've been receiving this error for a number of commands $('td').text(), .val(), .attr('td'), .getAttribute().
Am I missing a plugin or something for getting and setting values from tables?
ANSWER: I figured out the reason, I was an idiot and didn't mention that there would be numerous TD elements with repeating tags. I eventually used Underscore.js's each method to iterate through them and parts of the below answer to swap the values.

Just made a Fiddle:
$("button").on("click", function () {
$("td").text($.trim($("td").text()) == $("td").data("original")
? $("td").data("new") : $("td").data("original"));
});
to switch between the data-original and data-new values by checking the current text in the td and using a ternary operator.
By using trim() for the initial text issues in case of whitespace are taken care of (as I just noticed that you have whitespace in your example td).
Just in case the button isn't already in the DOM when the page is initially loaded, you have to adjust the on() to delegate the click event from a static parent element to the button, e.g. like this: $(document).on("click", "button", function () { ...
Instead of $(document) every other static parent element can be used.
And as you mentioned that the table will have multiple tds with data-attributes, I've just adjusted the Fiddle to take care of that:
$("button").on("click", function () {
$("td").each(function () {
$(this).text($.trim($(this).text()) == $(this).data("original") ?
$(this).data("new") : $(this).data("original"));
});
});

I don't know how .text() didn't work for you.
To set text inside td elements, you use .text(). To get the data inside data-current or data-new, jQuery has a handy function .data(tag), for example $(sel).data('current').
Here's a fiddle displaying usage of this on your problem.

How to create an id for a td element based on the row id?

I'm trying to generate the id of a td element, based on it's row number.
I believe that the td id must be unique. Maybe I am wrong?
I'm therefore trying to concatenate the row number with some text but can't seem to get it to work.
We are using jQuery on our website and I can successfully create other id's which are based on variables, but i'm a little stuck on this one. Here's an example of something that works
<td id="person-id${person.id}">${person.name}</td>
The html will later look something like:
<td id="person1"></td><td id="person2"></td><td id="person3"></td> etc
I was hoping to do something like this for another table but having some trouble:
<td id="row-number("+rowIndex+")">some text here</td>
Any help would be appreciated.

I'm assuming you want to assign the id based on column number, not row number. If I'm correct in this assumption, you can do it with jQuery like so:
$("tr").each(function() {
$(this).children().each(function() {
var n = $(this).index();
$(this).attr('id','person'+n);
});
});
Otherwise, if you do want the row number assigned to the id, it would be:
$("tr").each(function() {
$(this).children().each(function() {
var n = $(this).parent().index();
$(this).attr('id','person'+n);
});
});
Voila.

Using JQuery .append() to dynamically change table layout

I am using an HTML table but I want to dynamically change the layout of the table based on the browser size. My basic code looks like this:
<tr>
<td class="row">E1</td>
<td class="row">E2</td>
<td class="row">E3</td>
<td class="lastRow">E4</td>
</tr>
Then the JQuery should calculate the number of rows and insert row-breaks accordingly.
My JQuery looks like this for now:
$('td.row').append('</tr><tr>');
Yet, its still displaying all the elements on one line. Any idea why?

This is a perfect place to use fluid CSS layouts.
Instead of writing lots of crazy Dom-manipulating javascript, simply replace your TD tags with divs and have them float:left
Further- append does not do what you think it does. It's dom manipulation and not string manipulation- you can't use it to directly change HTML the way you're thinking.
Further reading

Try looking at .after(); function:
http://api.jquery.com/after

i think that you need to try with this selector
Asumming that your table haved an id called example try like this
$("#exmaple tr:last").append('<tr></tr>');

$('</tr><tr>').insertAfter('.row');

You'd want to do your append on the tr element, not on td.row

You need to not think in terms of constructing HTML markup. There's no way to splice a closing/opening </tr><tr> into the DOM (without some ugly .innerHTML hacks).
Instead, create a new row after the current row, and the relocate the cells into that new row.
var row_cells = $('td.row').slice(1);
row_cells.each( function( i, el ) {
$('<tr>').insertAfter( row_cells.eq(i).parent() )
.append( row_cells.eq(i) );
});
DEMO: http://jsfiddle.net/EDf5a/
Or maybe you wanted a new row for each cell:
var row_cells = $('td.row');
var row = row_cells.parent();
row_cells.each(function(i, el) {
$('<tr>').insertBefore(row)
.append(row_cells.eq(i));
});
DEMO: http://jsfiddle.net/EDf5a/1/