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());
});
Related
I'm trying to get the parent element in a table. I have a checkbox and I want to check the checkbox parent element.
For example
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
In my getValue function, I would like to get the value 125.55. It will have multiples checkbox in the table inside a loop. Does anyone know how can I get this value? I can use JQuery or just JS.
Thanks
Try this snippet
function getValue(checkbox){
return checkbox.parentElement.parentElement.cells[0]
.getElementsByTagName("a")[0].innerHTML;
}
Here you go with the solution https://jsfiddle.net/21vdgoou/1/
getValue = function(e){
console.log($($(e).parent().prev().children()[0]).text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $195 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $155 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
</tbody>
</table>
I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>
You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.
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>
<table id="tb_Answers">
<tbody>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td colspan="4">
</tr>
</tbody>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
<td>
<td>
</tr>
<tr>
<td>
<input class="txt_Answer" placeholder="Enter Answer">
</td>
</tr>
</table>
I got 3 inputs with answers.How to get all this text/answer by class txt_Answer i tried this
$('*[class="txt_Answer"]').val()
but this returns me only the first value not all of thaem
By iterating and creating an array with $.map :
var values = $.map($('input.txt_Answer'), function(el) {return el.value;});
FIDDLE
You should also validate your HTML, as it's not valid
Try this code which is using the each method :
$('.txt_Answer').each(function() {
text = $(this).val()
alert(text)
})
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().