We Keep Coding

how to get table input sum value depend on select box? [duplicate]

How can I get the ID of the upper <td>’s <input> on click, in the up function? I tried so many ways like parent ID and previous ID but can not get that id.
function up(id) {
var data = $(this).prev("input[type=text]").attr('id');
alert(data)
}
<table>
<tr>
<td class="row">
<input class="latest" id="old" type="text" name="">
</td>
<td class="second margin_t8">
up
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</tr>
</table>
In that case, I get undefined. I want to get the previous <input> id in the alert. I need to find the data by id not by class.

Firstly, this is not pointing to the button which is clicked in this case as you don't use jQuery to add the event handler. However, you can use event.target to get the clicked element. Also, .prev() will return the previous element to the i tag which is undefined as it does not have any siblings.
Updated:
function up(id){
var data = $(event.target).closest('td').prev().find('input[type="text"]').attr('id');
alert(data);
}

Try passing the sender (which element is calling the function) as an argument to the function like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
<script>
function up(sender) {
var data = $(sender).prev("tr").find("input[type=text].latest").attr('id');
alert(data);
}
</script>
Hope this helps in getting the previous row's input's id!!

function up(element) {
var data = $(element).parent().prev().find("input[type=text]").attr('id');
alert(data)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
ss
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>

Try this out (not tested)
var data=$(this).closest('.form-grid-view-row').first().children("input[type=text]").attr('id');

Jquery / CSS: Change the css of a cloned tr

I am trying to clone a hidden table row, paste it and make it visible. For some reason the tr stays hidden. I've tried different ways but in the end I can not find a solution.
This is my code:
$(document).ready(function() {
$('#addproduct').click(function(e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
$('#hiddenTemplate').after(item);
$('#hiddenTemplate').css("visibility", visible);
});
});
#hiddenTemplate {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>

Your code is missing quotes around visible:
$('#hiddenTemplate').css("visibility", "visible");
(and as said in the comments, use a class rather than an id)

There where 3 misstakes in your code
remove Attribute id
$('#hiddenTemplate').css("visibility", "visible");
see 2 and do it on $(item)
$( document ).ready(function()
{
$('#addproduct').click(function (e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
item.removeAttribute('id');
$('#hiddenTemplate').after(item);
$(item).css("visibility", "visible");
});
});
#hiddenTemplate
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>

Accessing elements of class="input-append"

I'm using class="input-append" in <tr> so each row contains different inputs, and i have a button to append new inputs row,
<tr class="input-append">
<td>
<span>Person {{$index+1}}</span>
</td>
<td align="center">
Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</tr>
for example:
ID,Name,Age , when i click the button a new row will be added. how i can access the inputs in javascript ?!! for example i want to access the Age in the second row.
regards.

Use document.getElementsByClassName() and QuerySelector
trs = document.getElementsByClassName("input-append");
personName = trs[1].querySelector("input[ng-model='person.name']").value;
personAge = trs[1].querySelector("input[ng-model='person.age']").value;
and your html
<table>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</td>
</tr>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name" value="testName"> Age: <input type="text" ng-model="person.age" value="testAge">
</td>
</td>
</tr>
</table>
See demo: http://jsbin.com/xemehoxono/edit?html,js,output

Why am I not able to access the inner div and input element contained in div in the following scenario?

I'm having a very length web page HTML. For your reference I'm putting below a representative HTML. Like this HTML all other HTML is there on my webpage.
<tr class="bulkop">
<td valign="middle">
<p class="custom-form">
<div class="ez-checkbox">
<input id="practice_6_189" class="custom-check ez-hide" type="checkbox" onchange="enable_text_boxes('practice_6_189')" value="189" name="practice_topics_6[]">
</div>
<label>Enviornmetal Chemistry</label>
<input type="hidden" value="Enviornmetal Chemistry" name="topic_names[189]">
</p>
</td>
<td valign="middle">
<em>Total 150</em>
<input id="practice_6_189_1" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_1">
<input type="hidden" value="150" name="practice_available_questions_6_189_1">
</td>
<td valign="middle">
<em>Total 81</em>
<input id="practice_6_189_2" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_2">
<input type="hidden" value="81" name="practice_available_questions_6_189_2">
</td>
<td valign="middle">
<em>Total 122</em>
<input id="practice_6_189_3" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_3">
<input type="hidden" value="122" name="practice_available_questions_6_189_3">
</td>
</tr>
<tr class="bulkop">
<td valign="middle">
<p class="custom-form">
<div class="ez-checkbox">
<input id="practice_6_190" class="custom-check ez-hide" type="checkbox" onchange="enable_text_boxes('practice_6_190')" value="190" name="practice_topics_6[]">
</div>
<label>Structure of Atom</label>
<input type="hidden" value="Structure of Atom" name="topic_names[190]">
</p>
</td>
<td valign="middle">
<em>Total 810</em>
<input id="practice_6_190_1" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_1">
<input type="hidden" value="810" name="practice_available_questions_6_190_1">
</td>
<td valign="middle">
<em>Total 394</em>
<input id="practice_6_190_2" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_2">
<input type="hidden" value="394" name="practice_available_questions_6_190_2">
</td>
<td valign="middle">
<em>Total 321</em>
<input id="practice_6_190_3" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_3">
<input type="hidden" value="321" name="practice_available_questions_6_190_3">
</td>
</tr>
For your reference I've just put in two <tr> tags. Actually there are many such <tr> my HTML is having. Now I want to access the inner div and the input contained in the div for all the <tr> tags present in a page. For that I wrote follwoing jQuery but not able to apply the said class to div as well as input present inside div. I'm not getting any error in the console. Can you correct me if I'm going in wrong way in manipulating the HTML elements? Thanks in advance. My jQuery function code is as below:
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
$('tr .bulkop td p div .ez-checkbox').toggleClass("ez-checked", this.checked);
$('tr .bulkop td p div .ez-checkbox input').toggleClass("ez-checked", this.checked);
var id_checkboxes = $('tr .bulkop td p div .ez-checkbox input').map(function() {
return this.id;
}).get();
for (var i = 0; i < id_checkboxes.length; i++) {
toggle_question_count('#'+id_checkboxes[i]);
}
});
});
I'm not able to toggle the classes. Please help me to solve this issue.

because you can't have a <div> inside a <p> it's invalid markup.... see??

Correct selector is not 'tr.bulkop td p div.ez-checkbox', but 'tr.bulkop td p div.ez-checkbox'. It because of difference between specifying and children selectors: removing spaces between tag name and class will make selector to find element with this tag name and class.

How to select element except its children?

I have simple table which looks like this:
<table>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="error">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
When i click on tr i need to add custom class to it, but only whe i click on tr, not on the input inside it. How to do this?
I tried something like this:
table.find('tbody').on('click', 'tr:not(input)', function(){
jQuery(this).toggleClass('error');
});

table.find('tbody').on('click', 'tr', function(e) {
if (e.target != this)
return;
$(this).toggleClass('error');
});

I think the best you can do here is check the node name to see if it is the td or the tr - or include other tags if you want.
$('tbody').on('click', 'tr', function (e) {
if (e.target.nodeName.toLowerCase() === "td" || e.target.nodeName.toLowerCase() === "tr") {
$(this).toggleClass('error');
}
});
If you specifically want the input excluded, you could then exclude those:
$('tbody').on('click', 'tr', function (e) {
if (!$(e.target).is(':input')) {
$(this).toggleClass('error');
}
});

You can stop the event from bubbling up to the tr element by using event.stopPropagation:
table.find("tr").on("click", function () {
jQuery(this).toggleClass("error");
}).find("input").on("click", function (event) {
event.stopPropagation();
});
Here's some documentation for ya if you'd like to know more: http://api.jquery.com/event.stopPropagation/
Here's a JSFiddle of the solution: http://jsfiddle.net/tM59b/1/

Add a click listener to the input and return false; from it to stop the event from propagating to the tr.
Like so:
$('tr input').click(function(e){
return false;
});