Develop Reference

JQuery animate only one cell

I am currently learning JQuery and was wondering how you can only affect one cell from a table?
This is my fiddle https://jsfiddle.net/amosangyongjian/mmqasf5t/4/
This is the jquery code
$(document).ready(function(){
$("td").hover(function(){
$(this).siblings(".expand").slideDown("slow");
},function(){
$(this).siblings(".expand").slideUp("slow");
});
});
I've tried several other methods but none seem to work.
Please help.
Thank you

Try this:
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>

td doesn't have any siblings with .expand. However, p does.
So you have two alternatives, either set the event listener to td p, which also would affect the area that you can hover. So what you really want is probably to change:
$(this).siblings(".expand")
to
$(this).children(".expand")
$("td").hover(function(){
$(this).children(".expand").slideDown("slow");
}, function(){
$(this).children(".expand").slideUp("slow");
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>

this is correct way when you choose via $("td")
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown('slow');
},function(){
$(this).find(".expand").slideUp("slow");
});
});
or
$(document).ready(function(){
$("td").hover(function(){
$(this).children(".expand").slideDown('slow');
},function(){
$(this).children(".expand").slideUp("slow");
});
});
your code also work when you change your code $("td p")
$("td p") -siblings will .expand
$("td") -siblings will another td datas
because siblings will it get previous element.

Dynamically inserted table: last row not detected by JQuery

I'm using JQuery for creating dynamic table row based on user insertion.
My HTML:
<table id="list">
<thead>
<tr>
<th>first header</th>
<th>second header</th>
<th>third header</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button> </td>
</tr>
</tbody>
</table>
And JavaScript:
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) {
if ($(this).val().length > 4 && $('#list tr:last td:nth-last-child(2) input[name=second]').val().length > 4) {
$('#list tbody').append('<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button></td>
</tr>');
}
});
The above code only works for the first row and the inserted row has no JS code-behind.

You haven't given complete code, but i suspect this is your issue..
Replace this
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event)
with this
$('#list').on('keyup', 'tr:last td:nth-last-child(2) input[name=second]', function (event)
You are probably not using proper event delegation, and you're trying to bind a keyup event on an element that doesn't exist yet (you say the rows are added dynamically). Instead we bind the keyup to the table that is part of the initial document, and say what happends when a child that meets X criteria has a keyup event fired

Your function does not bind to elements that don't exist on page load, use on for dynamically generated elements
$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {

Hide tr element from click within it

I've got a table structure (see snippet below) and my goal is to hide a tr element once I click on the span that reads delete. I need the specific tr where that delete is contained.
I already got a listener for the click event on the last span, the one that says "delete" working.
I've got several tr elements, is it possible to hide the tr where the span is contained (and therefore, all the contents)?
$(".delete_pm").click(function () {
alert('hey');
$(this).closest( "tr" ).hide(); // tried this from answers below but no luck, as you can see here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>

You can use .closest to search the parents. Provide it with tr as the selector, then simply hide it.
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>

have you try this,
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>

closest will give you the nearby parent with the matching selector.
hide will not remove the item from the DOM.If you want that also, you may chain the remove method call also.
$(".delete_pm").click(function () {
var _this=$(this);
_this.closest("tr").hide().remove();
});
Here is a working jsfiddle

On textbox change change label value to HTML (array)

I have a array of textbox and labels which are toggled in a html table, say the label vl be visible on first and then on the row click the text box are visible , but the problem is on that row if i change the text box value the label value should also change but hear in my case am not able to do it.
JS Fiddle demo
HTML:
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="data1" />
</td>
<td>
<label>data2</label>
<input type="text" value="data2" />
</td>
<td>
<label>data3</label>
<input type="text" value="data3"/>
</td>
<td>
<label>data4</label>
<input type="text" value="data4"/>
</td>
<td>
<label>data5</label>
<input type="text" value="data5"/>
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="data6" />
</td>
<td>
<label>data7</label>
<input type="text" value="data7"/>
</td>
<td>
<label>data8</label>
<input type="text" value="data8" />
</td>
<td>
<label>data9</label>
<input type="text" value="data9" />
</td>
<td>
<label>data10</label>
<input type="text" value="data10" />
</td>
</tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>
JS:
$('#table1 input').hide();
$('#printdata').fadeTo(0, 0);
// This shows or hides the button deppending on the inputs
$('#table1 tr').on('change keyup click', function() {
var text = '';
$('input', this).each(function(){
text += $(this).val();
});
if (text !='')
{
$('#printdata').fadeTo(0, 100);
}
else
{
$('#printdata').fadeTo(0, 0);
}
});
$('#table1 tr').on('click', function (e) {
if ($( e.target ).is("input") || $( e.target ).is("th") ) {
return;
} else if ($(this).hasClass('selected')) {
$(this).toggleClass('selected');
$('input', this).toggle();
$('label', this).toggle();
} else {
$('tr.selected input').hide();
$('tr.selected label').toggle();
$('tr.selected').toggleClass('selected');
$(this).toggleClass('selected');
$('label', this).toggle();
$('input', this).toggle();
}
});
$('#printdata').click(function () {
$('.showresult').each(function (index) {
$('span', this).html('');
$('span', this).html($('#table1 .selected input').eq(index).val());
});
});

try to add this code:-
$('#table1 tr').on('change','[type="text"]', function(e) {
$(this).prev('label').text($(this).val());
});
Demo

Well, that's what you need to add to make your code working:
$('#table1 input').each(function(idx, input) {
var jqInput = $(input);
var label = jqInput.parent().find("label")
jqInput.change(function() {
label.text(jqInput.val())
})
})
However, this is a slippery road.
You're trying to maintain some state, display it in different views...
You will always have some sort of data synchronization bug with this approach.
You need to use some sort of MVC to make your life easier and code more stable.

e.preventDefault() not working

I have a table which rows are generated with a click event of an element. Now, this works perfectly, the problem is with the delete part. For example I have already added 5 rows, when I click the delete button (the delete button is created through jQuery too on the addRow() click event), all rows added through the jQuery function are being deleted and the form is submitting event though I have an e.preventDefault() method called.
JavaScript/jQuery code:
var counter = 2;
window.addRow = function addRow() {
var newRow = $('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' + counter + '"/></td><td><button class="delete">delete</button></td></tr>');
counter++;
$('table.actionsteps-list').append( newRow );
}
$('table.actionsteps-list').on('click', '.delete', function(e){
e.preventDefault(); // stops the page jumping to the top
$(this).closest('tr').remove();
});
function postForm() {
var form = document.getElementById('actionStepsForm');
document.getElementById('rowCount').value = counter-1;
form.submit();
}
HTML Code (the form itself):
<form name="actionStepsForm" id="actionStepsForm" action="add_reprocessing.php?action=add" method="post">
<table class="actionsteps-list" width="510">
<tr>
<th colspan="3" align="left">Action Steps</th>
</tr>
<tr>
<td>Step #</td><td>Action Step</td><td>Owner</td>
</tr>
<tr>
<td>
<label>1</label>
</td>
<td>
<textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea>
</td>
<td valign="top">
<input type="text" name="txtOwner1" />
</td>
</tr>
</table>
<table width="510">
<tr>
<td align="right">Add Action</td>
</tr>
</table>
<input type="button" value="Create" onclick="postForm(); return false;" />
<input type="hidden" value="" id="rowCount" name="rowCount" />
</form>
Believe it or not, I've been stuck here for almost 3 days now. I can't find any fix online. I don't what's wrong.

put
$('table.actionsteps-list').on('click', '.delete', function(e){
e.preventDefault(); // stops the page jumping to the top
$(this).closest('tr').remove();
});
into
$(function(){$('table.actionsteps-list').on('click', '.delete', function(e){
e.preventDefault(); // stops the page jumping to the top
$(this).closest('tr').remove();
});
)};