We Keep Coding

Getting next element in a table javascript

https://jsfiddle.net/en6jh7pa/1/
I am having issues grabbing the next element, it is returning null for the next element.
I am passing "this? as onclick and I assumed that you could use this to grab the next element but it seems that it instead returns null
Thanks for your help
function assignnames(checkboxelement){
checkboxelement.setAttribute("name", "checkbox");
var value1box = checkboxelement.nextSibling;
value1box.setAttribute("name", "notnull");
var value2box = checkboxelement.nextElementSibling;
value2box.setAttribute("name", "notnull");
alert("done");
}
<table border="1">
<tr>
<th>
Checkbox
</th>
<th>
value1
</th>
<th>
value2
</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
</td>
<td>
<input type="text" name="" id="fname1">
</td>
<td>
<input type="text" name="" id="lname1">
</td>
</tr>
</table>

If you want to get the text inputs in the same row, you can go up to the row, then use a selector to get the inputs, e.g.
function getParent(node, tag) {
var tag = tag.toLowerCase();
do {
if (node.tagName.toLowerCase() == tag) {
return node;
}
node = node.parentNode;
} while (node && node.tagName && node.parentNode)
return null;
}
function getInputs(evt) {
var row = getParent(this, 'tr');
var inputs;
if (row) {
inputs = row.querySelectorAll('input[type="text"]');
}
console.log(`Found ${inputs.length} text inputs, node is ${this.checked? '':'not '}checked.`);
}
window.onload = function(){
document.getElementById('checkbox1').addEventListener('click', getInputs, false);
};
<table border="1">
<tr><th>Checkbox
<th>value1
<th>value2
<tr><td><input type="checkbox" id="checkbox1">
<td><input type="text" name="" id="fname1">
<td><input type="text" name="" id="lname1">
</table>

For the inputs to be siblings, they would all have to be within the same <td>, sharing a singular parent. With them spread out across multiple table cells, they would be considered cousins instead (keeping with the family tree metaphor), which doesn't have a similar shortcut property.
You can still use nextElementSibling along the way between inputs, but you'll also have to move up and back down between generations.
function assignnames(checkboxelement){
checkboxelement.setAttribute("name", "checkbox");
var value1box = checkboxelement
.parentElement // up a generation the checkbox' parent <td>
.nextElementSibling // then to the next <td> in the row
.firstElementChild; // and back down a generation to the next input
// the last step could also be: .querySelector('input')
value1box.setAttribute("name", "notnull");
var value2box = value1box
.parentElement
.nextElementSibling
.firstElementChild;
value2box.setAttribute("name", "notnull");
alert("done");
}
<table border="1">
<tr>
<th>
Checkbox
</th>
<th>
value1
</th>
<th>
value2
</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
</td>
<td>
<input type="text" name="" id="fname1">
</td>
<td>
<input type="text" name="" id="lname1">
</td>
</tr>
</table>

How to remove a certain value if another value cleared? | AngularJs

I have a form where user select items and set quantity and and the price auto calculated with ng-value= quantity*price. My problem is that if user clear the item input field. the other values (quantityu and price) not removed programmatically.
My view:
<tr ng-repeat="sellAcc in sellAccessories">
<td colspan="2">
<input type="text" id="sellAccessName{{$index}}"
list="sellAllaccessories{{$index}}"
ng-model="sellAccessories[0].name[$index]"
ng-change="getItemSellingPrice($index); isExistItem($index)" >
<datalist id="sellAllaccessories{{$index}}" >
<option ng-repeat="access in allAccessories" data-item="{{access.id}}" value="{{access.name}}">
</datalist>
</td>
<td colspan="1">
<input type="number" ng-model="sellAccessories[0].quantity[$index]">
</td>
<td colspan="2" >
<input type="text" ng-model="sellAccessories[0].total_price[$index]"
ng-value="sellAccessories[0].total_price[$index]=sellAccessories[0].quantity[$index] * access_s_price[$index]"
readonly>
</td>
</tr>
JS:
$scope.sellAccessories=[{"id": [],"name": [], "quantity": [],"total_price": []}];
i store all values in the array using ng-model=sellAccess[0].name[$index], the problem is that if user removed the item name, what happens is name array will not be equal to the quantity and total price
.Assume that the user select 4 items and then remove an item that have quantity=4, then this what will happen:
name=["Nescafe","Pepsi","Tobacco"]`
quantity[1,4,2,5]`
while it should be:
name=["Nescafe","Pepsi","Tobacco"]`
quantity[1,2,5]`
many thanks for any help.

Disable checkboxes that contain different attribute

I am trying to disable checkboxes that have different warehouse locations once a warehouse is selected. For example, if I check California I want to disable all the checkboxes that are from other states. I am trying to do it based on the attribute whseID but I can't figure out how to have jquery make that distinction between that attribute. Sometimes I will ship multiple items from 1 warehouse. So when I check 1 checkbox in California I need the other one in California to remain enabled but I need Washington and Arizona disabled.
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr class="grdnt">
<th style="color:black;">Checkbox</th>
<th style="color:black;border-left:1px solid;">Warehouse</th>
<th style="color:black;border-left:1px solid;">Item</th>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29458</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="WA" />
</td>
<td class="Whse">Washington</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="AZ" />
</td>
<td class="Whse">Arizona</td>
<td class="Item">J29478</td>
</tr>
</table>
$(document).on('click', '.tfrCheck', function () {
var allCheckBox = $(".tfrCheck");
var count_checked = allCheckBox.filter(":checked").length;
var whseID = $(this).attr('whseID');
if (count_checked >= 1) {
$(".tfrCheck:contains(whseID)").attr('disabled', 'disabled');
//$(".tfrCheck:not(:checked)").attr('disabled','disabled');
} else {
$(".tfrCheck").removeAttr('disabled');
}
});
JSFIDDLE

Ragnar's answer is close, but since you want OTHER states to be disabled, use
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');

Try using this line:
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');

The "attribute not equal selector" should help:
allCheckBox.filter('[whseID!="' + whseID + '"]').attr('disabled', true);
http://jsfiddle.net/oxkeL7jm/4/

How to get the label value from table row when row number is known, using Javascript

I have a table like this-
<table>
<tr>
<td>
<label id="lbl1" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl2" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl3" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
</table>
My problem is that I want to alert the value of label present in the second row's first column. Assume that I don't know label id means I know its pattern like lbl1,lbl2 or lbl3.. but not exactly what it is in the second row.

If you are okay to use jQuery use this fiddle
var label = $('table tr:eq(1) td:eq(0)').find("label").attr("value")
alert(label);

You can use something like next
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++)
if (labels[i].id && labels[i].id.indexOf("lbl") == 0){
//you have found the label in the first row
}

You Can get label value by class name
$("label[class=lblclass]").each(function() {var result= $(this).val(); });
(OR)
You can get the Particular Label Value by ID
function getlabel_value(){var result=$('#lbl1').val();}

Do not save data from editing ngModel

I have table which dynamically add data. When I edit data in first table it is not saved in the first or the second table but should be.
$scope.correctiveData = [
[
{"name":"Description of Corrective Action (1)","values":[]},
{"name":"Action Taken By (name) (1)","values":[]},
{"name":"Company (1)","values":[]},
{"name":"Date (1)","values":[]}
]
];
/*---------------First table-----------*/
<tr ng-repeat="col in correctiveData">
<td><textarea>{{col[0].values[0]}}</textarea></td>
<td><input type="text" value="{{col[1].values[0]}}"></td>
<td><select ng-model="col[2].values[0]">
<option ng-repeat="com in company">{{com.name}}</option>
</select>
</td>
<td>
<div class="input-append" id="date" class="datetimepicker" time ng-model="col[3].values[0]">
<input class="span2" class="inputIcon" type="text" data-format="MM/dd/yyyy HH:mm PP" ng-model="col[3].values[0]" required pattern="\d\d/\d\d/\d\d\d\d\s\d\d:\d\d\s(AM|PM)">
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>
</td>
</tr>
/*--------------------Second table-------------------*/
<tr ng-repeat-start="data in correctiveData">
<td>{{data[0].name}}</td>
<td>{{data[0].values[0] || 'required'}}</td>
</tr>
<tr>
<td>{{data[1].name}}</td>
<td>{{data[1].values[0] || 'required'}}</td>
</tr>
<tr>
<td>{{data[2].name}}</td>
<td>{{data[2].values[0] || 'required'}}</td>
</tr>
<tr ng-repeat-end>
<td>{{data[3].name}}</td>
<td>{{data[3].values[0] || 'required'}}</td>
</tr>
When I wrote data from javascript like below
"{"name":"Description of Corrective Action (1)","values":['Some value']}"
it's show in both of tables but when I edit it it doesnt save.
Also tables are in two different templates wich loads from two different files but have same controller.