I have the following table in HTML and I want to remove all whitespaces from variable item.book.How can I do it?
<table>
<theader>
<tr>
<th>Livro</th>
<th>Autor da Review</th>
<th>Review</th>
<th>Link</th>
</tr>
</theader>
<tbody>
<% list.forEach((item,index)=>{ %>
<tr>
<td><%= item.book %></td>
<td><%= item.name %></td>
<td> <%= item.desc %></td>
<td id="link"> <a href=/review/<%= item.email %>/ <%= item.book %>> /review/<%= item.email %>/<%= item.book %> </a></td>
</tr>
<% })%>
</tbody>
</table>
Related
I am trying to access a value from an html <tr> element when it is clicked as follows:
<body>
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<% viewObj.forEach(function(obj) { %>
<tr onclick="myFunction(this)">
<th scope="row"><%= x %></th>
<td><%= JSON.stringify(obj.completion_date).slice(1,11) %></td>
<td> <%= obj.wo_num %></td>
<td><%= obj.drawing_num %></td>
<td><%= obj.m_programming %></td>
<td><%= obj.m_machining %></td>
<td><%= obj.m_programming + obj.m_machining %></td>
<% x++;}); %>
</tbody>
</table>
</body>
<script>
function myFunction(x) {
alert("name: " + x.cells[0]);
}
</script>
When I click on a row in the table, I get the following alert box:
How do I access the values of the HTMLTableCellElement?
As per #Barmar, to access the values of the HTMLTableCellElement in my case would be:
<script>
function myFunction(x) {
console.log(x.cells[1].textContent);
}
</script>
I am getting the error: missing ) after argument list while compiling ejs.
I tried many times, but I can't find the problem.
Here's the ejs that causes errors.
What is the problem with this code?
<%- include('../_layouts/adminheader') %>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (count > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
<% } %>
</tr>
<% }); %>
</tbody>>
</table>>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
<%- include('../_layouts/adminfooter') %>
Before your closing </tr>, the line
<% } %>
is superfluous. The parser therefore interprets this as ending the callback function of forEach() without providing further arguments or closing the
round bracket of the function call. (The error message is actually pretty clear about what's going on, if you think about it. :))
By the way you also got two superflous > behind your closing </tbody> and </table>.
Here's a working fixed code example you can put into https://ionicabizau.github.io/ejs-playground/
<%
var products = [
{title: "foobar", category: "things", image: "", _id: 1, price: 0}
];
var count = products.length;
%>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (products.length > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% }); %>
</tbody>
</table>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
I have got following error "unexpected token <" while I have run following code in my app build in backbone.js using underscore template.
Here is code:
var data = [{'date':'03 Mar', 'users':5, 'not_ended_sessions':25}]
var rowtemplate = _.template(this.template, {'data': data });
$(this.el).html(html);
and here is my html template:
<section class="clearfix">
<table>
<thead class="title">
<tr>
<th class='date'>Date</th>
<th>Users</th>
<th>Not Ended Session(s)</th>
</tr>
</thead>
<tbody>
<% _.each(data, function(el){ %>
<tr>
<td ><%= el.date %></td>
<td ><%= el.users %></td>
<td ><%= el.not_ended_sessions %</td>
</tr>
< % }); %>
</tbody>
</table>
<p class="Total Session(s)">0</p>
</section>
I have looked various blogs over google, and made changes according suggestions, but still getting same error.
Can someone look into it?
Thanks.
There is a syntax error in the code, the last td
<section class="clearfix">
<table>
<thead class="title">
<tr>
<th class='date'>Date</th>
<th>Users</th>
<th>Not Ended Session(s)</th>
</tr>
</thead>
<tbody>
<% _.each(data, function(el){ %>
<tr>
<td ><%= el.date %></td>
<td ><%= el.users %></td>
<td ><%= el.not_ended_sessions %></td>
</tr>
<% }); %>
</tbody>
</table>
<p class="Total Session(s)">0</p>
</section>
Using underscore templates. Looping through a backbone collection:
<% _.each(venues, function (venue) { %>
<tr>
<td class="text-muted"><%= venue.get('city') %></td>
<td class="text-muted"><%= venue.get('name') %></td>
<td class="text-muted"><%= venue.get('live') == true ? "Yes" : "No" %></td>
<td class="text-muted">$0.00</td>
<td class="blank controls">
<span class="icon icon-edit"></span><span class="text-hide">Edit</span>
</td>
</tr>
<% }); %>
I get:
Uncaught TypeError: Cannot call method 'get' of undefined
If venues is a Backbone.Collection, then it will have all of the underscore iteration methods mixed in.
Try:
<% venues.each(function (venue) { %>
<tr>
<td class="text-muted"><%= venue.get('city') %></td>
<td class="text-muted"><%= venue.get('name') %></td>
<td class="text-muted"><%= venue.get('live') == true ? "Yes" : "No" %></td>
<td class="text-muted">$0.00</td>
<td class="blank controls">
<span class="icon icon-edit"></span><span class="text-hide">Edit</span>
</td>
</tr>
<% }); %>
This is the Units Table:
<div id="table_header">Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
This is the Selected Units Table:
<div id="table_header">Selected Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
Image button to push
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
By clicking this button, the selected row from the Units table should transferred to the Selected Units table.
Thanks in advance!.
Modified markup
<div class="table_header">Units</div>
<table class="gridView location" id="units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {:class => "location"}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="current_location">
<td><%= check_box("select", "all", {:class => "current_location"}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<div class="table_header">Selected Units</div>
<table class="gridView" id="selected_units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all") %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
<td><%= check_box("select", "all") %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
Note down the new classes added.
Jquery code
$(document).ready(function() {
#copying the tr
$("#blue_right_arrow").click(function() {
$("input.current_location").each(function(i, el) {
if($(el).is(":checked")) {
$("table#selected_units tbody").append($(el).parent().parent().html());
$(el).remove()
}
});
});
});