<table class="pt-5">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<% cart.forEach(function(item) { %>
<tr>
<td>
<div class="product-info">
<img src="images/<%= item.image %>">
<div>
<p><%= item.name %></p>
<% if(item.sales_price){ %>
<small><span>$</span><%= item.sales_price %></small>
<% } else { %>
<small><span>$</span><%= item.price %></small>
<% } %>
Error
TypeError: /Users/netra/Desktop/project/views/pages/cart.ejs:174
172| </tr>
173|
>> 174| <% cart.forEach(function(item) { %>
175|
176|
177|
I tried putting => but it also did not work.
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 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>
I want to make each row editable in table. For this I place rows with text_fields in each bellow the row with table data.
<style>
.dtr{
display:none;
}
</style>
<body>
<div class="container" align="center">
<h1>Products Description</h1>
</div>
<br />
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<% #csv_table.each do |row| %>
<tr class="mtr">
<% row.each do |key, value| %>
<%unless key == "id"%>
<td class="value"><%= value %></td>
<%end%>
<% end %>
<td>
<div class="edit">
<%=link_to "Edit",class: 'form-control' %>
</div>
<div class="delete">
<%=link_to "Delete",class: 'form-control' %>
</div>
</td>
</tr>
<tr class="dtr">
<td>
<%= text_field_tag :login_aei2, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei3, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei4, "", class: 'form-control' %>
</td>
<td>
<%=link_to "Save", remote: true, class: 'form-control' %>
</td>
</tr>
<%end%>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$(".edit").click(function(){
debugger;
var mtr = this.closest(".mtr");
mtr.style.display = "none";
mtr.nextElementSibling.style.display="inline";
// this.parentElement.parentElement.style.display='none';
event.preventDefault();
});
});
</script>
When I click on edit button current row become hidden and the row with input field get shown but the problem is, it shows only in area of table data not in whole row. please help. Thanks in advance
So when the user click on "edit", its necessary to know exactly what Info has been clicked, in order to update to the database, and in order to show and hide the infos.
The changes that I've made is based on a demo-data that I've created to develop this solution:
#csv_table = [ {id:3, product: "Product", description: "Description",
brand:"Brand", action: "Action" }, {id:4, product: "Product2",
description: "Description2", brand:"Brand2", action: "Action2" }]
This is so called "Array of Hashes", and I thought that was what you were using too.
In the complete code, as we iterate throught the array, we can see two values that are name, and value. I used "value" instead of id, because I didnt want to cause a html conflict. So you can see in the code this:
<% value = row[:id] %>
And this
<% name = key[0] %>
Then each row has the field, and has the info (but one of them is hidden), like so:
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
Can you notice that the id it has name and value? In that way we can tell JQuery to look for the field we have clicked. For example info_product1, and field_product1, and set it to hide(); or show();. Below is the complete code, these are mostly javascript and html tricks, so you can try to play around a little bit:
Ruby + Html:
<style>
.dtr{
display:none;
}
</style>
<div class="container" align="center">
<h1>Products Description</h1>
</div><br />
<table class="table table-striped" border=2 style="border: 2px solid;">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
<th></th>
</tr>
</thead>
<tbody>
<% #csv_table.each_with_index do |row, i|%>
<% value = row[:id] %>
<tr class="mtr">
<% row.each_with_index do |key, j| %>
<% name = key[0] %>
<% unless j==0 %>
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
<% end %>
<% end %>
<td>
<%= link_to "Save", {}, remote: true, class: 'form-control save', 'value' => value %>
<div class="delete"><%=link_to "Delete",class: 'form-control'%></div>
</td>
</tr>
<% end %>
</tbody>
</table>
</body>
Javascript:
$(document).ready(function(){
$(".field").hide();
});
$(".info").click(function(event){
console.log("info");
name = $(this).attr("name");
id = $(this).attr("value");
console.log($(this).attr("value"));
$("#info_" + name + id).hide();
$("#field_" + name + id).show();
});
$(".save").click(function(event){
event.preventDefault();
// { .. if saves}
console.log("salvar");
id = $(this).attr("value");
$(".field_dtr" + id).hide();
$(".info_dtr" + id).show();
});
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>