Develop Reference

Fetched value is undefined jquery (traversal)

Actually am using Jqgrid but in browser console html look like this
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value='10'>hello <input>
</td>
<td>
<input type="text" id="priority_2per" value='20'>hellob <input>
</td>
</tr>
</tbody>
there is a column: "priority1" "priority2" which has textbox
$('body').on('change', '#priority_1per', function () {
//debugger;
var priority1 = $(this).val();
var priority2 = $(this).closest("tr").children("td").find("input[type=text]").find("#priority_2per")
alert(priority1)
alert(priority2)
console.log(priority2)
});
=>var priority1 am getting value (this).val()
=> but am not getting value of priority2 column data (i dono am doing crrt traversing or not)
jQuery.fn.init [prevObject: jQuery.fn.init(10)]
length: 0
prevObject: jQuery.fn.init(10) [input#productpriority.form-control.productpriority, input#divisionname.form-control._division.ui-autocomplete-input, input#categoryname.form-control.category.ui-autocomplete-input, input#subcategoryname.form-control.subcategory.ui-autocomplete-input, input#priority_1.form-control.plantname.plantCode1, input#priority_1per.form-control.priority_1per.number, input#priority_2.form-control.plantname.plantCode2, input#priority_2per.form-control.priority_2per.number, input#priority_3.form-control.plantname.plantCode3, input#priority_3per.form-control.priority_3per.number, prevObject: jQuery.fn.init(12)]
[[Prototype]]: Object(0)
this is the error am finding (not an error but mistake in travesal)
PLEASE help me out
html look like

The problem is due to your find() logic. You use the first find() to get both the input type="text" elements, then the second is trying to find a child #priority_2per element inside the first input. This clearly cannot be found as it's not valid HTML.
To fix the problem remove the first find() and add val():
var priority2 = $(this).closest("tr").children("td").find("#priority_2per").val()
However as the elements have id attributes on them, and id have to be unique in the DOM, then the traversal logic is entirely redundant. You can just select by the id directly.
In addition, your HTML is invalid. <input /> elements have no closing tag. Here's a full working example:
$('body').on('change', '#priority_1per', function() {
var priority1 = $(this).val();
var priority2 = $("#priority_2per").val();
console.log(priority1);
console.log(priority2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value="10" />hello
</td>
<td>
<input type="text" id="priority_2per" value="20" />hellob
</td>
</tr>
</tbody>
</table>

Get the selected rows from a table

I have a table that has 10 rows and 3 columns and each row has a checkbox associated with it. The user can select any number of rows and when he presses the Submit button an alert message needs to be displayed containing the values in all the selected rows preferably as a JSON string. How do I extract all the selected rows alone and convert it to a JSON string using either Javascript or Jquery?

I hope I've understood your requirements well. Please consider this solution.
$('#btn-table-rows').click(function (event) {
var values = [];
$('table #row-selector:checked').each(function () {
var rowValue = $(this).closest('tr').find('td.row-value').text();
values.push(rowValue)
});
var json = JSON.stringify(values);
alert(json);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #1: Hello</td>
</tr>
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #2: World</td>
</tr>
</table>
<button id="btn-table-rows">Process</button>

How to disable tbody

I have a tbody inside which there are href/input type text/ etc
I have a code to get all elements of tbody but how to disable it.
My tbody
<tbody id="FamilyHistory_3">
<tr>
<td class="tablecell">
<a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
<img style="border-style: none" src="../images/v10/arrow_doc.png">
</a> test
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td></td>
<td class="tablecell">
<input type="checkbox" value="Yes" name="10627_316098">Yes
<input type="checkbox" checked="" value="No" name="10627_316098">No
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="2px"></td>
</tr>
</tbody>
Below is my code to get the content of tbody
function save(inputID,category){
var content= document.querySelectorAll('#tbodyID');
for(var i=0; i<content.length; i++){
// how to disable all the elements inside it
}
}

JSFiddle
document.querySelector('#tbodyID input').disabled = true;
You don't need jQuery for this.
For more than one:
JSFiddle
var l = document.querySelectorAll('#tbodyID input');
for (i = 0;i<l.length;i++)
{
l[i].disabled = true;
}

There's no need to loop, jquery can deal with groups of elements just using selectors.
Use the Jquery selectors and the prop function to add disabled="disabled" to each one.
You can also select multiple items using a comma separated list
$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);
disabling an a tag will not prevent it from being clicked though. May be better to hide() these.
$('#tbodyID a').hide();

You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:
$('#tbodyID').find('a, input').prop('disabled', true);
Explanation
$('#tbodyID') : Select the element with id tbodyID
find('a, input') : Find all the a and input elements inside it
prop('disabled', true) : Set the disabled property of each element returned by the previous command

Based on your answer finally I accomplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.
Disable input
$('[id='+inputID+']').find('input').attr('disabled', true);
id of tbody
Disable click but clickable hand will be there but no request will be submitted to server
$('[id='+inputID+']').attr('onclick','').unbind('click');
id of anchor tag
Thanks,Pise

Get values of one column and pass it to another

I have a table and if I click a button i want to take the value from charge_outstanding_NUM and set charge_receipt_NUM to it. I need a reusable script because I will not know how many rows will get posted through.
<table>
<thead>
<tr>
<th>ID</th>
<th>Value</th>
<th>Outstanding</th>
<th>Reciept</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>150.00</td>
<td id="charge_outstanding_1">150.00</td>
<td><input type="text" name="charge_receipt_1" id="charge_receipt_1" value=""></td>
</tr>
<tr>
<td>002</td>
<td>10.00</td>
<td id="charge_outstanding_2">10.00</td>
<td><input type="text" name="charge_receipt_2" id="charge_receipt_2" value=""></td>
</tr>
<tr>
<td>003</td>
<td>250.00</td>
<td id="charge_outstanding_3">250.00</td>
<td><input type="text" name="charge_receipt_3" id="charge_receipt_3" value=""></td>
</tr>
</tbody>
</table>
My jquery isn't working and I am not sure why. I click the button then loop through each col that starts with 'charge_outstanding_' then take the value and assign it to the closest input which is within the same row.
$('#pay_in_full').click(function(){
$("[id^=charge_outstanding_]").each(function(){
charge = $(this).val();
$(this).closest('input').val(charge);
});
});

working JSfiddle: http://jsfiddle.net/F5NvW/2/
Issue with your code: charge = $(this).val(); you are finding td which has no value, you need .html() for this
$(document).on("click", "#pay_in_full", function() {
$("[id^=charge_outstanding_]").each(function(){
var charge = $(this).html();
$(this).next().find('input').val(charge);
});
});
Suggestion: use class name with each <td> like this
Jsfiddle: http://jsfiddle.net/F5NvW/
Note: less error prone..
$(document).on("click", "#pay_in_full", function() {
$(".outstanding").each(function(){
var charge = $(this).html();
$(this).next().find('.paidAmount').val(charge);
});
});

.Closest will search for the ancestor elements, In your case the target input is the children of the next sibling of the selected element. So you have to use .find() or .children() to select that.
Try,
$('#pay_in_full').click(function(){
$("[id^='charge_outstanding_']").each(function(){
charge = parseInt($(this).text());
$(this).next().find('input').val(charge);
});
});
Additionally, You are selecting a td element, so you have to use .text() to get its text not .val()
DEMO

jquery selection of child elements given status of sibling

given a html such as:
<ul id="timesheetList">
<li>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" class="bigcheck">
</td>
<td>
<p class="hiddenId">73</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" class="bigcheck">
</td>
<td>
<p class="hiddenId">44</p>
</td>
</tr>
</tbody>
</table>
</li>
<!-- the list goes on... -->
how can I select all the IDS ( in this case 44 and 73 ) for all the "checked" (whose status is checked) chechboxes whose class is "bigcheck" ?
thanks

You can use something like this:
var tds = $('td p.hiddenId').filter(function() {
return $(this).parent().prev().children('input.bigcheck:checked').length != 0;
});
// tds contains the list of TDs matching your criteria

First get all the checked checkboxes. U can use
$("input:checkbox[name=type]:checked").each(function(){
});
Then, u need to get to the TD, using parentNode()
Then, use nextSibling(), to reach immediate next TD.
Then, TD.childNodes[1].innerHTML, will give u the result
Note: If u r using this approach, then ur structure should remain same.

Try this:
var ids = [];
$("td > input.bigcheck:checked").each(function() {
ids.push($(this).parent().next("td").children("p").text());
});
console.log(ids);
You should wait for answers that might offer you a complete solution that works, instead of accepting something that is just guidance