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

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>

Related

get parent element in a table

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>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

Set the checkbox to checked for input fields in the first 2 table rows

I want to set the checkbox to checked for input fields in the first 2 table rows of a table.
markup
<tbody>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
<td class="datatd">
<label id="">Option 1</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption"><!--want this checked on page load-->
</td>
</td>
<td class="datatd"><label id="">Option 2 </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="" class="checkinput financeOption">
</td>
<td class="datatd"><label id="">Option 3</label>
</td>
</tr>
I know I can use $( "").prop('checked', true); to set the property but struggling with figureing out how to target the first 2.
Thanks
You can use for example nth-child(-n+2) selector:
$('table tr:nth-child(-n+2) :checkbox').prop('checked', true);
http://jsfiddle.net/B8h7N/
Just slice them:
$("[type=checkbox]").slice(0,2).prop('checked', true);

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());
});

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Categories