I have a table declared statically with html and the quantity of table rows is dependent on information stored on a database. The cells are created using Javascripts insertRow function and I can access the TD element by using table.row[x].cells[y]. My goal is to insert Angular's md-button in place of the HTML button attribute I created using .innerHTML.
If you are using angular - then you should use the ng-repeat (or *ngFor in Angular 2+) directives to add the content to the page instead of using javascript. The following will give a table with two rows and 3 tds per tr.
So its really more a case of getting your data, adding it to $scope and formatting it in a way that you can iterate over in the ng-repeat.
If you really want to keep it the way yuo have it - then simple create a button and styling it with the stylnig to make it look like the button you like.
var angularTest = angular.module('angularDiv',[]);
angularTest.controller('tableController', ['$scope', function($scope) {
$scope.items= [
{ contents: ['content 1.1', 'content 1.2','content 1.3']},
{ contents: ['content 2.1', 'content 2.2','content 2.3']},
];
}])
table {border-collapse: collapse}
th {
border: solid 1px #d4d4d4;
padding: 5px 10px;
background: #ededed;
border-bottom-width: 2px
}
td {
border: solid 1px #d4d4d4;
padding: 5px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="angularDiv">
<table ng-controller="tableController">
<thead>
<tr>
<th ng-repeat="heading in items[0].contents">
Heading {{$index + 1}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat ="content in item.contents">{{content}}</td>
</tbody>
</table>
</div>
Related
My task is to add table rows dynamically in the email template.
This is how I created email template
<html>
<head>
<style type=3D"text/css">
</style>
</head>
<body><div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{data}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div></body>
</html>
And from the backend, I am passing an object with the required data as below
val tableData = '<tbody>
<tr><td>ABC</td> <td>5</td> <td>100</td></tr>
<tr><td>PQR</td> <td>2</td> <td>200</td></tr>
<tr><td>XYZ</td> <td>1</td> <td>75</td></tr>
</tbody>';
const processData = {
data: table,
userName: "XYZ"
}
But in mail, I'm getting below content
Can someone please help me to pass table rows dynamically.
Apart from the above solution here is another one.
From the backend, you can pass an array of objects. And in hbs template, built-in-helpers functions of handlebars.
Built-in-helpers Doc link
Here is the link where I tried creating dynamic rows by passing an array of objects from the backend using handlebars built-in functions
Link
In your email template, you are passing the variable "data" to the table, which contains the HTML string for the table body, but it is not being rendered as HTML in the email.
To render the table body as HTML, you can use triple curly braces {{{data}}} instead of double curly braces {{data}} in your Handlebars template. This will tell Handlebars to render the HTML string as-is, without escaping the HTML tags.
So the final result should look like:
<html>
<head>
<style type=3D"text/css"></style>
</head>
<body>
<div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{{data}}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div>
</body>
</html>
You can check HTML-escaping part in the docs for more details.
I'd like to create a table with content from my database. I have a table without a header for multiple reasons (e.q. scrolling). Is it possible set the colums to the same width as the table before without JS? I dont want to add a class to each td element if possible. Not all columns have the same width. Nth-child is a bad solution because I have multiple tables.. :/
Here is a shorter version of my table:
table, th, td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
.h1 {
width: 125px;
}
.h2 {
width: 150px;
}
<table>
<tr>
<th class="h1">
<span>a</span>
</th>
<th class="h2">
<span>b</span>
</th>
</tr>
</table>
<table>
<tr>
<td>
<span>c</span>
</td>
<td>
<span>d</span>
</td>
</tr>
</table>
one of the tables has header and one of them doesn't. and in your css you do not specify the table without header... you should has a code like this
table , tr, td{}
I have a table with multiple lines, e.g.:
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
Now, in javascript (based on a radio input field) I want to remove (e.g.) #line3 by adding a visibility:collapse, something like:
document.getElementById("line3").style = "visibility:collapse";
The special thing about #line3 is that it has a border-top:
<style>
table {
border-collapse: collapse;
}
#line3 {
border-top:1px solid black;
}
</style>
The problem I have with that: When I "collapse" #line3 the border persists, eventhough the element "does not exist". I guess this should be due to the border-collapse in the table style "inheriting" a border element on the previous tr element? How can I fix that issue?
EDIT: I'd like to keep the javascript like that. Of course I could remove/readd the style element but there should be a different way to solve this?!
Of course I could remove/readd the style element
I think this means you don't want to mess with the border-top property when changing the row's visibility, correct?
In that case, it looks like your only option is to use display:none instead of visibility:collapse[1], which is unfortunate because then your table might have the wobbly effect that visibility:collapse was designed to prevent.
[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering is not crystal clear, but looks like the spec prescribes the behavior you don't want. And chrome and firefox act a bit differently in the visibility:collapse case. https://jsfiddle.net/dgrogan/gLqo9s4w/2
let visible = 1;
toggle.onclick = function() {
line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
visible = !visible;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid lime;
}
#line3 {
border-top: 2px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>
<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>
Have you tried "display: none"?
document.getElementById("line3").style = "display: none";
Or maybe you could try setting the border-top to 0 which should hide it.
document.getElementById("line3").style = "visibility:collapse; border-top: 0";
.cssText
You can edit the whole inline [style] attribute by using .cssText:
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
This allows you to set visibility and border properties (and more if you want) in one line.
Demo
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
table {
border-collapse: collapse;
}
#line3 {
border-top: 1px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>
You have several solutions to do this, with Jquery:
$('#line1').hide();
//OR
$('#line1').css('visibility','collapse');
//OR
$('#line1').css('display','none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
You can also use Javascript directly with the getElementById property:
document.getElementById("line1").style.display = "none";
Or
document.getElementById("line1").style.visibility = "collapse";
I would like to be able to display a table with cell borders in a text angular div.
The content renders but the cell border doesnt
markup
<div ng-app="test">
<div ng-controller="testController">
<div text-angular name="testEditor" ng-model="htmlContent"></div>
</div>
</div>
controller code
angular.module('test', ['textAngular'])
.controller('testController',
function($scope, $timeout, textAngularManager) {
$scope.htmlContent = undefined;
//$scope.htmlContent = '<p>Hello There!</p>';
$timeout(function () {
$scope.htmlContent = "<table><tr><td style ='border: 1px solid black'>aaaa</td><td style ='border: 1px solid black'>dddddd</td></tr><tr><td style ='border: 1px solid black'>fffff</td><td style ='border: 1px solid black'>ffffffff</td></tr></table>";
//textAngularManager.refreshEditor('testEditor');
}, 1000);
});
This is demonstrated at ->
http://jsfiddle.net/x20mfq44/
However if i render the html in a separate jsfiddle without text angular, the cell borders show up fine.
<table>
<tr>
<td style ='border: 1px solid black'>aaaa</td>
<td style ='border: 1px solid black'>dddddd</td>
</tr>
<tr>
<td style ='border: 1px solid black'>fffff</td>
<td style ='border: 1px solid black'>ffffffff</td>
</tr>
</table>
https://jsfiddle.net/1xhfLpmq/
Are you using angular-sanitize? That can mess with HTML attrs through ng-model.
A rule of thumb - don't use inline styling in your html. It's messy and outdated.
A simple css rule can solve your problem, something like
table td {border: 1px solid black}
I updated your fiddle, here : http://jsfiddle.net/x20mfq44/1/
Hope this helps!
I have a table where a row gets added every time I press a "Add" button. I have an "Edit" button which is placed in the first cell of the newly created row.
I want to highlight the row that is being edited. I know that I can get the current <tr> element like
var par = $(this).parent().parent();
But when I use,
par.css('border-color', 'red');
It does not change the color.
What mistake am I making and how should I highlight that particular row?
This is really about the styling of the <tr>. CSS doesn't like to style <tr>'s because they really only exist for semantics. In order to add a border to one, you need to make it display: block;.
Here is a jsFiddle and example code.
HTML
<table>
<tbody>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
<tr>
<td>
Edit
</td>
</tr>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
</tbody>
</table>
Javascript
$(".edit").click(function(e) {
$(this).closest('tr').toggleClass('editting');
e.preventDefault();
});
CSS
table tr {
display: block;
border: 1px solid rgba(0, 0, 0, 0);
}
.editting {
background: #FAA;
border: 1px solid red;
}
Please note how I used an rgba color to make the border opaque. There are other ways to do this, but if you leave the border off it causes the table to "jitter."
Assuming this refers to an element within the tr, then it will be better to use .closest() here
var par = $(this).closest('tr')