We Keep Coding

how to drag an td element and drop it in another td element in a table using jquery

I am making an UI from which I have some static 'td' element and a table in which I have some 'td' element.Now I want to drag the static 'td' element and drop it and replace the existing 'td' element in it. I want to know which 'td' is replaced and by which 'td' it is replaced so I could update my database via 'PHP'.
This is code I have been using for drag and drop but not useful:
$("#fool td").draggable({
revert: "invalid"
// start: function(ev, ui){ ui.helper.width($(this).width()); }
});
$('#cool').droppable({
accept : "#fool td",
tolerance: 'pointer',
greedy : true,
hoverClass: 'highlight',
drop: function(ev, ui) {
alert('hi');
//$(this).innerHTML($(ui.draggable));
$(ui.droppable).replaceWith("<div>Some content</div>");
}
});
My HTML code for static 'td' is:
<div id="fool"><table id="draggable"><tr><td style="background-color:blue">english</td></tr><tr><td style="background-color:yellow">hindi</td></tr><tr><td style="background-color:green">maths</td></tr><tr><td style="background-color:white">physics</td></tr></table></div>
<div id="cool"><table>---- all td elemenet ------</table></div>
Where inside 'cool' div I am generating a dynamic table after that I want drag and drop on that cool table.

As i think you need to swap two TD so,
You can use Zepto plugin as its provide all your swapping information.
refer : http://james2doyle.github.io/zepto-dragswap/

try this:
1. Include jQuery library and TableDnD.js
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.0.7.min.js"></script>
2. Call the plugin
<script type="text/javascript">
$(document).ready(function() {
// Initialise the first table (as before)
$("#table-1").tableDnD();
});
</script>
3. Markup
<table id="table-1" cellspacing="0" cellpadding="2">
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
for info click here....

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/

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

jquery live click event not working in IE8

I'm using the following code, and it works fine in all browsers I've seen, IE9 is fine but then I come to IE8 and it doesn't work at all.. just for reference the #cal_popup_table element is dynamically added to the page..
$("#cal_popup_table tbody tr td a").live('click', function() {
$('.datepick-cmd-today').text(from_month + ' ' + from_year);
var test = from_yeartest + '-' + from_monthtest + '-' + from_daytest;
var test_new = test.split("-");
var today = test_new[0] + '-' + test_new[1] + '-' + test_new[2];
$("#arrival").val(today);
});
Could anyone shed some light on why it might not be working properly, the code inside the function doesn't matter as a simple alert() doesn't work either.. the click event just never fires at all
UPDATE - this is the code (trimmed out some content etc) that is inserted into the page
<div id="cal_popup" class="datepick-popup" style="position: absolute; left: 901px; top: 219px; ">
<div class="datepick" style="width: 195px; ">
<div class="datepick-nav">
<
December 2012
>
</div>
<div class="datepick-month-row">
<div class="datepick-month">
<table id="cal_popup_table">
<tbody>
<tr>
<td>
5
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Try by removing the tbody:
$("#cal_popup_table tr td a").live('click', function() {
Some browsers add <tbody> to automatically-generated tables, but IE 8 does not.
That's why JS failed to execute your code in IE 8.

Use on()
$("#cal_popup_table").on('click', 'tr td a', function() {
alert('a');
});

I just checked your code in ie8 and its working absolutely fine no problems whatsoever, i have done something in a fiddle: http://jsfiddle.net/J8ysn/1/
This is the jQuery code i have tried.
$('<table border="1"><tbody><tr><td></td></tr></tbody></table>')
.appendTo('body')
.attr({"id":"cal_popup_table"});
$('clik').appendTo("#cal_popup_table tbody tr td");
$("#cal_popup_table tbody tr td a").live('click', function() {
alert('live clicked');
});

Highlighting only ONE <tr> in a table

I need it so when you click on a table row it highlights only that ONE row in the table, if the user was to click another TR from the same table it will deselect the previously selected TR and highlight the clicked one.
Help?
What im using now is
<tr onclick="style.backgroundColor='#eaf0f5';"> ..... </tr>

Try this:
jQuery 1.7+
$("table tr").on('click', function() {
$("table tr").removeClass("highlight");
$(this).addClass("highlight");
});
jQuery <1.7
$("table tr").click(function() {
$("table tr").removeClass("highlight");
$(this).addClass("highlight");
});
CSS
.highlight { background-color: #FF0; }