在选择多个复选框时将属性附加到变量
Appending attributes to a variable on selection of multiple checkboxes
我有一个看起来像这样的动态网格
Serial No(checkbox1) Document Name Attachment
1(checkbox2) abc (img)
2(checkbox2) xyz (img)
3(checkbox2) uio (img)
4(checkbox2) pop (img)
让我解释一下这是如何工作的。当用户单击附件 img 时，它会打开一个对话框，其中显示其中的所有附件。每个文件也将有一个复选框。让我们称它们为 checkbox3。如果用户针对序列号 1 选择复选框 2，则对话框（仅限序列号 1 的对话框）中的复选框也将被选中。同样，如果用户选择序列号 2 的复选框 2，则相关对话框的复选框也将被选中。
现在，如果用户选中与 serailNo 标题相对应的复选框 1，那么从序列号 1 到 4 的所有复选框都将被选中，因此所有对话框也将被选中。
下面是我的代码。如果您 运行 摘录，您就会理解我要解释的内容。
//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);
}
}
我想做的是，在选择复选框时，我希望将对话框中附加文件的 documnetcode 附加到一个变量。
我所做的是为对话框内的复选框创建一个 onclick 函数
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);
}
}
这工作正常，但并非在所有情况下都有效。因为可以有多种场景
场景 1：用户打开此网格，此时它没有勾选任何复选框，他打开针对 Sno 1 的对话框，并针对附加的文件勾选复选框。（假设有 3 个附加文件）。然后我的函数会将文档代码附加到我的字符串 docCodes 中。
场景 2：用户打开一个网格，并选中 Sno1 复选框，这意味着对话框中的复选框也将被自动选中。在这种情况下，它应该检查对话框中的复选框是否被选中，然后附加相关文档代码，如果用户稍后取消选中，则删除该属性。
场景 3：用户直接根据序列号标题选中复选框 1，这将选中所有 child 个复选框。
目前只有方案 1 有效。我如何实现其他两种情况？请帮忙。
与其将它们添加到某个变量中，不如将它们保存在数组中。因此，在下面的代码中，每当检查您的 sno 时，我都添加了函数调用 addAttributes。然后，由于我们没有 docCodes，您可以在对话框中循环检查复选框，然后将它们推入数组。
演示代码 :
//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>
我有一个看起来像这样的动态网格
Serial No(checkbox1) Document Name Attachment
1(checkbox2) abc (img)
2(checkbox2) xyz (img)
3(checkbox2) uio (img)
4(checkbox2) pop (img)
让我解释一下这是如何工作的。当用户单击附件 img 时，它会打开一个对话框，其中显示其中的所有附件。每个文件也将有一个复选框。让我们称它们为 checkbox3。如果用户针对序列号 1 选择复选框 2，则对话框（仅限序列号 1 的对话框）中的复选框也将被选中。同样，如果用户选择序列号 2 的复选框 2，则相关对话框的复选框也将被选中。
现在，如果用户选中与 serailNo 标题相对应的复选框 1，那么从序列号 1 到 4 的所有复选框都将被选中，因此所有对话框也将被选中。
下面是我的代码。如果您 运行 摘录，您就会理解我要解释的内容。
//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);
}
}
我想做的是，在选择复选框时，我希望将对话框中附加文件的 documnetcode 附加到一个变量。
我所做的是为对话框内的复选框创建一个 onclick 函数
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);
}
}
这工作正常，但并非在所有情况下都有效。因为可以有多种场景
场景 1：用户打开此网格，此时它没有勾选任何复选框，他打开针对 Sno 1 的对话框，并针对附加的文件勾选复选框。（假设有 3 个附加文件）。然后我的函数会将文档代码附加到我的字符串 docCodes 中。
场景 2：用户打开一个网格，并选中 Sno1 复选框，这意味着对话框中的复选框也将被自动选中。在这种情况下，它应该检查对话框中的复选框是否被选中，然后附加相关文档代码，如果用户稍后取消选中，则删除该属性。
场景 3：用户直接根据序列号标题选中复选框 1，这将选中所有 child 个复选框。
目前只有方案 1 有效。我如何实现其他两种情况？请帮忙。
与其将它们添加到某个变量中，不如将它们保存在数组中。因此，在下面的代码中，每当检查您的 sno 时，我都添加了函数调用 addAttributes。然后，由于我们没有 docCodes，您可以在对话框中循环检查复选框，然后将它们推入数组。
演示代码 :
//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>