Develop Reference

Table filter in html with Javascript does not work

My table filter in html with Javascript does not work. I'm trying to filter a table generated from a ruby on rails query. I want to filter the table by the fields in the first column, I have a code that I tried with a simple table and it works fine, but using the same function in the ruby on rails html table does not work. I think tr [i] .style.display = "none";It does not work, but I'm not sure. When I run the filter, the table is recharged but remains the same.
<table id = "myTable" class="table table-hover table-bordered">
<thead>
<tr align="justify-center">
<th>Pais</th>
<th>Jugador</th>
<th>Partido</th>
<th>Minuto</th>
<th>Tarjeta</th>
</tr>
</thead>
<tbody>
<tr align = "center">
<td> Alemania </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% #tarjetasAmarilla.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%= tarjAm.player.apellido
%> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:yellow">
</span></td>
</tr>
<% end %>
<% #tarjetasRojas.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%=
tarjAm.player.apellido %> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:red">
</span></td>
</tr>
<% end %>
</tbody>
</table>
Javascript
function myFunction(id) {
var input, filter, table, tr, td, i, j, visible;
input = document.getElementById(id);
filter = input.id.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
visible = false;
td = tr[i].getElementsByTagName("td");
if (td[0] && td[0].innerHTML.toUpperCase().indexOf(filter) > -1) {
visible = true;
}else {
visible = false;
}
if (visible === true) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}

How to add the values of 2 cells in a forEach loop in an ejs file?

I have a table in an ejs file that loop through a collection(schema) and populate the information. i want to add the values of 2 cells(subQamount and subClaimsum) in that table and show it in another cell(the last one). Apparently i cant use a javascript function and get the element by id (it only get the element of first run). Is there any other way I can do this math?
Here is the table:
<% tracker.subcontractors.forEach(function(data){ %>
<tr>
<td class="button"><%= data.subName %></td>
<td class="button"><%= data.subContact %></td>
<td class="button"><%= data.subQno %></td>
<td class="button">$ <%= commaNumber(data.subQamount) %></td>
<td class="button">$ <%= commaNumber(data.subClaimsum) %></td>
<td class="button"><button style="font-size:13px; padding: 2px; margin-left: 20px;" class="btn btn-info">open</button></td>
<td class="button">$ </td>
</tr>

You just need to add these 2 :
<%= commaNumber(data.subQamount) + commaNumber(data.subClaimsum) %>

Create dynamic table - 3 Columns by N-rows?

I have a JS object that I'd like to iterate through, creating a three column, N-row, table.
I could have anywhere from 1 to N entries, but always want it a 3colxNrow table.
So far, I can get a single column, N row table:
<% for (var person in contacts){ %>
<div>
<table>
<tbody>
<tr>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
</tr>
</tbody>
</table>
</div>
<br>
<% } // for (var person in contacts) %>
I'm stuck on how to do this for rows. The above returns this. Note it's 7 rows all one column.
I know I need to somehow loop through and add three td within the tr, but can't quite get how.
...
<tbody>
<tr>
<% for (var person in contacts){ %>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% } // for (var person in contacts) %>
</tr>
</tbody>
...
This results in a single row, N columns wide. Do I need some logic, like for (var i = 1; i < 4; i++){ ??? } somewhere?

I thing, that for create some rows with 3 column, you can try insert for to before tr
rebuild your contacts arr:
let arrContacts = [];
let j = -1, i = 0;
for(let p in contacts ){
if(i%3===0){
arrContacts.push([]);
j++;
}
arrContacts[j].push(contacts[p]);
i++;
}
and use next template:
<tbody>
<% for (var i=0;i<arrContacts.length; i++){ contacts =arrContacts[i] ;%>
<tr>
<% for (var person in contacts){ %>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% } %>
</tr>
<% } %>
</tbody>

After writing a 3 column, 4 row HTML table manually, physically printing the HTML out and taking a pen to it...I think I got it!
<div>
<table>
<tbody>
<% var i = 1; %>
<% var numCols = 3; %>
<tr>
<% for (var person in contacts){ %>
<% console.log("Person: " + person);%>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% if (i%(numCols)===0 && i > 1){%>
</tr>
<tr>
<% } // (i%(numCols)===0 && i > 1) %>
<%i+=1;%>
<% } // for (var person in contacts) %>
</tr>
</tbody>
</table>
</div>
Yay! I think the trick was figuring out the conditional inclusion of <tr></tr> to end a row only when we hit our column limit.
(If someone comes across this and has any comments, improvements, warnings, please let me know!)

I want to display the values in Table td based on IF condtions

I want to print the values in table in such a way that.<br>
there are two <td> in the table. based on <if> condition <td> has to display the values.
And this should be in order, I mean no should have blank values,like
(if i==1) then 1st td will become blank and 2 td will get printed.
(if i==2) then 1st td will get display and 2 td will get blank.
Every who has the value should get print one after the another without blank.
<table>
<%
for(int i=0;i<=5;i++){ %>
<tr>
<% if((i==2) || (i==4){ %>
<td> only this 1st <td> get printed </td>
<% } else { %>
<td> only this 2nd <td> get printed </td>
<% }
}
%>

<table>
<%
for(int i=0;i<=5;i++){ %>
<tr>
<% if((i=2) || (i==4){ %>
<td> only this 1st <td> get printed </td>
<% } else { %>
<td> only this 2nd <td> get printed </td>
<% }
}
%>
Only your first td is getting printed because in your IF condition you are not comparing $i with value 2 instead you are assigning $i=2 so change the if(($i=2) || ($i==4)) to if(($i==2) || ($i==4)) and will work good.
Hope this will help you in your problem

How to call js for appropriate element

Can't how to deal with my problem: part of view are hidden, when page is loaded.
Here is this part:
<table>
<% #websites.each do |website| %>
<%if (current_user.id == website.user_id)%>
<tr>
<td> <%= link_to(image_tag("/images/caret-horizontal.png", id: "caret-horizontal"), '#') %> </td>
<td> <h4><%= website.name %></h4> </td>
</tr>
</table>
<table id="<%= website.id %>"> // or can be like this:
//I don't what variant is better
<table id="table-data" data-id="<%= website.id %>">>
<tr >
<td >
<%= website.url %>
</td>
</tr>
<tr>
<td >
<%= website.category %>
</td>
</tr>
<tr>
<td><%= website.language %></td>
</tr>
</table>
And I can get attributes in JavaScript like this(thanks to good people):
var yourWebsiteId = $("#table-data").attr("data-id");
How I can choose approriate element and show it? I should use getElementById or something like this, but I don't know exactly how to do it.
Please help me, if you can.

$("#table-data").show()
You can find information on this from here
$("#table-data") gets a reference to the part of the dom you are trying to access (# denotes id, . denotes class), once you have a reference you can then call any jquery operation you want on it