Develop Reference

How to hide table header row if no child rows, but show header row again if button clicked

I have a table with existing jobs and have a button to add new rows to that table if the user wants to add another job. When the user first clicks on the Add New button, a header appears above the first row. There is also the option of removing rows and this is where my problem comes in.
I want the header row to disappear if the user deletes all the rows that they added, but the problem is getting the header row to show up again when the user clicks the Add New button again.
I tried setting the display to none, which worked fine, but when the user starts adding rows again, the header doesn't appear. Setting visibility to hidden works too, but then you see an empty space where the header should be. I also tried adding an if statement to where the header row is displayed for the first time (setting it to table-row if set to none), but then the Add New didn't work at all.
I cannot use jQuery because the page uses MooTools and they conflict. I am very new at MooTools and fairly new to JavaScript, so if someone could point me in the right direction, I would be most grateful.
$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
try {
e.preventDefault();
.
.
.
if (document.getElementById('addNewJobHeader').style.display !== 'none' && el.get('data-row-id') === '1') {
document.getElementById('addNewJobHeader').setStyle('display', 'none');
}
rewriteeditingselections();
} else {
.
.
.
}
}
} catch (e) {
.
.
.
}
});
function showHeaderRow() {
showHeaderRow = function() {};
Elements.from(connectjobheadertemplate({})).inject($('linkedJobsBody'));
}
function addChildJobRow() {
try {
lastrow++;
let cl = (lastrow % 2 ? 'odd' : 'even');
showHeaderRow();
var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
Elements.from(connectedjobtemplate({
rownum: lastrow,
cl: cl,
ref: refNum,
nysid: '',
dinNum: '',
warrantNum: ''
})).inject($('linkedJobsBody'));
} catch (e) {
.
.
.
}
}
EDIT:
Adding HTML:
Table for existing jobs:
<form method="post" id="linkedJobsForm" action="###" name="linkedJobsForm">
<table width="100%">
<thead>
<tr class="odd">
<th align="center">Chk</th>
<th>Ref #</th>
<th>Pages</th>
<th>Order Date</th>
<th>NYSID</th>
<th>DIN#</th>
<th>Warrant Number</th>
</tr>
</thead>
<tbody id="linkedJobsBody">
<tr id="connectjobrow0" class="tc ec" data-row-id="0" data-connected-job="44752">
<td width="50" align="center">
<input type="checkbox" name="copyid[]" value="44752" />
</td>
<td>
### </td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][pages]" onkeyup="setPages(this.value, this.id)"
value="53" class="pages" size="3"/>
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="date[0]"
name="connectedjob[0][orderDate]" onblur="reformatDate(this.value, this.id)"
value="Dec 16, 2015" class="datefield orderDate" size="10">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][nysid]" class="nysid" onkeyup="setNYSId(this.value, this.id)"
data-row-id="0" id="nysid[0]"
name="connectedjob[0][nysid]" class="nysid"
value="11991495H">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text"
data-row-id="0" id="pages[0]"
name="connectedjob[0][dinNum]" class="dinNum" onkeyup="setDinNum(this.value, this.id)"
data-row-id="0" id="dinNum[0]"
name="connectedjob[0][dinNum]" class="dinNum"
value="13R2708">
</td>
<td>
<input style="background-color: transparent; border: none;" type="text" onkeyup="setWarrantNum(this.value, this.id)"
data-row-id="0" id="pages[0]"
name="connectedjob[0][warrantNum]" class="warrantNum"
value="0739791">
</td>
</tr>
</tbody>
</table>
Buttons:
<div style="float: right;"><button id="add-new-row" style="text-align:center;margin-top:5px;width:85px;" class="boxbutton">Add New</button> <button style="text-align:center;margin-top: 5px; width: 60px;" id="save" class="boxbutton">Save</button></div><br> </form>
Templates:
<script id="connectjobheadertemplate" type="text/plain">
<table>
<tr class="odd even" id="addNewJobHeader" style="display:table-row;">
<td colspan="7">
<table width="100%" style="border:0px;border-style:hidden;">
<thead>
<tr>
<th style="width: 15%;">Name</th>
<th style="width: 15%;">Ref #</th>
<th style="width: 5%;">Pages</th>
<th style="width: 15%;">Order Date</th>
<th style="width: 15%;">NYSID</th>
<th style="width: 15%;">DIN#</th>
<th style="width: 15%;">Warrant Number</th>
<th style="width: 4%;"></th>
</tr>
</thead>
</table>
</td>
</tr>
</table>
</script>
<script id="connectedjobtemplate" type="text/template">
<tr id="childjobrow1" class="odd" data-row-id="1">
<td colspan="7">
<table width="100%" style="border:0px;border-style:hidden;">
<tr>
<td style="width: 15%;">
<input class="childjobid" type="hidden" id="childjobid1" name="childjobid[1][transcribername]" value="0" />
<input type="hidden" id="transcriberid[1]" name="childjobid[1][transcriberid]" value="" />
<input data-row-id="1" id="assignee[1]" name="childjobid[1][transcribername]" class="" list="transcribers" autocomplete="off" value="" placeholder="Name" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="reference[1]" name="childjobid[1][reference]" value="" class="ref" size="14" style="background-color: transparent; border: none;" />
</td>
<td style="width: 5%;">
<input data-row-id="1" id="pages[1]" name="childjobid[1][pages]" value="" class="" style="" size="1"/>
</td>
<td style="width: 15%;">
<input data-row-id="1" id="orderDate[1]" name="childjobid[1][orderDate]" value="" class="" type="date" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="nysid[1]" name="childjobid[1][nysid]" value="" class="" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="dinNum[1]" name="childjobid[1][dinNum]" value="" class="" size="14" />
</td>
<td style="width: 15%;">
<input data-row-id="1" id="warrantNum[1]" name="childjobid[1][warrantNum]" value="" class="" size="14" />
</td>
<td style="width: 5%;align:center;">
<button data-row-id="1" id="0" class="delete-row" style="text-align:center;margin-top: 5px;width:30px;color: #fff;background-color: #b9534f !important;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-style: none;">X</button>
</td>
</tr>
</table>
</td>
</tr>
</script>

What I did was to count the number of rows in the dynamically created table and set the display equal to none if there was one row in the table (the header row). That made the header row disappear.
$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
try {
e.preventDefault();
var childjobid = parseInt(el.id);
var rowid = el.get('data-row-id');
if (confirm('This will immediately DELETE the current line.\nAre you sure?')) {
if (childjobid === 0) {
$('childjobrow' + el.get('data-row-id')).remove();
var rowsInTable = document.getElementById('newChildJobTable').rows.length;
if (rowsInTable === 1) document.getElementById('addNewJobHeader').style.display = 'none';
if ($('addNewJobHeader').style.display === 'none') {
$('newChildJobTable').setStyle('display', 'none');
}
rewriteeditingselections();
} else {
.
.
.
}
}
} catch (e) {
.
.
}
});
Then, in the function to add a new row, I checked if the value of the header row was set to none and, if so, set it to 'table-row'.
function addChildJobRow() {
try {
lastrow++;
let cl = (lastrow % 2 ? 'odd' : 'even');
showHeaderRow();
if (document.defaultView.getComputedStyle(document.getElementById('addNewJobHeader'), '').getPropertyValue("display") === 'none') {
$('addNewJobHeader').style.display = 'table-row';
}
var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
Elements.from(connectedjobtemplate({
rownum: lastrow,
cl: cl,
ref: refNum,
nysid: '',
dinNum: '',
warrantNum: ''
})).inject($('newChildJobTable'));
$('newChildJobTable').setStyle('display', 'table');
} catch (e) {
.
.
.
}
}

how to make editable text in edit case using jquery

I have a table like every table have their edit button :
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name"><?php echo $aircrews->fname.' '.$aircrews->lname; ?></p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status1; ?></p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status2; ?></p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
My problem is that when I click on particular edit then its corresponding p tag should be hidden and input type=text should be visible but in my case, by clicking on "edit" button, every p tag getting hide and showing all input text instead of particular tags.
My jQuery code is given below:
<script type="text/javascript">
$(document).ready(function(){
$('.text').hide();
$(this).on('click', function(){
alert('ok');
$('.name').hide();
$('.text').show();
})
})
</script>
I am a new be here can anyone please help me related this? thanx in advance. I want only clickable edit open their text boxes instead how cs
My view is like this :
https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost
i want click on edit and name pay1 and pay2 should be text

Remove the .class delcarations since the event will apply to every one of them in .hide() and .show(). Put the click event directly on all p in this case. (Can easily be adjusted to your specs).
Put this instead of your class in 'show() and hide(). To show the current <td>s .text class you can use the jQuery .siblings() function and specificy the .text sibling directly.
EDIT:
Since you want to have the text change when you hit the Edit button and not each p then you can place p with .edit_btn, and traverse up and down the DOM using .parent() and .children() functions.
$(document).ready(function() {
$('.text').hide();
$('.edit_btn').on('click', function(e) {
console.log(this);
$(this).parent().siblings('td').children('p').hide();
$(this).parent().siblings('td').children('.text').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">
Name </p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

You are accessing the elements by class. $('.name') returns all elements of class name, also $('.text') returns all elements of class text, not just the one you clicked on.
So you need to give individual elements unique ids and select by id $('#id').
See https://api.jquery.com/id-selector/

You should change Javascript part like this:
<script type="text/javascript">
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
</script>
In jQuery, .parents() function will check for the parents of "edit_btn" class which is <td>. Then .siblings() function consider all the siblings of <td> tag which comes under the same <tr> tag. Then .children('p') function will check for childrens with <p> tag means it consider <p> tags which are under those <td> tags and then hide() function will hide that particular <p> tag. Check below Snippet.
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 1_1</p>
<input class="text" type="text" name="name" value="Value Here 1_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input type="text" class="text" name="pay1" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 3_1</p>
<input type="text" class="text" name="pay2" value="Value Here 3_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input class="text" type="text" name="name" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_2</p>
<input type="text" class="text" name="pay1" value="Value Here 2_2" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_3</p>
<input type="text" class="text" name="pay2" value="Value Here 2_3" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

jQuery - Check empty inputs works but only checks first row in table

I have a table with cells that contain inputs, textareas and selects, and I've used a function to check that the values of these are not empty, which works fine for the first row, but doesn't perform the check for each row in the table, even though I've selected the inputs via the row class they are within (example: $('tr.invoiceItems input').
Any idea how I could ensure that this passes over each row in the table and not just the first?
HTML for first row (using Handlebars templating). Automatically added on page load before others inserted:
{{#each Items}}
<tr class="invoiceItems">
<td style="display:none" class="invoiceItemId" value="{{Id}}">{{Id}}</td>
<td class="descriptionColumn" style="height: 18.5667px">
<input class="descriptionInput" style="resize:none; margin: 0" rows="1" value="{{Description}}"></input>
</td>
<td class="nominalColumn">
<select class="nominalInput">
<option value="{{NominalId}}" selected>{{NominalName}}</option>
</select>
</td>
<td class="quantityColumn">
<input type="number" class="quantityInput" value="{{Quantity}}"></input>
</td>
<td class="unitPriceColumn">
<input type="text" class="unitPriceInput alignRight" value="{{UnitPrice.BaseValue}}"></input>
</td>
<td class="subtotalColumn inputDisabled">
<input type="text" class="itemSubtotal alignRight" value="{{Subtotal.BaseValue}}" disabled></input>
</td>
<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">
<select class="taxCodeInput">
<option value="{{TaxCodeId}}" selected>{{TaxCodeName}}</option>
</select>
</td>
<td style="display:none">
<input class="itemTaxCodeId" value="{{TaxCodeId}}" disabled></input>
</td>
<td style="display:none" class="inputDisabled">
<input type="number" class="itemTaxRate" value="{{TaxRate}}" disabled></input>
</td>
<td class="taxValueColumn inputDisabled">
<input type="text" class="itemTaxValue inputDisabled alignRight" value="{{Tax.BaseValue}}" disabled></input>
</td>
<td class="deleteItemColumn">
<div>
<a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>
</div>
</td>
</tr>
{{/each}}
HTML for additional rows added later on click handler:
<tr class="invoiceItems">
<td class="descriptionColumn">
<input class="descriptionInput editInvoiceItemDescription" style="resize:none" placeholder="Item Description" value=""></input>
</td>
<td style="text-align:left; margin-left:10px; padding-left:0;" class="nominalColumn">
<select class="nominalInput">
<option id="defaultNominal" value="">Select Nominal</option>
</select>
</td>
<td class="quantityColumn">
<input type="number" class="quantityInput" placeholder="0" value=""></input>
</td>
<td class="unitPriceColumn">
<input type="text" class="unitPriceInput alignRight" placeholder="0.00" value=""></input>
</td>
<td class="subtotalColumn inputDisabled">
<input type="text" class="itemSubtotal inputDisabled alignRight" disabled value="0.00"></input>
</td>
<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">
<select class="taxCodeInput">
<option id="defaultTaxCode" value="">Select Tax Code</option>
</select>
</td>
<td style="display:none">
<input class="itemTaxCodeId inputDisabled" disabled></input>
</td>
<td style="display:none">
<input type="number" class="itemTaxRate inputDisabled" disabled></input>
</td>
<td class="taxValueColumn inputDisabled">
<input type="text" class="itemTaxValue inputDisabled alignRight" disabled value="0.00"></input>
</td>
<td class="deleteItemColumn">
<a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>
</td>
JS:
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ];
var $emptyFields = $fields.filter(function(element) {
return $.trim(element.val()) === '';
});
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});

Try replacing your script with this it should work.
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ]
var $emptyFields;
for(var i=0;i< $fields.length;i++){
$emptyFields = $fields[i].filter(function(i,element) {
return $.trim($(this).val()) === '';
});
if ($emptyFields.length)
break;
}
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
Working Fiddle here: https://jsfiddle.net/20fsvkjg/

Add/Remove Checked box row (Javascript/Jquery)

I'm trying to add and remove the text of the cell 2 cells of that row when they are checked.
Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.
My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.
<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center"><span>A</span></td>
<td class="text-center"><span>B</span></td>
<td class="text-center"><span>C</span></td>
<td class="text-center"><span>D</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A1</span></td>
<td>
<h5>B1</td>
<td>
<h5>C1</h5></td>
<td>
<h5>D1</h5></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A2</span></td>
<td>
<h5><span class="second_col">B2</span></h5></td>
<td>
<h5>C2</h5></td>
<td>
<h5>D2</h5></td>
</tr>
<tr style="">
<td>
<input type="checkbox" class="usercheck">
<span>A3</span></td>
<td>
<h5><span class="second_col">B3</span></h5></td>
<td>
<h5>C3</h5></td>
<td>
<h5>D3</h5></td>
</tr>
</table>
JavaScript that I tried is the below:
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id="removeVal" style="color:red;">X</span>');
});
});
});
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').attr('checked','false');
}
Here is the link to the js fiddle which I tried to work.
I was able to display the content but by giving value to just one column which is not the right way to do I suppose.
https://jsfiddle.net/rahilAhmed/y4fzj66o/

Without re-writing your whole HTML here is how I made it work.
What I did was I added an ID to each span that gets created. That ID is later used to iterate over all checkboxes and find which one needs to be unchecked then un-check it.
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id='+ chain + ' class="removeVal" style="color:red;">X</span>');
});
$(".removeVal").click(checkRemove);
});
});
function checkRemove(e) {
var removeId = e.target.id;
$(".usercheck").each(function(index,checkbox) {
if (checkbox.value == removeId) {
checkbox.checked = false;
}
});
e.target.parentNode.previousSibling.remove();
e.target.remove();
}
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').prop('checked',false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align:center">Selector/Removal</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
Selected Users
<div class="" >
<h4 class="selected_values"></h4>
</div>
</div>
<div class="col-xs-1"><button onclick="clearSelection();">Clear</button></div>
<div class="col-xs-8">
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center" ><span >A</span></td>
<td class="text-center" ><span >B</span></td>
<td class="text-center" ><span >C</span></td>
<td class="text-center" ><span >D</span></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C1</h5></td>
<td><h5>D1</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C2</h5></td>
<td><h5>D2</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A3[B3]">
<span class="first_col" value="a3" >A3</span></td>
<td><h5><span class="second_col">B3</span></h5></td>
<td><h5>C3</h5></td>
<td><h5>D3</h5></td>
</tr>
</table>
</div>
</div>
</div>

You can do this : JsFiddle
For unchecked Checkbox, you must do this :
.prop('checked', false);

Html table values not getting from Jquery

I have a HTML table like below.I'm going to access that values from jquery.But there's a problem
My HTML
<table class="table" id="examtbl">
<thead>
<tr>
<th>Ex No</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr id="7500">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="76" />
</td>
</tr>
<tr id="7600">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="66" />
</td>
</tr>
</tbody>
</table>
My Script
$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(".examNo").val()); < -- It hits3 times but everytime it shows me 7500 only.
});
});
** Could you please give me a solution to how to get those values to.

the thing is, that you always call $(".examNo") ... and that means, he always looks for the first item that fits... you have to use this in the inner each loop :)
$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="examtbl">
<thead>
<tr>
<th>Ex No</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr id="7500">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7500" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="76" />
</td>
</tr>
<tr id="7600">
<td id="examNo">
<input class="form-control col-md-3 examNo" readonly="readonly" type="text" value="7600" />
</td>
<td>
<input class="form-control col-md-3" type="text" value="66" />
</td>
</tr>
</tbody>
</table>

$("#examtbl > tbody > tr").each(function () {
$(this).find('td').find("input").each(function () {
alert($(this).val());
});
});

You can use this
JS:
$("#examtbl > tbody > tr").each(function () {
$(this).find('td > input').each(function () {
if ($(this).hasClass('examNo'))
alert($(this).val()); //< -- It hits3 times but everytime it shows me 7500 only.
});
});