Im new to angular, i have a table like this which is having angular data, its not having any controller or model. Its just displaying in html.
<table width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc">
<tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-repeat:repeat-x" height="30" >
<td colspan="4" align="center"></td>
</tr>
<tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-color:gold;background-repeat:repeat-x"
height="30" >
<td width="211" align="center">COMMODITY</td>
<td width="149" align="center" valign="middle" >BUY</td>
<td width="175" align="center" valign="middle" >SELL</td>
</tr>
<tbody ng-repeat="item in newsData | limitTo : 2" >
<tr bgcolor="#FFFFFF" height="40" >
<td align="center" style="background-image:url(images/td.png);color:#000;font-size:15px" >{{item.COMMODITY | limitTo: 18 }}</td>
<td align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.BCOL}}" ><div > {{item.BUY}} </div></td>
<td align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.SCOL}}" ><div >{{item.SELL}} </div></td>
</tr>
</tbody>
</table>
The output of the following is like this..
By default all the data is coming under Commodity.. I want to display only the content like 999[GOLD][IMPORTED] and Cut the remaining text after that.
then try limitTo filter:
This shows only number of characters from beginning,
what you want to display:
{{ item.COMMODITY | limitTo: 19 }}
since 999[GOLD][IMPORTED] has 19 characters
Related
My html table shows NaN value because of field name has a symbol(/) in between.
below is my code
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index"
ng-click="msg.payload = user.send(msg);" style="width:100%" flex>
<td ng-bind="$index+1"></td>
<td ng-bind="user.PalletID"></td>
<td ng-bind="user.Description"></td>
<td ng-bind="user.Location"></td>
<td ng-bind="user.Empty/NonEmpty"></td>
<td style="text-align:center" ng-click="msg.payload = user.send(msg);" >
<img src="http://192.168.137.1:1880/ui/Images/unload32.png" width="30" height="30">
</td>
</tr>
Please help to resolve this issue.
I have the following table in an Angular 8 application where I am looping through some data and displaying the data in the table. In the table I want to use rowspan for "Status" and "Create Date" since these will always be the same. "Name" and "Amount" will differ so need different rows for them but a single entry for Status. I tried rowspan="abc.length" for {{data.status}} but it does not work.
<table class="table tableBorder table-responsive table w-100">
<tr style="text-align: center;" class="bg-gray">
<td class="w-12 bold text-left">Name</td>
<td class="w-10 bold text-left">Amount (Rs.Cr.)</td>
<td class="w-13 bold text-left">Status</td>
<td class="w-8 bold text-left">Create Date</td>
</tr>
<tr *ngFor="let data of abc; let i = index">
<td class="w-12 truncate-text ref-number-truncate line-height23">
{{data.name}}
</td>
<td class="w-8 truncate-text">{{data.amount}}</td>
<td class="w-13 truncate-text">{{data.status}}</td>
<td class="w-10 truncate-text">{{data.createdDate}}</td>
</tr>
</table>
Try [attr.rowspan] as
<td [attr.rowspan]= "abc.length">
My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.
Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();
I have a program in the form of an HTML page that contains both draggable/droppable elements and contenteditable elements. Is there any way to save both the positions of the elements as well as the contenteditable text? There may be over a hundred of each type of element, and I can't premake their ids, because they are generated when a button is clicked. I've looked into using localStorage but haven't found anything that pertains to my problem. It has to be an easy solution that I can apply to everything as it happens.
Here is my shortened HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
td {
border: 1px solid black;
}
.tile {
cursor: move;
min-width: 48px;
width: fit-content;
height: 24px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b></td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Andorra</td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom><font color="#000000"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
</tr>
</table>
</div>
</body>
</html>
and here is my JavaScript:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<div class=tile contenteditable=true></div>");
$("#draggable").append(tile);
$(".tile").draggable().resizable();
$("#tableDiv").droppable();
$("<td>").resizable();
});
});
Any and all advice is welcome.
Thanks in advance!
There are three ways to do this.
1) Save the whole html in which user has made changes, as a template.
This is not advisable as while saving the page, it can be noticed that some of the information is lost.
2) Save the whole html structure of the div which you need in a javascript variable and store it in a database. When needed get it from the server and display it as it is by simply making the innerHtml of the parentDiv to the data you got from the server.
3) The method which i would personally prefer. Save the state of your html div in a JSON format ( information like width, height, positions, images of divs, etc. ). Store that in the database. Now make a rest API and get the JSON data whenever needed. Parse it and display it as you need it to be displayed. A much cleaner approach !!!
The best way for it to do it is to save the state of each object on a json and save that on a database. So with the help of a rest api you can fetch the data back and rebuild everything from the same state json that you created.
Edited -
So what i've done in a similar project is to take all the html properties data like width, height, position x and y etc and store it on an object like
"input1": {
"text": "Hello",
"placeholder": "Put a text in here!",
"width": "100%",
"height": "100%",
"position" : {
"x": 10,
"y": 10
}
}
Put all your objects in one and pass that as a JSON on the server and then rebuild it from the same object.
You will need more than just javascript for that for sure.
I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.
I don't know much about jQuery. Please help me to solve this problem.
In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".
And again the total sum of all the prices should appear in the button as a Total.
Please note: all the row values are coming from my database table based on the selection of items by users.
I have used only this code to show values in my invoice.jsp page:
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center" >
<s:textfield value="%{price}" name="" size="6"></s:textfield>
</td>
</tr>
</s:iterator>
And my invoice.jsp output looks like this:
I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).
I also tried this but I am still unable to solve my problem.
My full JSP code:
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74%">
<s:form action="dfs" id="form3" theme="simple">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="your_content">
<tr>
<td valign="top" height="10%">
<div id="invNum">Invoice# 12688</div>
<div id="ttielMain">Vision Books</div>
<div id="Orgaddress"> Thamel Kathmandu Nepal</div>
<div id="phoneNum"> Tel# 00977-1-12173803</div>
<div id="websiteOrg"> www.thebestbookfinder.com</div>
</td>
</tr>
<tr>
<td valign="top" width="100%" align="left">
----------------------------------------------------------- -----------------------------------
</td>
</tr>
<tr>
<td height="6%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
<td width="65%" align="left">Title</td>
<td width="10%" align="left">Unit Price</td>
<td width="10%" align="center">Qty</td>
<td width="15%" align="left">Line Total</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="65%" align="left">
-------------------------------------------------------
</td>
<td width="10%" align="left">----------</td>
<td width="10%" align="center">-----</td>
<td width="15%" align="left">-------------</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="65%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center"><s:textfield value="%{price}" name="" size="6"></s:textfield></td>
</tr>
</s:iterator>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
<s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">Discount:<sj:textfield name="amt" size="1" placeholder=" %"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
Total: <s:property value="%{'' + #attr.total}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
As #flow said, use .change():
$(function() {
$('input[name^="quantity"]').change(function() {
var unitprice = $(this).siblings('input[name^="unitprice"]').val();
$(this).siblings('input[name^="price"]')
.val($(this).val() * unitprice);
});
});
Use .change() on your inputs.
jQuery Docs - Change