I have below code
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
<script>
jQuery('table#main_table').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
alert(txt);
}
});
I need to check within table if checkbox is checked then print it's qty value. But below code only prints 1 value. Instead of all
What I'm missing?
Your loop is for tr not for table.
jQuery('table#main_table tr').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
You're using each on <table> which will iterate only once as there is only one table with that ID. Iterate over the <tr> elements in the table.
$('#main_table tr').each(function() {
...
jQuery('table#main_table tr').each(function() {
if (jQuery(this).find("input:checkbox").is(':checked')) {
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
There's better way to do this. Instead of iterating over tr and finding checked checkboxes, you can iterate over checked checkboxes and get the value of the associated textbox.
$(this) // Will refer to the checkbox
.closest('td') // Get parent <td>
.next() // Get next element i.e. next <td>
.find('[name="qty[]"]') // Find element with name attribute value as "qty[]"
.val() // Get it's value
$('#main_table tr :checkbox:checked').each(function() {
console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
Related
<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>
hi, i have ten checkbox on left column and ten input field box on right column , if i select any check box corresponding input field should filled with check box value(or index) and if u uncheck the check box same corresponding input value should be removed.. if u select first check box the value in the input field is one and if you select 10th check box value in the input field is 2. check count should be in order. pls help me in this
Use the parent() function to select the td and then using siblings() function get the sibling td and using children() function get the input box and using val() insert the value of the checkbox in the input field
$('input[type=checkbox]').change(function() {
$(this).parent('td').siblings('td').children('input').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>
var texts = document.querySelectorAll('.inpt');
var checkboxes = document.querySelectorAll('.chk');
checkboxes.forEach((checkbox, i) => checkbox.addEventListener('change', () => changeCheckbox.call(checkbox, i)));
function changeCheckbox(i) {
texts[i].value = this.checked ? this.value : '';
}
<table>
<tr>
<th>input</th>
<th>checkbox</th>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt1" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk1" class="chk" value="001"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt2" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk2" class="chk" value="002"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt3" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk3" class="chk" value="003"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt4" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk4" class="chk" value="004"></td>
</tr>
<tr>
<td><input type="text" name="inpt" id="inpt5" class="inpt"></td>
<td><input type="checkbox" name="chckbox" id="chk5" class="chk" value="005"></td>
</tr>
</table>
Edit: warning, I used arrow functions which are not supported in older browsers.
Now, when the 1st row value change, the 2nd and 3rd row change accordingly.
The problem is this's hard code, i don't know the no of rows as it's generated from the database.Any idea?Many thanks
$("#A1").keyup(function() {
$("#B1").val($("#A1").val());
});
$("#A1").keyup(function() {
$("#C1").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
you can just select all inputs and update values for all.
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
Also if you want to select a few you can select multiple ids separated by commas. like this:
$("#A1").keyup(function() {
$("#B1, #C1").val($("#A1").val());
});
Different from other answers given here, changing all input elements is too risky in my opinion. What I would suggest id adding a class to all input fields you wish to change, and changing your function to a JQuery selector according to this class (In the example below, the class I added is called changable).
$("#A1").keyup(function() {
$(".changable").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" class="changable" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" class="changable" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" class="changable" value=""></td>
</tr>
You can assign the value to all the inputs in your HTML, like this:
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
So This is what i have done till now ,but i can't think of a way to get the data, entered or checked by user for each day in php . Since i have the same name for all the input type for workdays i.e. name='work' . I cant find a way to get the values for each day seperately( USING PHP).
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="suday" /></td>
</tr>
</table>
<br />
<br />
<b>Number Of Employees:</b><input type="number" max="20" min="1" name="noe" placeholder="1 - 20" /> <br /> <br />
<table>
<tr>
<td><b>Buisness Details:</b></td>
<td><input type="date" name="doe"
placeholder="Date Of Establishment" /></td>
</tr>
<tr>
<td></td>
<td><input type="number" name="a_tover" placeholder="ANNUAL TURNOVER" /></td>
</tr>
</table>
</form>
</center>
<script language="javascript">
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</body>
<html>
<head>
<script>
var workdays=[0,0,0,0,0,0,0];
var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var allcheckbox = document.getElementsByName('work');
function checkcheckbox(arr,checked){
for (var i = 0; i < checked.length; i++) {
if(checked[i].checked){
arr[i]=1;
}else{
arr[i]=0;
}
}
console.log(arr);
}
function print(arr,days){
for (var i = 0; i < arr.length; i++) {
if(arr[i]==0){
console.log(days[i]+": close");
}else{
console.log(days[i]+": workday");
}
}
}
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</head>
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
</table>
<br />
<input type="button" value="SEND" onclick="checkcheckbox(workdays,allcheckbox)"/>
<input type="button" value="SEND" onclick="print(workdays,days)"/>
</form>
</center>
</body>
</html>
I have a large group of checkboxes that are separated by two tables. Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). I hope this makes sense. My code is below:
<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<style type="text/css">
p
{
font-family: "Arial";
align: center;
}
h2
{
font-family: "Arial";
}
</style>
<p>
<table border="1" align="center">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</tr>
<tr>
<td>Clinical operating cost</td>
<td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix10" value="1"></td>
<td><input type="checkbox" id="matrix11" value="1"></td>
<td><input type="checkbox" id="matrix12" value="1"></td>
<td><input type="checkbox" id="matrix13" value="1"></td>
<td><input type="checkbox" id="matrix14" value="1"></td>
<td><input type="checkbox" id="matrix15" value="1"></td>
<td><input type="checkbox" id="matrix16" value="1"></td>
</tr>
<tr>
<td>Facility operating cost</td>
<td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix18" value="1"></td>
<td><input type="checkbox" id="matrix19" value="1"></td>
<td><input type="checkbox" id="matrix20" value="1"></td>
<td><input type="checkbox" id="matrix21" value="1"></td>
<td><input type="checkbox" id="matrix22" value="1"></td>
<td><input type="checkbox" id="matrix23" value="1"></td>
<td><input type="checkbox" id="matrix24" value="1"></td>
</tr>
<tr>
<td>Energy cost</td>
<td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix26" value="1"></td>
<td><input type="checkbox" id="matrix27" value="1"></td>
<td><input type="checkbox" id="matrix28" value="1"></td>
<td><input type="checkbox" id="matrix29" value="1"></td>
<td><input type="checkbox" id="matrix30" value="1"></td>
<td><input type="checkbox" id="matrix31" value="1"></td>
<td><input type="checkbox" id="matrix32" value="1"></td>
</tr>
<br>
<br>
<table border="1" align="center">
<tbody>
<tr>
<th><b>BENEFIT</b></th>
<th colspan="3">Negative Impact</th>
<th>Neutral</th>
<th colspan="3">Positive Impact</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Patient/staff safety</td>
<td><input type="checkbox" id="matrix33" value="1"></td>
<td><input type="checkbox" id="matrix34" value="1"></td>
<td><input type="checkbox" id="matrix35" value="1"></td>
<td><input type="checkbox" id="matrix36" value="1"></td>
<td><input type="checkbox" id="matrix37" value="1"></td>
<td><input type="checkbox" id="matrix38" value="1"></td>
<td><input type="checkbox" id="matrix39" value="1"></td>
<td><input type="checkbox" id="matrix40" value="1"></td>
</tr>
<tr>
<td>Fire/life safety</td>
<td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix42" value="1"></td>
<td><input type="checkbox" id="matrix43" value="1"></td>
<td><input type="checkbox" id="matrix44" value="1"></td>
<td><input type="checkbox" id="matrix45" value="1"></td>
<td><input type="checkbox" id="matrix46" value="1"></td>
<td><input type="checkbox" id="matrix47" value="1"></td>
<td><input type="checkbox" id="matrix48" value="1"></td>
</tr>
<tr>
<td>Clinical quality of care</td>
<td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix50" value="1"></td>
<td><input type="checkbox" id="matrix51" value="1"></td>
<td><input type="checkbox" id="matrix52" value="1"></td>
<td><input type="checkbox" id="matrix53" value="1"></td>
<td><input type="checkbox" id="matrix54" value="1"></td>
<td><input type="checkbox" id="matrix55" value="1"></td>
<td><input type="checkbox" id="matrix56" value="1"></td>
</tr>
<tr>
<td>Patient/resident experience</td>
<td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix58" value="1"></td>
<td><input type="checkbox" id="matrix59" value="1"></td>
<td><input type="checkbox" id="matrix60" value="1"></td>
<td><input type="checkbox" id="matrix61" value="1"></td>
<td><input type="checkbox" id="matrix62" value="1"></td>
<td><input type="checkbox" id="matrix63" value="1"></td>
<td><input type="checkbox" id="matrix64" value="1"></td>
</tr>
<tr>
<td>Operational efficiency</td>
<td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix66" value="1"></td>
<td><input type="checkbox" id="matrix67" value="1"></td>
<td><input type="checkbox" id="matrix68" value="1"></td>
<td><input type="checkbox" id="matrix69" value="1"></td>
<td><input type="checkbox" id="matrix70" value="1"></td>
<td><input type="checkbox" id="matrix71" value="1"></td>
<td><input type="checkbox" id="matrix72" value="1"></td>
</tr>
<tr>
<td>Sustainability</td>
<td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix74" value="1"></td>
<td><input type="checkbox" id="matrix75" value="1"></td>
<td><input type="checkbox" id="matrix76" value="1"></td>
<td><input type="checkbox" id="matrix77" value="1"></td>
<td><input type="checkbox" id="matrix78" value="1"></td>
<td><input type="checkbox" id="matrix79" value="1"></td>
<td><input type="checkbox" id="matrix80" value="1"></td>
</tr>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input').not(this).prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
</tbody>
</tbody>
</p>
You could add a class (like .checkbox) to each of your checkboxes and then perform something like this before submit -
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}
You could also use ".is: for more readability.
if ( $( '.checkbox' ).is( ':checked' ) ) {
// atleast one checked
} else {
// none checked
}
Example: https://jsfiddle.net/rr3vfymy/
First of all, your HTML isn't well-formed. You should close one table element before starting a new one.
Then start by distinguishing your tables by id, or at least by class, for example:
<table id="cost-table" border="1" align="center">
and then check, if at least one is checked. If you are using jQuery, you can use something like:
$( document ).ready( function() {
// you should use id on form too, this will bug if you have more forms on your page
$( "form" ).submit( function( event ) {
if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
event.preventDefault();
//alert user here
alert('You need to select at least one cost type');
}
});
});
and the same for other types.
I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>
First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.