Develop Reference

jquery deleting some text from table

I have a some table data that looks like this:
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
How can I use jQuery to remove the text (This is some Text) but keep the span class?

You can set the html to the elements that should remain.
$(".homebranch").each(function() {
$(this).html($(".location", this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Another Texas</span>
</td>
</tr>
<table>

You need to access the text node that is the first child of the td and set the nodeValue to "". In order to do this, you must extract the td from the JQuery wrapped set by passing [0] to the set. This returns a regular DOM node, that you can then call firstChild on to get to the text node.
$("td.homebranch")[0].firstChild.nodeValue = "";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<table>

Getting nearest text box to radio button in table

I am having trouble getting the text box nearest to my selected radio button. Here is what I have tried so far which keeps returning me 'undefined'.
HTML:
<fieldset class="capacity-field">
<legend>Capacity</legend>
<table style="margin-bottom: 20px">
<tr>
<td>
<input type="radio" name="capacity" value="raw" checked>Raw (TB):
</td>
<td>
<input type="text" name="raw-capacity" value="256" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="usable">Usable (TB):
</td>
<td>
<input type="text" name="usable-capacity" value="161.28" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="effective">Effective (TB):
</td>
<td>
<input type="text" name="effective-capacity" value="161.28" size="2"> TB
</td>
</tr>
</table>
JavaScript/jQuery
function cap_growth_update(toUpdate) {
var capacity = $("input[name='capacity']:checked").next("input[type='text']").val();
alert(capacity);
}
$(document).ready(function(){
cap_growth_update("T");
});
I know the value of toUpdate is arbitrary at this point, but it will be used as a selector later down the line and thus is included.

The jQuery next() function looks for a sibling element, but since these elements are separated under different td elements, you'll have to climb up the DOM:
$("input[name='capacity']:checked").closest("tr").find("input[type='text']").val();
So what it does, is to go to the closest parent, and then search for the children text input.

Try using parents() with eq() and find()
$("input[name='capacity']:checked").parents().eq(1).find("input[type='text']").val();
Note this is only a suggestion I make based on your markup, your goal could be achieved in other ways (jQuery is a rich library to traverse and manipulate DOM)

$(function() {
$("input:radio").click(function() {
if ($(this).is(":checked")) {
var value = $(this).closest("tr").find("input:text").val();
}
});
});
The code checks for a click event on a radio element then check if the element is checked, if it's checked then obtain the parent row of the radio element, find an input text inside the row an get the value of the input text the it saves the value at the var value, so you can do whatever with the value :)
Regards!

Proper selector for this tag?

I cant seem to find the right jquery selector for this tag:
HTML:
<div class="span4 span4-mod">
<div class="well well-mod">
<h4 class="DomainDescription">Iniz LAX1</h4>
<span class="btn-block">
<button></button>
</span>
<form action="pinfo.php" method="post">
<input type="hidden" value="">
<button>History</button>
</form>
Port Status<br />
<span class="portstatus porton">21</span>
<table class="table" style="margin-top: 10px;">
<tbody>
<tr>
<td><strong>Distro:</strong></td>
<td class="showdistro">Debian 7.1</td>
</tr>
<tr>
<td><strong>Online since: </strong></td>
<td class="showonline">2 Days 10:29</td>
</tr>
</tbody>
</table>
</div>
I'm trying to search for the class "DomainDescription", and then search for the HTML within the class "showonline", and manipulate the latter.
I'm looking for the relationship of sibling (table) >child (tbody) > child (tr) > child (td)
Try as I may, I cant seem to find a proper selector for this kind of relationship.
I began by:
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).siblings().children(".showonline").html();
alert (PrintedUptime);
});
What should the proper selector be?

you can
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).closest('.well-mod').find(".showonline").html();
alert (PrintedUptime);
});
Demo: Fiddle

The correct css selector is:
.DomainDescriptor~table>tbody>tr>td>.showonline
I think that is correct, at least. Therefore, you can use:
$('.DomainDescriptor~table>tbody>tr>td>.showonline').each(function(){
alert(this.html());
})
to achieve the desired effect. This is not tested.

Change Table Cell Text Color when event form onchange is used

I looking for the right way (works in all most any Browser) to change cell table text color (which is a link) when the content in a form change using onchange event. I am using this:
JavaScript code
function changeColor(num){
if (num == "1"){
cont = num - 1;
answer[cont] = 1;
document.getElementById("cell_1").className="cellNumFilled";
}
HTML Code
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td><a class="cellNum" HREF="#preg1" title="1" id="cell_1">1</a></td>
<td><a class="cellNum" HREF="#preg2" title="2" id="cell_2">2</a></td>
<td><a class="cellNum" HREF="#preg3" title="3" id="cell_3">3</a></td>
</tr>
</table>
<div id="quesItem">
<p><b>1. [ 1 Pts.]</b> bla bla bla</p>
<p>Answer:
<input type="text" name="a6" maxlenght="200" size="20" onchange="changeColor(1)" />
<input type="button" value="Preview"/>
</p>
</div>
The complete "functional code" is in this jsfiddle.
When the content in the input box change, the color in the top of the table must change too. I am using two classes for tag , one by default and another one when content change through 'document.getElementById("idName").className="newClassName";' but doesn't work. Any idea why? or a better and simple way to do that?

Before setting class just remove that attribute like this
document.getElementById("cell_1").removeAttribute("class")
and then
document.getElementById("cell_1").setAttribute("class","cellNumFilled")

try the below :
document.getElementById("idName").setAttribute('class', 'className');
I hope it helps.

Select controls in table in next row using jQuery

I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.
How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Anchor to click -->
<a onclick="do stuff" href="javascript://">Select all</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<!-- CheckboxList -->
<table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
<tbody>
<tr>
<td>
<!-- input to select -->
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!

This is the jQuery I think you need:
// When the select link is clicked
$('#selectall').click( function ( ) {
\\ For each checkbox inside an element with class "link" set to checked
$('.list input[type=checkbox]').attr('checked','checked');
});
You need to change your link to this:
<a id="selectall" href="javascript:void( );">Select all</a>
Similarly, for deselect, jQuery:
$('#deselectall').click( function ( ) {
$('.list input[type=checkbox]').removeAttr('checked');
});
Link:
<a id="deselectall" href="javascript:void( );">Select all</a>
Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:
<div id="select_links">
<!-- Anchor to click -->
<a id="selectall" href="javascript:void( );">Select all</a>
<a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</div>
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</div>
</div>
EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);

It is as simple as just targeting all checkboxes and setting the checkbox.
$("#doIt").click(function(){
$("input[type='checkbox']").attr("checked", true);
});
If you want to remove the check
$("#doIt").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
Another option would be to use toggle() which can be used to toggle checkboxes on an off.
$("#doIt").toggle(function() {
$(this).text("Select All");
$("input[type='checkbox']").removeAttr("checked");
}, function() {
$(this).text("Deselect All");
$("input[type='checkbox']").attr("checked", true);
});
Code example on jsfiddle.

I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.
so you should have:
in your html:
<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>
in your javascript:
$('a.toggle_checks').click(function(){
$('table.list').children('input').attr('checked', this.id == 'select_on');
});
so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.