Develop Reference

Trying to pull table values from a selected check box correctly

I am trying to pull columns from a table if a checkbox was selected. Here is the table that contains the checkbox called 'selectedSched'
<tbody style="overflow-y: scroll; ">
<c:forEach var="row" items="${Updresults}">
<c:set var="sched" value="${row.getSCHEDULE_NUMBER()}" />
<c:set var="eftyear" value="${row.getEFT_CONTRACT_YEAR()}" />
<c:set var="EFTstatus" value="${row.getSTATUS()}" />
<c:set var="schedcombo" value="${sched}${eftyear}" />
<fmt:formatNumber var="schedTotl" value="${row.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
<tr>
<td align="center">
<input style="width:50px;" type="checkbox" name="selectedSched"
value="<c:out value="${schedcombo}"/>"/>
</td>
<td id="ModifyScheduleNumber"><c:out value="${row.getSCHEDULE_NUMBER()}" /></td>
<td id="ModifyYear"><c:out value="${row.getEFT_CONTRACT_YEAR()}" /></td>
<td id="ModifyCreationDate"><c:out value="${row.getCREATION_DATE()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${row.getNUM_OF_PAY_RECORDS()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${schedTotl}"/></td>
<td><select style="width:45px;" size="1" id="ModifyStatus" name="ModifyStatus_<c:out value="${schedcombo}"/>"
class="combosmall">
<c:forEach items="${ModifyList}" var="statusValue">
<option value="${statusValue}"
<c:if test="${EFTstatus} = statusValue"> selected="selected"</c:if>
>${statusValue}</option>
</c:forEach>
</select> </td>
<td>
<input style="width:85px" id="ModifyStatusDate" name="ModifyStatusDate_<c:out value="${schedcombo}"/>"
type="text" class="texttable" value="${row.getSTATUS_DATE()}"/>
</td>
<td><c:out value="${row.getAPPR_HUD_EMPLOYEE()}"/></td>
</tr>
</c:forEach>
</tbody>
I am creating a function that is trying to compare the Creation date field to an input Status Date field. Here is my function call:
$("#submitMEFTS").mouseup(function ()
{
for(var i=0; i<updateformID.selectedSched.length; i++)
{
if(updateformID.selectedSched[i].checked == true)
{
var holdCreationDate = $('#ModifyCreationDate[i]').val();
var holdSchedule = $('#ModifyScheduleNumber[i]').val();
alert("The checked button was clicked");
}
else
{
alert("The checked button was not clicked") ;
}
}
});
I have the selected check working but I am getting an error trying to use the 'ModifyCreationDate' field. Clearly just putting a '[i]' at the end is invalid. What is the proper way to pull the correct index of this field?
I know with a servlet call I had to do something similar to the ModifyStatus field to create different "names" for each row but wondering if there is a better/cleaner option.
Thanks again

How to get value radio on table using click event?

I want to get value of radio in table using click event.Note , get value of radio in column
<table id="div_table" width="500px" border="2px" cellpadding="2" cellspacing="2" >
<tr>
<td >Column Name1</td>
<td>Column Name2</td>
<td >Column Name3</td>
</tr>
<tr >
<td >PN1</td>
<td ><input type="radio" name="RD_CHECK" value="ABC">ABC</td>
<td ></td>
</tr>
<tr >
<td >PX2</td>
<td ><input type="radio" name="RD_CHECK" value="XYZ">XYZ <input type="radio" name="RD_CHECK" value="CBA">CBA</td>
<td ><input type="radio" name="RD_CHECK" value="123">123 <input type="radio" name="RD_CHECK" value="456">456</td>
</tr>
</table>
Ok , Example: I check radio of column2 but it not work.
$(document).ready(function ()
{
$('body').on('click','#div_table tbody tr', function ()
{
if ($("input[type='radio']").is(':checked') == true && $(this).find('td:eq')==1)
{
//value of radio in Column2
alert('This is Column 2 and value = '+$("input:checked").val());
}
else
{
// value of radio in Column3
alert('This is Column 3 and value = '+$("input:checked").val());
}
});
});
Give me advised.Thank guys.

$("input[type='radio']").is(':checked') == true Will get the checked property of only the first matching <input>. If your first radio isn't checked, this fails.
$(this).find('td:eq') == 1 Will always be true since even a jQuery constructor with no matches returns an object (truthy value).
Instead, attach the event to the radio buttons themselves. You can get the column by finding the .index() of the .closest() <td>. To get the value simply use the context of your event:
$(document).ready(function () {
$('body').on('click', '#div_table tr :radio', function () {
var col = $(this).closest('td').index();
alert('This is Column ' + col + ' and value = ' + this.value);
});
});
JSFiddle

Deleting a specific row in a table

I'm trying to delete a specific row from a table using javascript. The way I'm trying to do it now, is by retrieving the ID of the current row by clicking a button (the delete button) and then deleting the row. The problem is that I'm not retrieving the current row ID in the table. If someone could help me retrieve the the ID of the current row when the user clicks the delete button, I think I can solve the rest myself. Thanks
/*The Javascript*/
function delete_row() {
alert('id goes here');
//getElementById('row').innerHTML ='hello';
//id.deleteRow();
//var table = document.getElementByTagName('items_table');
//var row = table.rows[index];
//document.getElementByTagName('items_table').deleteRow(0);
}
/*The HTML of the Table*/
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
/* Five rows in this table... */
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
</table>

You could just ascend the tree until you find a row:
function delete_row(btn) {
var tr = btn;
while(tr && tr.nodeName != "TR") tr = tr.parentNode;
if( !tr) throw new Error("Failed to find the row, was the function called correctly?");
tr.parentNode.removeChild(tr); // delete it
}
And:
<button onClick="delete_row(this);">X</button>
The this is important, as it provides a reference to the button that was clicked, so we can find the row it is in.

Check this code. It has been verified and will do your job perfectly. :)
<script>
function delete_row(me) {
alert(me.parentNode.parentNode.id);
}
</script>
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
</table>

Can't you just change <button onclick="delete_row();">X</button> to <button onclick="delete_row('row_5');">X</button>, in each row, respectively?
Your handler would look like:
function delete_row(theID) {
alert(theID);
}

how can I sum selected checkbox(s) row values?

I have a table in asp.net mvc . in this table I have a checkbox for every row . I want when I check a checkbox find wage value in that row and sum with other rows wages that checked .
I want to do this sum via Jquery or java script .
#foreach (var item in Model)
{
<tr id="rowid">
<td>
<input type="checkbox" name="chk-#intCount" id="chk-#intCount" class="chkclass" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TechnicalNo)
</td>
<td class="sum" id="wagein">
#Html.DisplayFor(modelItem => item.Wage)
</td>
<td class="sum" id="time">
#Html.DisplayFor(modelItem => item.Time)
</td>
</tr>
}
this is my code in asp.net mvc . how can I sum checked values in wage and time now ?
EDIT :
My jQuery code :
<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
$('#sum').html(sum);
});​
});
</script>
my html code :
<tr>
<td>
<input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
any idea ?! what is the problem ?!

Start by fixing your markup as it is highly broken. Remember that ids must be unique throughout your entire HTML document:
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="chk-#intCount" id="chk-#intCount" class="chkclass" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TechnicalNo)
</td>
<td class="sum wagein">
#Html.DisplayFor(modelItem => item.Wage)
</td>
<td class="sum">
#Html.DisplayFor(modelItem => item.Time)
</td>
</tr>
}
then you could subscribe to the .click() event of the checkboxes and accumulate a sum for all wages:
$(function() {
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
alert(sum);
});
​});
And here's a live demo to see it in action: http://jsfiddle.net/pbkjr/

Ok, starting with the markup you have shown, correctly wrapped with <table></table> tags, with a div below to show the total:
<table>
<tr>
<td>
<input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
</table>
<div id="total"></div>
The following jquery (which #Darin wrote) will sum all the checked rows when any checkbox is clicked:
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
$('#total').html(sum);
});
This is very close to Darin's original, except that I have changed the last line to output the total to the div with id total. This seems more likely than writing the sum to every row!
This can be seen in this live example: http://jsfiddle.net/ADE3a/

jQuery(document).ready(function ($) {
var sum = 0;
$('input[type=checkbox]').click(function () {
sum = 0;
$('input[type=checkbox]:checked').each(function () {
sum += parseFloat($(this).closest('div').find('.payment').val());
});
$('#total').val(sum);
});
});
Darin Dimitrov
Thanks a ton. I was having a issue where I wanted do addition of hidden fields for checked check boxes and pass the checkbox value(true or false) to the controller.
#Html.CheckBoxFor was creating a hidden field right next to it for each checkbox
I was using $(this).next().val() this was giging me NAN issue. since it was getting the value of the hidden field.
Thanks you to your post I was able to get the next div hidden field value
I did something like below

click anywhere on a table row and it will check the checkbox its in...?

I'm trying to figure out how to do this, but I can't find it out. Basically I want to be able to click anywhere on a table row and it will check/ unchecked the checkbox its in. I know it's possible because that's what PHPMyAdmin does...
here is my table row
<tbody>
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
</tbody>

<script type="text/javascript">
function selectRow(row)
{
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
...
<tbody>
<tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
<tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
</tbody>
Note: You've also got collisions on ids. Your ids should be unique.
Here's an alternative with programmatic binding:
document.querySelector("table").addEventListener("click", ({target}) => {
// discard direct clicks on input elements
if (target.nodeName === "INPUT") return;
// get the nearest tr
const tr = target.closest("tr");
if (tr) {
// if it exists, get the first checkbox
const checkbox = tr.querySelector("input[type='checkbox']");
if (checkbox) {
// if it exists, toggle the checked property
checkbox.checked = !checkbox.checked;
}
}
});
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1" />
</td>
<td>1</td>
<td>2011-04-21 22:04:56</td>
<td>action</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2" />
</td>
<td>2</td>
<td>2011-04-21 22:04:56</td>
<td>action</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk3" />
</td>
<td>2</td>
<td>2011-04-21 25:30:16</td>
<td>action</td>
</tr>
</tbody>
</table>

You don't need JavaScript for this:
td label {
display: block;
}
<td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td>
Just labels and a little CSS.

Try this one out...
$("tr").click(function() {
var checkbox = $(this).find("input[type='checkbox']");
checkbox.attr('checked', !checkbox.attr('checked'));
});
http://jsfiddle.net/dVay8/

Since this question getting so many views and the accepted answer has a small issue.
The issue is when you click on the checkbox it won't change. Actually what happens is the checkbox toggles twice. Because of we clicked on the checkbox and the table row as well. So here is a proper solution with a fix.
$('tr').click(function(event){
var $target = $(event.target);
if(!$target.is('input:checkbox'))
{
$(this).find('input:checkbox').each(function() {
if(this.checked) this.checked = false;
else this.checked = true;
})
}
});
Good luck devs.