Disable all controls of a table column using jQuery - javascript

I am looking to disable all the elements (controls) of specified table columns (td's) using jQuery.
My table looks like the following :
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
The table is generated dynamically, but this is how it is rendered as. Now each of my <td> has multiple controls like select, checkbox, buttons, but not fixed for every row and column. I am looking to disable all controls of a specified <td> by using it's Id.
I used the following jQuery, but it doesn't seemt to do the job :
$('#' + td_id).select('*').each(function(element){element.disabled=true});
I have also tried the following, still it doesn't seem to work :
$('#' + td_id).attr('disabled', 'false');
Am I doing something wrong? Please help.
Thanks!

try this
$('#' + td_id).find(':input').prop("disabled", true);
:input select all the input elements

if you need to disable all controls in a column (multilpe rows) I think the best way is to assign a class to each td in that column.
For examle if you want to disable controls in the second column, you may do something similar:
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol" class="col-2"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol" class="col-2"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
Than, using JQuery you can do this:
$(".col-2 :input').prop("disabled", true);
It should work...

I think this should work :
<table>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>1233</option>
</select>
</td>
</tr>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>second</option>
</select>
</td>
</tr>
Now to disable only first "td" you should use:
$('tr').children().eq(0).find(':input').prop("disabled", true);
If you are using JQuery1.6 or above use prop() else use attr().

Related

Un/Check checkbox in table found by name (table value)

I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o
First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>

How to find the previous element height using jquery

I have a table which is defined like:
<table>
<tr>
<td>
<label>First</label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Second</label>
</td>
<td>
<select style='widht:100px; height:150px;'>
<option>one</one>
</select>
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label></label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Third</label>
</td>
<td>
<textarea style='widht:500px; height:200px;'></textarea>
</td>
<td>
<button class='but'></button>
</td>
</tr>
</table>
Then on button click I want to get the height of the previous control. So I wrote this code:
$(".but").live('click',function(){
alert($(this).prev().css('width'));
alert($(this).prev().css('height'));
});
But the alert's are showing the values as undefined. How can I solve this?
Use:
var input = $(this).parent().prev().find("input");
if(input) { // You have a select, so this won't be found in all circumstances
alert(input.css('width'));
alert(input.css('height'));
}
Use real width() to get real width of an element instead of width defined in css (.css('width')). The same applies for height:
$(".but").live('click',function(){
alert($(this).prev().width());
alert($(this).prev().height());
});
you can try: jsFiddle
$(".but").live('click',function(){
alert($(this).closest("tr").find('input').css('width'));
// OR
//alert($(this).closest("tr").find('select').css('width'));
});
In fact there is no previous target of your buttons.
If you want the TD height, you should call .parent() instead.
And please, pay attention to your HTML !
EDIT: Fiddle updated:
http://jsfiddle.net/jVsRW/4/
$(".but").on('click', function() {
// Of course display null for the first button that do not have a previous form element.
alert($(this).closest('tr').prev().find('input, select, textarea').height());
});

change text in table cell using rowIndex and cellIndex

I got index of a row. Column count is static so I know in which column to put what, but what I want is to be able using onclick event handler to change content in the specific cell. the element which has this onclick event applied is outside the table with all the text inputs that I want to copy contents from. a brief example
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
<div id="box1">
<form>
<input type="text" name="newText"/>
<input type="button" onclick="?" />
</form>
</div>
You can get to this specific cell using something like:
$('#table1 tr:eq(1) td:eq(1)')
Here it will select second row's second column (it's 0 based counting).
And then you can use jQuery.text() or jQuery.html().
You may do something like the following:
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
Then in you onclick method you can do something like following:
$('#table1 tr:eq(1) td:eq(1)').text("Whatever text you want");
OR
$('#table1 tr:eq(1) td:eq(1)').html("Whatever text you want");
you can use the java script and id.
<table id="table1">
<tr>
<td id=r1c1>SomeText</td>
<td id=r1c2>SomeOtherText</td>
</tr>
<tr>
<td id=r2c1>SomeText2</td>
<td id=r2c2>SomeOtherText2</td>
</tr>
</table>
<script>
function updatetxt(){
x=Document.getElementById(r1c1);
x.value=Document.getElementById(txt1).value
}
</script>
<div id="box1">
<form>
<input type="text" id=txt1 name="newText" />
<input type="button" onclick="updatetxt()" />
</form>
</div>

Find previous div of a specific class with Jquery

I use jquery and I want to find the previous div which has the "error" class
My html code :
<table class="questions">
<tr>
<td class="heading">1
<div class="error"></div>
</td>
<td colspan="4">
<textarea class="textcontrol required" name='questionT136'>
</textarea>
</td>
</tr>
<tr>
<td></td>
<th><label for="reponse137-3">Très satisfaisant</label></th>
<th><label for="reponse137-4">Satisfaisant</label></th>
<th><label for="reponse137-5">Insatisfaisant</label></th>
</tr>
<tr class="q">
<td class="heading">
2
<div class="error"></div>
</td>
<td class="questionradio"><input class="required" id='reponse137-3'
name='questionN137' type='radio' value='3'></td>
<td class="questionradio"><input class="required" id='reponse137-4'
name='questionN137' type='radio' value='4'></td>
</tr>
</table>
For example, from reponse137-3, I'd like to change the value the previous class="error". I allready tryied to access to that object with :
$('#reponse137-3').prev(".error")
but it doesn't work. I think because it hasn't the same parent, so I tryied :
$('#reponse137-3').prev("tr").next(".error")
How can I do ?
Assuming your .error div is always in the same table row:
$('#reponse137-3').closest('tr').find('.error:first');
http://jsfiddle.net/vkfF8/
You need to go up three times to arrive to table, and later find error
$('#reponse137-3').parent().parent().parent().find('.error');
First parent go to th, second to tr and thirth to table, then find within table what element has class named .error And you will get it

How to automagically check radio button on select of dropdown?

I've seen a few answers for this already, but none that I have been able to make work. I have the following form:
<form method="post" action="submit.php">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><strong>With selected</strong><br /> </td>
</tr><tr>
<td colspan="2"><input type="radio" name="select_action" value="delete" id="delete"/><label for="delete"> delete</label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_room" id="assign_to_room"/> assign to room:</td>
<td><label for="assign_to_room">
<select name="assign_to_room"></select></label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_board" id="assign_to_board"/> assign to board:</td>
<td><label for="assign_to_room">
<select name="assign_to_board"></select></label></td>
</tr>
<tr><td colspan="2"><br /><input type="submit" value="submit"/></td></tr>
</table>
</form>
In Chrome when I select the dropdown, it automatically selects the corresponding radio button, but in IE it does not. How do I achieve this with cross-browser support? I don't mind using JS if I have to.
Try using an on change event to get a radio button by id then change it's value to selected. Just an idea.

Categories