<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--spacious" id="tblMain">
<thead class="spectrum-Table-head">
<tr>
<th class="spectrum-Table-headCell is-sortable" aria-sort="none">
Case Id
</th>
<th class="spectrum-Table-headCell">
Construction Permit Request Id
</th>
<th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
Type
</th>
<th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
Apartments Quantity
</th>
<th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
Commectial Properties Quantity
</th>
<th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
Is Construction Complete?
</th>
</tr>
</thead>
<tbody class="spectrum-Table-body">
#foreach (var permit in Model)
{
<tr class="spectrum-Table-row" data-id="#permit.Id" onclick="showInfoOnClick(#permit.Id)">
<td class="spectrum-Table-cell" tabindex="0">#permit.CaseId</td>
<td class="spectrum-Table-cell" tabindex="0" id=constructionid>#permit.ContructionPermitRequestId</td>
<td class="spectrum-Table-cell" tabindex="0">#permit.Type</td>
<td class="spectrum-Table-cell" tabindex="0">#permit.ApartmentsQty</td>
<td class="spectrum-Table-cell" tabindex="0">#permit.CommercialPropertiesQty</td>
<td class="spectrum-Table-cell" tabindex="0">#permit.IsContructionCompleted</td>
</tr>
}
</tbody>
</table>
<br />
<br />
<overlay-trigger type="modal" placement="none" id="dialog">
<sp-dialog-wrapper slot="click-content"
headline="Use Permit Request"
confirm-label="Open Construction Permit"
secondary-label="Replace"
cancel-label="Cancel"
footer="Content for footer"
size="l"
underlay>
Content of the dialog
</sp-dialog-wrapper>
<div slot="trigger"
onclick="
const overlayTrigger=this.parentElement;
const dialogWrapper=overlayTrigger.clickContent;
function handleEvent({type}) {
dialogWrapper.open = false;
dialogWrapper.removeEventListener('confirm', handleEvent);
dialogWrapper.removeEventListener('secondary', handleEvent);
dialogWrapper.removeEventListener('cancel', handleEvent);
}
dialogWrapper.addEventListener('confirm', openConstruction);
dialogWrapper.addEventListener('secondary', handleEvent);
dialogWrapper.addEventListener('cancel', handleEvent);
"></div>
</overlay-trigger>
*This is a ASP.NET project. I'm doing some kind of a basic register project. And I got trying to get ConstructionId from my table, and I need it to display my modal with the right id. I got somewhat close with giving my an id, but i kept on getting only 1 as value, where it should be dependent on what row i click on. *
Related
I have a simple table. I am looking to modify the number format of my 2nd last td element (where I fetch "SumPrices" to a currency rounded to the dollar. I can't seem to figure out the syntax.
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
You will presumably be populating the contents of the table from a source? At the point of insertion / DOM manipulation is when you would format the number from your data source to be a currency. You would likely do this in javascript as per your question tag.
i.e.
formattedNumber = format(dataSource)
td.innerText = formattedNumber
Example:
let cost = document.querySelector("#SumPrices").innerHTML.trim();
/*casting to number*/
cost = +cost;
cost = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
}).format(cost);
document.querySelector("#SumPrices").innerHTML = cost;
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
Lots of ways to format your number, you could use the regex as suggested by Sajeeb. You could also use a Intl.NumberFormatted. MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Great guide on using this for currency here: https://flaviocopes.com/how-to-format-number-as-currency-javascript/
Is this helpful?
You can use toFixed(precision) and regex for formating currency.
const td = document.querySelector("#SumPrices");
let price = parseInt(td.innerText);
price = price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
td.innerText = '$ ' + price;
table {
width: 100% !important;
}
<table border="1" cellpadding="2" style="width: 25%;">
<tbody>
<tr>
<th scope="col"> Fiscal </th>
<th scope="col"> Courses </th>
<th scope="col"> Cost </th>
<th scope="col"> Comment </th>
</tr>
<tr>
<td align="center"> 2019-20</td>
<td align="center" id="Icount">252</td>
<td align="center" id="SumPrices">323662</td>
<td align="center"> Something </td>
</tr>
</tbody>
</table>
I have a table which contains data from my mongodb database.
Table data is as:
<tr>
<th class="text-center">Service Code</th>
<th class="text-center">Name</th>
<th class="text-center">Current Price</th>
<th class="text-center">delete</th>
</tr>
<c:forEach var="ser" items="${services}" varStatus="status">
<c:url var="deleteUrl" value="/serviceMaster/deleteType?serviceMasterId=${ser.serviceMasterId}" />
<tr>
<td class="text-center">${ser.serviceCode}</td>
<td class="text-center">${ser.serviceName} (${ser.serviceAbbreviation})</td>
<td class="text-center">Service Cost: ${ser.serviceCost}<br>Cost Price: ${ser.costPrice}</td>
<td class="text-center"><a href='<c:out value="${deleteUrl}"/>'><i id="del"
class="glyphicon glyphicon-trash"
style="color: #c12e2a; margin-left: 20px"
data-toggle="tooltip" title="Delete"></i></a></td>
</tr>
and this URLtriggers my controller which gets the Id and deletes the particular data from my db.
What is the best way to add alert to this approach, or confirmation message before deletion.
you can create function on link for confirmation or change as per below code.
Click
Is it possible using javascript to move the first row as follows into a <thead> tag?
<table id="TBL1399802283490" class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
Which becomes
<table id="TBL1399802283490" class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
I'm not too familiar with Javascript, so any help is much appreciated!
This should work for the table given in your code, for a general table it's better to obtain the elements in more secure way.
var table = document.getElementById('TBL1399802283490');
var thead = document.createElement('THEAD');
var tbody = table.getElementsByTagName('TBODY')[0];
var tr = table.getElementsByTagName('TR')[0];
table.appendChild(thead);
tbody.removeChild(tr);
thead.appendChild(tr);
I have a table which I search (show/hide rows) using quicksearch jQuery plugin. In same table I have to show/hide all the rows where checkbox (first column in table) is checked, if user click toggle row button ( button is outside table).
When I search data in table the hidden rows (checkbox checked) become visible. How can I achieve both functionality.
Where all the hidden rows (where checkbox is checked and user has clicked 'toggle rows') will remain hidden when user search data in table and vice versa.
Following is my jQuery:
$(function () {
$('input#gridSearch').quicksearch('#<%=gvActivities.ClientID %> tbody tr');
$('.showhiderows').click(function () {
$('#<%=gvActivities.ClientID %>').find("input[type=checkbox]:checked").closest('tr').toggle();
});
});
Checkbox is the first column in GridView.
Button to show/hide selected rows:
<input type="button" id="btnShowHide" class="showhiderows" value="Toggle Selected Rows" />
Table Structure, Just header and first row:
<table class="gvv1" id="MainContent_gvActivities">
<tr style="background-color: buttonface;">
<th scope="col">
</th>
<th scope="col">
Cluster
</th>
<th scope="col">
Activity
</th>
<th scope="col">
Data
</th>
<th scope="col">
Target
</th>
<th scope="col">
Achieved
</th>
</tr>
<tr>
<td>
<input id="longIdGeneratedByCode" type="checkbox"/>
</td>
<td style="width: 50px;">
ER.
</td>
<td style="width: 250px;">
Establishment
</td>
<td style="width: 460px;">
Number of
</td>
<td style="width: 70px;">
Text
</td>
<td style="width: 70px;">
Text2
</td>
</tr>
</table>
I think I can solve it,
$("#showhidetr").on("click", function(){
if($(this).is(':checked')){
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().hide();
}
})
} else {
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().show();
}
})
}
})
<input type='checkbox' id="showhidetr">
<table id="myTable">
<tr>
<td><input type='checkbox'></td>
<td>Mary</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>John</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>Michael</td>
</tr>
</table>
When you click showhidetr checkbox, the script looks for a checked checkbox in the table and hide its tr.
I have multiple column headers that spans of multiple column and I would like to find the correct header number/count for the columns. Also some of the table data have rowspan and colspan.
I want to be able to click any cell or table data and get its left and top headers.
So if I click the with "D9:LH1-TH4(H4a)" I should get:
Left Header is: LH1, Top Header1 is TH4 and Top Header 2 is H4a
And if I click the with "D3:LH2-TH2(H2b-H4a)" I should get:
Left Header is LH2, Top Header 1 is TH2 and Top Header 2 is H2b
Example:
<table width="200" border="1" style="background-color:#000; color:#FFF">
<tr>
<th scope="col"> </th>
<th colspan="2" scope="col"> TH1 </th>
<th colspan="4" scope="col"> TH2 </th>
<th colspan="6" scope="col"> TH4 </th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col"> H1a </th>
<th scope="col">H1b</th>
<th scope="col"> H2a</th>
<th scope="col">H2b</th>
<th scope="col">H2c</th>
<th scope="col">H2d</th>
<th colspan="6" scope="col"> H4a </th>
</tr>
<tr>
<th rowspan="3" scope="row"><span>LH1</span></th>
<td colspan="2" rowspan="3">D1:LH1-TH1(H1a-H1b)</td>
<td colspan="3" rowspan="2">D2:LH1-TH2(H2a-H2c)</td>
<td rowspan="3">D5:LH1-TH2(H2d)</td>
<td rowspan="3">D6:LH1-TH4(H2a-H2c)</td>
<td colspan="2">D7:LH1-TH4(H4a)</td>
<td>D8:LH1-TH4(H4a)</td>
<td rowspan="3">D13:LH1-TH4(H4a)</td>
<td rowspan="3">D14:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="3">D9:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="2">D3:LH1-TH2(H2a-H2b)</td>
<td>D4:LH1-TH2(H2c)</td>
<td>D10:LH1-TH4(H4a)</td>
<td>D11:LH1-TH4(H4a)</td>
<td>D12:LH11-TH4(H4a)</td>
</tr>
<tr>
<th scope="row"><span>LH2</span></th>
<td colspan="2" >D1:LH2-TH1(H1a-H1b)</td>
<td colspan="3">D2:LH2-TH2(H2a-H2c)</td>
<td colspan="5">D3:LH2-TH2(H2b-H4a)</td>
<td>D4:LH2-TH4(H4a)</td>
<td>D5:LH2-TH4(H4a)</td>
</tr>
</table>
Please see this link
That was annoyingly tricky.
you can find your headers by using the parent offsets.
got it working in this fiddle
http://jsfiddle.net/work4liberty/fk6sy/14/
$('td').on('click', function() {
var text = $(this).text().split(':')[1],
LH = text.split('-')[0],
TH = text.split('-')[1].split('(')[0],
TH2 = text.split('-')[1].split('(')[1];
console.log('Left header is '+LH+', Top header 1 is '+TH+' and Top header 2 is '+TH2)
});
FIDDLE