We Keep Coding

Appending attributes to a variable on selection of multiple checkboxes

I have a dynamic grid which looks something like this
Serial No(checkbox1) Document Name Attachment
1(checkbox2) abc (img)
2(checkbox2) xyz (img)
3(checkbox2) uio (img)
4(checkbox2) pop (img)
Let me explain how this works. When the user clicks on the attachment img, it opens a dialog box which shows all the files attached in it. Each file will also have a checkbox against it. Lets call them checkbox3. If user selects the checkbox2 against serial number 1 then the checkboxes in the dialog box(dialog box of serail number 1 only) will also get checked. In the same way if user selects checkbox2 of serail number 2 then the checkboxes of the relevant dialog box will also get checked.
Now if the user checks checkbox1 which is against the serailNo heading, then all checboxes from serial number 1 to 4 will get checked and so all the dialog boxes will also get checked.
Below is my code. If you run the snippet, you will understand what I am trying to explain.
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length
var get_code = $("#AttachmentGrid").data("code").split("_")[1]
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
}
})
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection' onclick="addAttributes('78427','41701',this);">
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
onclick="addAttributes('78424','41701',this);"
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>
var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}
What I want to do is that on the selection of checkboxes I want the documnetcode of the files attached in the dialog box to append to a variable.
What I did was made an onclick function for the checkboxes inside the dialog box
var docCodes = '';
function addAttributes(docID, CdCode, el) {
var str = docID + '♦';
if ($(el).is(':checked')) {
docCodes += str;
alert(docCodes);
console.log(docCodes);
}
else {
docCodes = docCodes.replace(str, '');
console.log(docCodes);
}
}
This is working fine but not in all scenarios. As there can be multiple scenarios
Scenario 1: The user opens this grid, right now it does not tick any checkboxes, he opens the dialog box against Sno 1, and checks the checkboxes against files attached.(Suppose there are 3 files attached) . Then my function will append the document code to my string docCodes.
Scenario 2 : The user opens a grid, and checks the Sno1 checkbox which means the checboxes in the dialog box will get auto ticked as well. In this case it should check if checkboxes in dialog box are ticked then append the relevant document code and if the user later unticks, remove that attribute.
Scenario 3 : The user directly checks the checkbox1 against serial number heading which will check all child checkboxes.
Right now only scenario 1 is working. How do I fulfill other two scenarios? PLease help.

Instead of adding them in some variable save them inside array . So , in below code i have added function call addAttributes whenever your sno is checked . Then , as we are not having docCodes there you can loop through checked checkboxes inside dialog and then push them inside array .
Demo Code :
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length
var get_code = $("#AttachmentGrid").data("code").split("_")[1]
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true)
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false)
}
})
function AttchmentBox(id, count, el) {
if (parseInt(count) > 0) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true)
//sno is checked call your function:
addAttributes()
}
$("#attchment_div #AttachmentGrid").data("code", id)
$("#attchment_div").show()
}
}
var docCodes = [];
function addAttributes(docID, CdCode, el) {
//el == undefined call from AttchmentBox
if (el == undefined) {
//loop through checked checkbox...
$(".attachment_selection:checked").each(function() {
var str = $(this).attr("id").split("_")[1];//id=chkAttachment_78424 .etc
//if not inside array
if (docCodes.indexOf(str) == -1) {
docCodes.push(str) //push that in array
}
})
} else {
var str = docID;
//if checked..and not inside array
if ($(el).is(':checked') && docCodes.indexOf(str) == -1) {
docCodes.push(str)
} else {
docCodes.splice(docCodes.indexOf(str), 1) //remove it..
}
}
console.log(docCodes)
}
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input type="file" multiple="multiple" name="txt_filePath_517" class="mediumTextField" id="txt_filePath_517" style="width: 78%;">
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img title="Attachment" height="20px" onclick="AttchmentBox('_41701','2',this);" src="../../Images/attchments.png" />
</span>
</td>
<td class="GreyBorder" align="center">
<img type="image" title="Save" src="../../Images/save.png" id="Btn_517" onclick="SaveAttachment('517','41701','50818','50595');" style="cursor:pointer;height:15px;" class="AddItem" />
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection' onclick="addAttributes('78427','41701',this);">
<a title="ABC.docx" onclick="showDocument('78427');" style='text-decoration: none;cursor: pointer;'>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img viewtype="delete" title="Delete Attachment" style="float:right;padding-bottom:20px;" src="../../images/delete.png" onclick="DeleteAttachment('78427','41701')" class="AddItem" />
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78424 class='attachment_selection' onclick="addAttributes('78424','41701',this);">
<a title="FOSUNDERSTANDING.docx" onclick="showDocument('78424');" style='text-decoration: none;cursor: pointer;'>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img viewtype="delete" title="Delete Attachment" style="float:right;padding-bottom:20px;" src="../../images/delete.png" onclick="DeleteAttachment('78424','41701')" class="AddItem" />
</td>
</tr>
</table>
</div>

Keep style of <tr> while dragging

I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/

Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.

SimpleCart JS shelfItem in table?

How would I be able to make the "Add to Cart" work if I were to put the simple_cart ShelfItem in table?
I'm still cannot find a way to make this work.
I'm using the eshopper template, which have the section id with cart items and so on. But if I were to put the simplecart javascript in the , , and so on, when I press the add to cart it won't work. Somebody please teach me how to use this, thanks.
Sorry I counldt find the answer or I dont know how to do it.
Edit: Add cart is working now I guess? At least able to make the "quantity" to increase, or able to empty the cart, but now the price is not updating, what did I do wrong?
http://imgur.com/HBhRv1S
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Shopping Cart</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Item</td>
<td class="description">Description</td>
<td class="price">Price</td>
<td class="quantity">Quantity</td>
<td class="total">SubTotal</td>
</tr>
</thead>
<tbody>
<div class="simpleCart_shelfItem">
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/511SkrkMNCL.jpg" alt="Star Wars Character Encyclopedia" class="item_thumb" thumb="Images (Books)/Images/thumb/511SkrkMNCL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars Character Encyclopedia</h4>
</td>
<td class="cart_price">
<span class="item_price">$35.99</span><br />
</td>
<td class="cart_quantity">
+
<p> <input type="text" value="1" class="item_Quantity"/> <br>
-
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81rH-DQqQOL.jpg" alt="Percy Jackson and the Olympians 5 Book " class="item_thumb" thumb="Images (Books)/Images/thumb/81rH-DQqQOL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Percy Jackson and the Olympians 5 Book </h4>
</td>
<td class="cart_price">
<span class="item_price">$80.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51mGJ4PmMzL.jpg" alt="Star Wars: The Jedi Path" class="item_thumb" thumb="Images (Books)/Images/thumb/51mGJ4PmMzL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: The Jedi Path</h4>
</td>
<td class="cart_price">
<span class="item_price">$30.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81cm6ZST7tL.jpg" alt="The Return of Nagash (The End Times)" class="item_thumb" thumb="Images (Books)/Images/thumb/81cm6ZST7tL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">The Return of Nagash (The End Times)</h4>
</td>
<td class="cart_price">
<span class="item_price">$50.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51m3gTdOteL.jpg" alt="Star Wars: Darth Vader and the Ghost Prison" class="item_thumb" thumb="Images (Books)/Images/thumb/51m3gTdOteL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: Darth Vader and the Ghost Prison</h4>
</td>
<td class="cart_price">
<span class="item_price">$65.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->

Working for me here : http://62.210.240.67/hank/HNKmobile/
I'd have post a comment but apparently I need 50 pts of reputation... (not sure to understand this behaviour)

Selecting elements within a table with javascript/jquery

I'm trying to select an id inside my table for each row.
This is my table(inspected with browser) at the moment.
<table id="sort">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Pri </th>
</tr>
</thead>
<tbody style="cursor: n-resize; " class="ui-sortable"><tr class="priorityRow">
<td id="tableDragSort">
<a class="deleteLink" href="#" rel="17904" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td>
<img id="MainContent_MainColContent_ImageRepeater_CarImg_0" class="17904" src="" style="height:45px;width:60px;">
</td>
<td>
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl00$txtText" type="text" value="hjjj" id="MainContent_MainColContent_ImageRepeater_txtText_0">
</td>
<td class="picturePriority">
1
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17903" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_1" class="17903" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl01$txtText" type="text" value="dd" id="MainContent_MainColContent_ImageRepeater_txtText_1">
</td>
<td class="picturePriority" style="width: 21px; ">
2
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17895" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_2" class="17895" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl02$txtText" type="text" value="wggw" id="MainContent_MainColContent_ImageRepeater_txtText_2">
</td>
<td class="picturePriority" style="width: 21px; ">
3
</td>
</tr>
</table>
The id which here is 17904, 17903 and 17895 in both <a rel=""> and <img class=""> is the one I want to select into my javascript method which is here:
$("#sort .priorityRow").each(function ()
{
var index = $(this).index() + 1;
var id = /* SELECT ID HERE */
console.log(id);
$(this).find(".picturePriority span").text(index);
SetPicturePriority(id, index);
});
}
I don't care which way i select the id really, as long as it works.
Anyone able to help? :)

It sounds like maybe you're trying to do this:
$("#sort .priorityRow").each(function () {
var rel = $(this).find("a").first().attr("rel"),
index = this.rowIndex + 1;
$(this).find(".picturePriority").text(index);
SetPicturePriority(rel, index);
});

you can get id like this
var id =$(this).attr("id");

Calculate sum of textboxes inside nested grid

I have two nested grids in a GridView. Both nested grids have different number of controls (TextBoxes). I want to calculate sum of nested grid textboxes and put in a relevant textbox of relevant row parent grid.
I want to do this using jQuery.
Following is the source of grids:
<table cellspacing="0" rules="all" border="1" id="gvSPActivities" style="width:100%;border-collapse:collapse;">
<tr class="donorh1" align="left" style="height:35px;">
<th scope="col" style="width:40px;">#</th><th scope="col">Activity</th><th scope="col">Unit</th><th scope="col">Target</th><th scope="col">Benefic</th><th scope="col">Cost</th>
</tr><tr class="gridrow2">
<td>
1
</td><td>a</td><td>u1</td><td>
<input name="gvSPActivities$ctl02$txtTarget" type="text" value="100" id="gvSPActivities_txtTarget_0" class="numeric" style="width:150px;" />
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalBenefic" type="text" id="gvSPActivities_txtTotalBenefic_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvBenefic_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Male</th><th scope="col">Female</th><th scope="col">Children</th><th scope="col">Family</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtMaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtMaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFemaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFemaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtChildren" type="text" id="gvSPActivities_gvBenefic_0_txtChildren_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFamilyBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFamilyBenefic_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalCost" type="text" id="gvSPActivities_txtTotalCost_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvCost_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Main Cost</th><th scope="col">Other Cost</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtMainCost" type="text" id="gvSPActivities_gvCost_0_txtMainCost_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtOthercost" type="text" id="gvSPActivities_gvCost_0_txtOthercost_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
Thanks.

var total = 0;
$("input[id^='gvSPActivities']", "#gvSPActivities").each(function() {
total = total+this.value;
});
$(someInputElement).val(total);