var str1 = "Sarah";
var str2 = "Tom";
var strTable = "<table style='width:100%'><tr><th>"+ str1 +"</th><th>"+ str2 +"</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";
$scope.rTable= strTable;
I am trying to pass HTML code in $Scope.rTable but instead of rendering the table it shows the HTML code as it is in the output.
i.e.
<table style='width:100%'><tr><th>Sarah</th><th>Tom</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>
I want it like:
Its a improper way to code.
The code should be like
In Controller
$scope.str1 = "Sarah";
$scope.str2 = "Tom";
In HTML
Considering your controller name as DemoController
<body ng-controller="DemoController">
<table style='width:100%'>
<tr><th> {{str1}} </th>
<th> {{str2}} </th>
<th>Age</th>
</tr>
</table>
</body>
And if your data is huge its recommended to use an Array of Object with ng-repeat. you can read it here -> https://docs.angularjs.org/api/ng/directive/ngRepeat
Use ng-bind-html and $sce.
Controller
app.controller('MainCtrl', function($scope, $sce) {
var str1 = "Sarah";
var str2 = "Tom";
var strTable = "<table style='width:100%'><tr><th>" + str1 + "</th><th>" + str2 + "</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";
$scope.rTable = $sce.trustAsHtml(strTable);
});
HTML
<body ng-controller="MainCtrl">
<div ng-bind-html="rTable"></div>
</body>
Related
I want to get the date of the same row when I click on Hold Button in the same row. I have tried more searching on Google but I couldn't find any helpful query to fix this issue.
I am new in ajax that's why I need help from this community. Please help me fix it.
Here is what I am trying:
HTML:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>User ID</th>
<th>Date</th>
<th>Name</th>
<th>User Status</th>
<th colspan="4" class="text-center">Action</th>
</tr>
</thead>
<tbody id="load-table">
<!-- dummy data for StackOverFlow to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
<tr>
<td>1</td>
<td class="statsdate">2022-02-12</td>
<td>Jhon</td>
<td>Active</td>
<td><Button class="hold" data-holdid="holdid">Hold</Button></td>
</tr>
<tr>
<td>4</td>
<td class="statsdate">2022-02-11</td>
<td>Michele</td>
<td>Active</td>
<td><Button class="hold" data-holdid="holdid">Hold</Button></td>
</tr>
<tr>
<td>10</td>
<td class="statsdate">2022-02-10</td>
<td>William</td>
<td>Active</td>
<td><Button class="hold" data-holdid="holdid">Hold</Button></td>
</tr>
</tbody>
</table>
AJAX:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#load-table").append(
"<tr>"
+ "<td>" + value.id + "</td>" +
"<td class='statsdate'>" + statsDate + "</td>" +
"<td>" + value.full_name + "</td>" +
"<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
"<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
"</tr>"
);
});
//Hold user by clicking on hold modal
$(document).on("click",".hold",function(){
var answer = window.confirm("Are You sure to mark this user as Hold?");
if (answer) {
var holdid = $(this).data("holdid");
var sts_date = $(this).closest(".statsDate").text();
var obj = {uID : holdid, date: sts_date};
var myJSON = JSON.stringify(obj);
console.log(myJSON);
}
else {
$("#usersCount").html("");
}
});
</script>
Here is an image to make my question clear.
Image:
Question Image
Please help me fix it. Thanks in advance!
The issue is because closest() only looks through the parent elements of the target. In your HTML, .statsdate is a child of the sibling to the parent. As such the simplest way to do what you need is to use closest() to get the common parent tr, then find() to get the .statsdate.
Also note that the class is statsdate, not .statsDate - case is important in selectors.
var sts_date = $(this).closest('tr').find(".statsdate").text();
Working example:
$(document).ready(function() {
let statsDate = (new Date()).toLocaleDateString();
let value = {
id: '123',
full_name: 'foo bar'
}
$("#load-table").append(
"<tr>" +
"<td>" + value.id + "</td>" +
"<td class='statsdate'>" + statsDate + "</td>" +
"<td>" + value.full_name + "</td>" +
"<td><button type='button' title='Approve this user stat' class='approve btn btn-success btn-rounded btn-icon' data-approveid='" + value.id + "'><i class='typcn typcn-thumbs-up'></td>" +
"<td><button type='button' title='Mark as Hold' class='hold btn btn-danger btn-rounded btn-icon' data-holdid='" + value.id + "'><i class='typcn typcn-archive'></td>" +
"</tr>"
);
});
//Hold user by clicking on hold modal
$(document).on("click", ".hold", function() {
var answer = window.confirm("Are You sure to mark this user as Hold?");
if (answer) {
var holdid = $(this).data("holdid");
var sts_date = $(this).closest('tr').find(".statsdate").text();
var obj = {
uID: holdid,
date: sts_date
};
var myJSON = JSON.stringify(obj);
console.log(myJSON);
} else {
$("#usersCount").html("");
}
});
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>User ID</th>
<th>Date</th>
<th>Name</th>
<th>User Status</th>
<th colspan="4" class="text-center">Action</th>
</tr>
</thead>
<tbody id="load-table">
<!-- dummy data for StackOverFlow to show you data (By the way this data is dynamic coming from a database. I have placed dummy data only to show the output. So you can ignore data in #load-table)-->
<tr>
<td>1</td>
<td class="statsdate">2022-02-12</td>
<td>Jhon</td>
<td>Active</td>
<td>
<button class="hold" data-holdid="holdid">Hold</button>
</td>
</tr>
<tr>
<td>4</td>
<td class="statsdate">2022-02-11</td>
<td>Michele</td>
<td>Active</td>
<td>
<button class="hold" data-holdid="holdid">Hold</button>
</td>
</tr>
<tr>
<td>10</td>
<td class="statsdate">2022-02-10</td>
<td>William</td>
<td>Active</td>
<td>
<button class="hold" data-holdid="holdid">Hold</button>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have a table where i'm trying to add more rows with powershell then export it as a new HTML file.
Here's the body of the HTML i'm trying to add rows to.
<BODY>
<TABLE style="WIDTH: 100%" cellPadding=5>
<TBODY>
<TR>
<TH>Bruger</TH>
<TH>Windows</TH>
<TH>Installations dato</TH>
<TH>Model</TH>
<TH>Sidst slukket</TH></TR>
<TR>
<TD>Users name</TD>
<TD>Windows 10 Pro</TD>
<TD>23-01-2020</TD>
<TD>ThinkPad</TD>
<TD>7 dage</TD></TR></TBODY></TABLE>
<TABLE>
<TBODY></TBODY></TABLE></BODY>
I figured i'd need to change the inner html of an object but it's just throwing an error.
Here's my code
$src = [IO.File]::ReadAllText($outPath)
$doc = New-Object -com "HTMLFILE"
$doc.IHTMLDocument2_write($src)
$elm = $doc.getElementsByTagName('tr')[0]
$elm.innerHTML = "<TR>New row!</TR>"
When I check the inner html variable I get the HTML output that I would expect, so it's grabbing the correct object, but I can't assign anything to it for whatever reason.
Here's the error
Exception from HRESULT: 0x800A0258
At line:1 char:1
+ $elm.innerHTML = "<TH>User</TH>"
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : OperationStopped: (:) [], COMException
+ FullyQualifiedErrorId : System.Runtime.InteropServices.COMException
Instead of modifying the innerHTML contents of an existing <tr> element, you'll want to:
Create a new <tr> element
Create any requisite <td> child element(s)
Append <td> element(s) to your new row
Append the new row to the existing <tbody>
Try something like this:
$html = #'
<BODY>
<TABLE style="WIDTH: 100%" cellPadding=5>
<TBODY>
<TR>
<TH>Bruger</TH>
<TH>Windows</TH>
<TH>Installations dato</TH>
<TH>Model</TH>
<TH>Sidst slukket</TH></TR>
<TR>
<TD>Users name</TD>
<TD>Windows 10 Pro</TD>
<TD>23-01-2020</TD>
<TD>ThinkPad</TD>
<TD>7 dage</TD></TR></TBODY></TABLE>
<TABLE>
<TBODY></TBODY></TABLE></BODY>
'#
# Create HTML document object
$doc = New-Object -ComObject HTMLFile
# Load existing HTML
$doc.IHTMLDocument2_write($html)
# Create new row element
$newRow = $doc.createElement('tr')
# Create new cell element
$newCell = $doc.createElement('td')
$newCell.innerHTML = "New row!"
$newCell.colSpan = 5
# Append cell to row
$newRow.appendChild($newCell)
# Append row to table body
$tbody = $doc.getElementsByTagName('tbody')[0]
$tbody.appendChild($newRow)
# Inspect resulting HTML
$tbody.outerHtml
You should expect to see the new row appended to the table body:
<TBODY><TR>
<TH>Bruger</TH>
<TH>Windows</TH>
<TH>Installations dato</TH>
<TH>Model</TH>
<TH>Sidst slukket</TH></TR>
<TR>
<TD>Users name</TD>
<TD>Windows 10 Pro</TD>
<TD>23-01-2020</TD>
<TD>ThinkPad</TD>
<TD>7 dage</TD></TR>
<TR>
<TD colSpan=5>New row!</TD></TR></TBODY>
You could create a nice little helper function for adding new rows:
function New-HTMLFileTableRow {
param(
[Parameter(Mandatory)]
[mshtml.HTMLDocumentClass]$Document,
[Parameter(Mandatory)]
[string[]]$Property,
[Parameter(Mandatory, ValueFromPipeline)]
$InputObject
)
process {
$newRow = $Document.createElement('tr')
foreach($propName in $Property){
$newCell = $Document.createElement('td')
$newCell.innerHtml = $InputObject.$propName
[void]$newRow.appendChild($newCell)
}
return $newRow
}
}
Then use like:
Import-Csv .\path\to\user-os-list.csv |New-HTMLFileTableRow -Property User,OSVersion,InstallDate,Model,LastActive -Document $doc |ForEach-Object {
[void]$tbody.appendChild($_)
}
I have a jsp that has multiple <table> in a page. I want only one particular table to be of fixed height and have a scrollable <tbody> and fixed <thead>.
For that I have written a custom CSS as a class so that I can use it in that paricular table. But its not working.
Here is the CSS:
.scroll-tbody{
display: block;
height: 460px;
overflow-y: auto;
}
And here is the JSP snippet:
<table class="table table-hover table-condensed">
<thead>
<tr>
<td><b>    Name</b></td>
<td><b>Phone</b></td>
<td><b>Total Exp.</b></td>
<td><b>Location</b></td>
<td><b>Profile Type</b></td>
<td><b>Domain</b></td>
<td><b>Assigned To</b></td>
<td><b>Status</b></td>
<td><b>Date</b></td>
</tr>
</thead>
<tbody class="scroll-tbody"> <!-- HERE IS THE CUSTOM CSS FOR SCROLLING -->
<%
if(fullList.size()>0)
{
Iterator itr = fullList.iterator();
while(itr.hasNext())
{
FileService fs = new FileService();
File prf = (File)itr.next();
String prfData = prf.getAbsolutePath() + "#";
prfData += fs.readData(prf.getAbsolutePath(),"","profiledata");
prfData = prfData.replace("\\","/");
String[] data = prfData.split("#");
String name = data[1].replace("_"," ");
String phone = data[2];
String totExp = data[3];
String location = data[5];
String prfType = data[6];
String domain = data[7];
String assignedTo = data[8];
String status = data[9];
String prfDate = data[12];
prfData = prfData.replace("'","\\'");
prfData = prfData.replace("\"","\\'");
prfData = prfData.replace("\r\n","^");
System.out.println("---->JSP Data: "+prfData+"\n");
session.setAttribute("dataToEdit",prfData);%>
<tr>
<td><a data-toggle="modal" data-target="#editProfileModal" onClick="getData('<%=prfData%>')"><i class="fa fa-fw fa-file"></i><font size="2"><%=name%></font></a></td>
<td><font size="2"><%=phone%></font></td>
<td><font size="2"><%=totExp%></font></td>
<td><font size="2"><%=location%></font></td>
<td><font size="2"><%=prfType%></font></td>
<td><font size="2"><%=domain%></font></td>
<td><font size="2"><%=assignedTo%></font></td>
<td><font size="2"><%=status%></font></td>
<td><font size="2"><%=prfDate%></font></td>
</tr>
<% }
} %>
</tbody>
</table>
I dont want to write the CSS like: table{...} thead{...} tbody{...} as it will impact all the tables present in that page.
Am I missing something?
Thanks in advance.
first of all I've been dealing with this problem for the past 2 days and I thought I may finally ask it since I've not found any working solution. First let me introduce the problem then I'll explain what I've tried.
As the title introduces, I'm trying to convert HTML to PDF using iTextSharp, the HTML includes gridview as well.
using (StringWriter sw = new StringWriter())
{
using (HtmlTextWriter hw = new HtmlTextWriter(sw))
{
System.Text.Encoding Enc = System.Text.Encoding.GetEncoding("UTF-8");
iTextSharp.text.pdf.BaseFont STF_Helvetica_Turkish = iTextSharp.text.pdf.BaseFont.CreateFont("Helvetica", "CP1254", iTextSharp.text.pdf.BaseFont.NOT_EMBEDDED);
iTextSharp.text.Font fontNormal = new iTextSharp.text.Font(STF_Helvetica_Turkish, 12, iTextSharp.text.Font.NORMAL);
StringReader sr = new StringReader(sw.ToString());
string contentHtml = PrintElem();
contentHtml = contentHtml.Replace("Ş", "S");
contentHtml = contentHtml.Replace("İ", "I");
contentHtml = contentHtml.Replace("ı", "i");
contentHtml = contentHtml.Replace("Ğ", "G");
contentHtml = contentHtml.Replace("Ü", "U");
contentHtml = contentHtml.Replace("ğ", "g");
contentHtml = contentHtml.Replace("ş", "s");
StringReader srHtml = new StringReader(contentHtml);
Stream denemeStream = GenerateStreamFromString(srHtml.ToString());
iTextSharp.text.Document pdfDoc = new iTextSharp.text.Document(iTextSharp.text.PageSize.A4, 10f, 10f, 10f, 0f);
MemoryStream ms = new MemoryStream();
iTextSharp.text.pdf.PdfWriter writer = iTextSharp.text.pdf.PdfWriter.GetInstance(pdfDoc, ms);
pdfDoc.Open();
using (var msCss = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(PrintElem().ToString())))
{
using (var msHtml = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(PrintElem().ToString())))
{
//iTextSharp.tool.xml.XMLWorkerFontProvider fontProvider = new iTextSharp.tool.xml.XMLWorkerFontProvider();
//Parse the HTML
iTextSharp.tool.xml.XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, msHtml, (Stream)null);
}
}
//iTextSharp.tool.xml.XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, denemeStream,null,Encoding.UTF8);
pdfDoc.Close();
MemoryStream ret = new MemoryStream(ms.ToArray());
return ret;
}
}
As you can see last solution I tried was to change all turkish characters to english ones yet the pdf output still did not display them.
So far I've tried changing encoding to everything offered on the internet. I tried to add the font yet I've failed to do it as you can see I'm not using that overloaded function of ParseXHtml (if you know how to add this fontNormal to the parsing I'll gladly try that out as well).
the PrintElem function returns the following HTML content (or similar ones that contain turkish characters inside)
<html>
<head>
<h3 align='center'>ABG SİGORTA ALACAK/VERECEK MUTABAKAT EKSTRESİ</h3>
<style>#ContentPlaceHolder1_vaultsListGridview{width: 100%;} td:nth-child(3) {text-align: right;}td:nth-child(4) {text-align: right;}.netWorthClass{text-align: right;}</style>
</head>
<body >
<br/>
<div>Kasa Adı = 1</div>
<div>Devir = 56 TL</div>
<br/>
<div>
\r\n\t
<table class=\"table table-hover table-striped\" cellspacing=\"0\" rules=\"all\" border=\"1\" id=\"ContentPlaceHolder1_vaultsListGridview\" style=\"border-collapse:collapse;\">
\r\n\t\t
<thead>
\r\n\t\t\t
<tr>
\r\n\t\t\t\t
<th scope=\"col\">Tarih</th>
<th scope=\"col\">Açıklama</th>
<th scope=\"col\">Giren</th>
<th scope=\"col\">Çıkan</th>
\r\n\t\t\t
</tr>
\r\n\t\t
</thead>
<tbody>
\r\n\t\t\t
<tr>
\r\n\t\t\t\t
<td>\r\n <span id=\"ContentPlaceHolder1_vaultsListGridview_fullDateLabel_0\">26/05/2017</span>\r\n </td>
<td>\r\n <span id=\"ContentPlaceHolder1_vaultsListGridview_detailLabel_0\">MART AYI KALAN VE NİSAYIN AYI SSK ÖDEMESİ</span>\r\n </td>
<td>\r\n 0\r\n </td>
<td>\r\n 1,295.00\r\n </td>
\r\n\t\t\t
</tr>
<tr>
\r\n\t\t\t\t
<td>\r\n <span id=\"ContentPlaceHolder1_vaultsListGridview_fullDateLabel_1\">31/05/2017</span>\r\n </td>
<td>\r\n <span id=\"ContentPlaceHolder1_vaultsListGridview_detailLabel_1\">NİSAN AYI KOMİSYON</span>\r\n </td>
<td>\r\n 1,351.00\r\n </td>
<td>\r\n 0\r\n </td>
\r\n\t\t\t
</tr>
\r\n\t\t
</tbody>
\r\n\t
</table>
\r\n
</div>
<br/>
<div class='netWorthClass'>Giren Miktar = 1351 TL</div>
<div class='netWorthClass'>Çıkan Miktar = 1295 TL</div>
<br/>
</body>
</html>
I've taken the above html part from debugger sorry for the mess, but you see the problematic characters above.
I'll gladly try out everything you may offer. Thanks in advance.
i was able to break string to chars array and surround each char in <span></span> but when im trying to pass this array to table the html wont render.
breaking the string:
//parse cron_format and edit each digit individually
$scope.parse = function (cron_format){
var parsed = cron_format.split('');
for(var i = 0; i < parsed.length; i++) {
parsed[i] = '<span>' + parsed[i] + '</span>';
}
return parsed;
}
when i try to create the table like this:
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody ng-repeat="(user_id,script_id) in data | filter: test">
<tr ng-repeat="(script_id, cron_format) in script_id">
<td>{{user(user_id)}}</td>
<td>{{script(script_id)}}</td>
<td ng-bind-html-unsafe="{{parse(cron_format)}}"></td>
</tr>
</tbody>
</table>
there are no values in cron_format:
without trying to render -> <td>{{parse(cron_format)}}</td>
the table looks like this:
what am i doing wrong?
UPDATE:
i changed function's two last rows :
$scope.parsed.htmlSafe = $sce.trustAsHtml(parsed.html);
return parsed;
and i get this error:
Can't interpolate: {{parse(cron_format)}}
TypeError: Cannot set property 'htmlSafe' of undefined
can someone explain whats the mistake im doing here?