We Keep Coding

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>

Trying to find previous DOM elements and get input value jquery

I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>

The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>

I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});

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>

Getting the sum of all radio button values to display in a table

I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together

You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons

First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.

KnockoutOut JS - why are these values not binding correctly?

I have this knockout observable array and I am trying to bind some of its values to my view. Where I am having difficulties is because its nested. I am not sure what the correct data-bind syntax is.
This is my observable array data:
I want to bind advertiserName within advertiser.
This is my HTML
<table id="tblBrand">
<thead>
<tr>
<th>Brand Name</th>
<th>
<button data-bind='click: $root.addBrand'>Add Brand</button></th>
</tr>
</thead>
<tbody data-bind="foreach: brands">
<tr>
<td>
<input data-bind="value: brandName" readonly="true" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input data-bind="value: advertiser.advertiserName" />
</td>
<td>
<input data-bind="value: advertiser.advertiserRank" />
</td>
</tr>
</table>
<td>
Remove
</td>
</tr>
</tbody>
</table>
The way my binding works is I am looking within each brand. Each brand has an advertiser object and I want to drill into that. The second screenshot shows my syntax and what the page renders.

Because your advertiser is ko.observable you need to get its value with advertiser() if you are using it inside an expression:
<table>
<tr>
<td>
<input data-bind="value: advertiser().advertiserName" />
</td>
<td>
<input data-bind="value: advertiser().advertiserRank" />
</td>
</tr>
</table>
Or you can use the with binding:
<table data-bind="with: advertiser">
<tr>
<td>
<input data-bind="value: advertiserName" />
</td>
<td>
<input data-bind="value: advertiserRank" />
</td>
</tr>
</table>