We Keep Coding

dynamic td blocking tr element

I have a table that if I append the rows and table data the tr element content seems to be blocked I cannot even edit it from the console after it is created I think its blocked by the td
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("table#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).data('id'));
});
if I don't append the tr and td I can replace the td click selector with tr and it works, but if I append it nothing I do to the row has any affect even if I add css I can see it if I inspect it but it does not show or work like the cursor:pointer, but if I put them on the td element dynamically it works. any suggestions greatly appreciated.
new working code
for (i=0;i<res.data.length;i++) {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='"+res.data[i].id+"'>" +
"<td>"+res.data[i].productNumber+"</td>" +
"<td>"+res.data[i].description+"</td>" +
"<td>"+res.data[i].productSize+"</td>" +
"<td>"+res.data[i].boxLength+"</td>" +
"<td>"+res.data[i].boxWidth+"</td>" +
"<td>"+res.data[i].boxHeight+"</td>" +
"<td>"+res.data[i].avgBilled+"</td>" +
"<td>"+res.data[i].productWeight+"</td>" +
"<td>"+res.data[i].boxQty+"</td>" +
"</tr>"
);
}
$("table#product_table tbody").on("click", "tr", function(){
console.log($(this).data());
});

The append is not properly formed when rendered. Please inspect the elements, you can find that the td is not inside the tr element.
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'><td>data21</td></tr>")
$("table#product_table tbody").on("click", "td", function () {
console.log('Working.');
console.log($(this).parent().data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody></tbody>
</table>

Append doesnt not work in that way. When you append an element you only name it like ; append('div') and it opens and closes div automaticly. So you have to create element tr then add its attributes, after that you create td and set its innerHTML. Append td into tr and append tr into table. Dont use /tr in append. Append puts dynamicly created element into target element's end. Best way to create an element is document.createElement('tr');. Hope this helps

Your event's 'this' is 'td', but you are trying to reference 'tr' which is a sibling of 'td', not a child. I changed to $(this).siblings('tr').data('id') and it works. Please see the snippet.
$(function() {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).siblings('tr').data('id'));
});
});
#product_table {
border: 1px #ccc solid;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>

How to remove Options from multiselect dropdown in Jquery

I have some table column with some preselected values and now i want to remove those selected values from dropdown(ddlMultiselect) .. Both table column and dropdown option values are same and what i want that those values should be hide/remove from dropdown as per if condition.
$('#sometabletr:gt(0)').each(function () {
var row = $('td:eq(0) > span', this).text();
$('#ddlMultiselect :selected').each(function () {
var col = $(this).val();
if (row == col) {
$(this).remove();
}
});
});

This is the way is do it, fast and easy way
$('#listname option:selected').each(function (index, option) {
$(option).remove();
});

There is another way to approach this issue.. but setting up classes on the table rows, all you have to do is change the class of the table element itself to hide/show vast amounts of things while only doing a single repaint, which GREATLY improves performance.
In this example, I have the adding of a class hard-coded, but you could use jQuery's addClass and removeClass or look up the best alternatives available.
<doctype html>
<html>
<header>
<title>Demo HIde</title>
<style>
#mytable.even tr.odd {
display:none;
}
</style>
</header>
<body>
<table id="mytable">
<tr class="odd"><td>1</td></tr>
<tr class="even"><td>2</td></tr>
<tr class="odd"><td>3</td></tr>
<tr class="even"><td>4</td></tr>
<tr class="odd"><td>5</td></tr>
<tr class="even"><td>6</td></tr>
</table>
<script>
// Show the even values only
document.getElementById("mytable").className += " even";
</script>
</body>
</html>

Getting every <td> in <tr> by index?

I want to find all td's by index (1) in every row. How can I accomplish this?
My HTML:
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>
Javascript:
var index = 1;
$('tbody').children().children(':eq(' + index + ')');
This code doesn't work because it gets all children of the row and THEN gets the index. I need every second TD in every row.

You can use the nth-child selector
var index = 1;
$('tbody').find('td:nth-child('+(index+1)+')');
Demo: Fiddle

Or just plain vanilla-js
var index = 2,
tdElArr = document.querySelectorAll('table tbody tr td:nth-child(' + index + ')');
// to test this:
for(var i=tdElArr.length;i--;){
tdElArr[i].style.backgroundColor = '#cdedff'
}
table {border-collapse: collapse;}
table, th, td {border: 1px solid black;}
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>

Working example http://jsfiddle.net/LZH87/
$('tbody').children().children('td:nth-child(2)').each(function() {
$(this).css({background: 'blue'});
});
I just added the css background blue to confirm that it works

This could also work (jsfiddle example)
$('tbody').children().each(function(){
$(this).find('td:odd').css({background: 'red'});
});
It's using the :odd or :even selectors in jQuery.

Try this
$('tbody').find('tr').each(function(i){
alert($('tbody').find('tr:eq('+i+')').find('td:eq(1)').text())
})
Demo link http://jsfiddle.net/dhana36/YT3CD/

Change background color of a table row on click

On my webpage, I have a table and I'd like to change the background of a row, and in the process, check the radio button corresponding to that row when the row is clicked. I tried the following using jquery :
<style>
.active { background-color: #8fc3f7;}
</style>
<script>
$(document).ready(function()
{
$('#reqtablenew tr').click(function ()
{
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active");
});
});
<script>
Any thoughts as to what I might be doing wrong or any workaround would be very welcome. I have included the following scripts in the page.
src="http://code.jquery.com/jquery-1.9.1.js"> and src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"
Here's a fiddle of my table
http://jsfiddle.net/Gz668/5/

You forgot to add jquery
Add this in you css
tr.active td {
background-color: #8fc3f7;
}
I have updated your demo to this
Updated to check the radio try this,
$(this).find('[name="reqradio"]').prop('checked',true);
Full Code
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active");
$(this).find('[name="reqradio"]').prop('checked',true);
});
});
Demo

The problem is the td got background color too
.newreqtable td {
.....
background-color:#ffffff;
So you need to enforce your active class, e.g.
tr.active td{background-color: #8fc3f7;}
See this: http://jsfiddle.net/Gz668/9/

Something like this ... :
$(this).find('input').prop('checked', true);
.. will check the radiobutton of the clicked row.
[Fiddle] (http://jsfiddle.net/McNull/LwT9N/)

jQuery – on('click') append doesn't seem to work

http://jsfiddle.net/D6be5/
HTML
<table class="example" border="1">
<tr>
<td>
<label>Enter text</label>
<textarea>Enter text</textarea>
</td>
</tr>
<tr class="clone"></tr>
</table>
<p><button id="add-row">Add Row</button></p>​
jQuery
$(document).ready(function() {
$(this).on('click', function(event) {
if ( ! $(event.target).closest('table').hasClass('example')) {
$('table label').show();
$('table textarea').hide();
}
});
$('table td').on('click', function() {
$('table label').show();
$('table textarea').hide();
$(this).find('label').hide();
$(this).find('textarea').show();
});
$('#add-row').on('click', function() {
_this = $('table tr.clone')
.clone()
.removeClass('clone')
.insertBefore('.clone');
_this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
});
});​
CSS
table textarea {
display: none;
}
table .clone {
display: none;
}​
The link above explains what I'm trying to do.
Basically the problem is this. I have a label and textarea within a td, the textarea is hidden and only the labels show at start. When the user clicks on the cell of the table it hides the label and shows the textarea, which works fine until you try and add a clone of the row then it doesn't do anything.
Edit: Forgot to mention why I'm cloning the row and adding the cells afterwards. In my actual code I allow for column creation as well and I do a count of the rows and add the cells after.
Thank you very much for any help =)

Another Method.
$('table').on('click', "td", function() {
})

Change the click handler to
$(document).on('click', 'table td', function() {
//Your code
}

hope it might help you
$('.example').delegate('td', "click", function() {
}

You may want to try using the .on() method on your $('table td').click() event:
$('table td').on('click', function() {
$('table label').show();
$('table textarea').hide();
$(this).find('label').hide();
$(this).find('textarea').show();
});
Hope that helps