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!)
Related
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";
}
}
}
Im trying to render a table, my variable was extracted from mongodb. This is my attempt in index.ejs
what have I done wrong here?
<table>
<tr>
<th>HomeTeam</th>
</tr>
<% for (var i = 0; i < result.length; i++) { %>
<tr>
<td><%= result[i].hteam %> </td>
</tr>
<% }); %>
</table>
In the console I get syntax error.
Any help to compile this would be much helpful as it has taken me several weeks to reach this point in my project :)
frederik
You have unnecessary bracket in closing for.
I think it should be:
<table>
<tr>
<th>HomeTeam</th>
</tr>
<% for (var i = 0; i < result.length; i++) { %>
<tr>
<td><%= result[i].hteam %> </td>
</tr>
<% }; %>
</table>
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
This may seem like a duplicate. But it isn't.
This is my code:
<script language="JavaScript">
function popupwin(qid)
{
var myWindow = window.open("", "", "width=800, height=600");
myWindow.document.write("<p> Qid = "+qid);
}
</script>
.......
<%
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
con = DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:xe","system","Shravya17");
ps=con.prepareStatement("select * from questions where category = ?");
ps.setString(1,cat);
rs=ps.executeQuery();
while(rs.next()){
qid = rs.getInt(1);
ques = rs.getString(2);
cat = rs.getString(3);
a = rs.getString(4);
b = rs.getString(5);
c = rs.getString(6);
d = rs.getString(7);
ca = rs.getString(8);
%>
<tr align = "center">
<td> <%= qid %> </td>
<td> <%= ques %> </td>
<td> <%= cat %> </td>
<td> <%= a %> </td>
<td> <%= b %> </td>
<td> <%= c %> </td>
<td> <%= d %> </td>
<td> <%= ca %> </td>
<td>
<input type="submit" value="Edit" onclick=(popupwin(<%=qid%>));/>
</td>
</tr>
<%
}
This works fine.
But how do I pass more than one parameter in the function call?
I tried passing parameters separated by commas but it didn't work.
Please help!
there is no reason it shouldn't work, I suspect you had a syntax error. try the following.
<td>
<input type="submit" value="Edit" onclick="(popupwin(<%=qid%>, 'test'))" />
</td>
function popupwin(qid, testVal) {
console.log(testVal); // you should see 'test' in your browser's console
}
I need to create a grid that seperate the parent and child rows. What I am doing here, just iterate the array list and fetch out the objects. Again in the last position of object I have an arraylist that I need to iterate for the child rows. so please guide me how I do this in my jsp.
e.g.
<TH1> <TH2> <TH3>
<TRP1-1> <TRP1-2> <TRP1-3>
<TRC1-1> <TRC1-2> <TRC1-3>
<TRC2-1> <TRC2-2> <TRC2-3>
<TRP2-1> <TRP2-2> <TRP2-3>
<TRC2-1> <TRC1-2> <TRC1-3>
<TRC2-1> <TRC2-2> <TRC2-3>
Above example is the format of the table. where TH is the heading of the table
TRP is the parent row and TRC is the child row.
<%
for(int iCtr=0;iCtr<arryListObj.size();iCtr++)
{
Object[] objVal=(Object[])arryListObj.get(iCtr);
ArrayList arryListV=(ArrayList)=objVal[12];
%>
<tr>
<td ><%= String.valueOf(objVal[0])%></td>
<td ><%= String.valueOf(objVal[0])%></td>
<td ><%= String.valueOf(objVal[0])%></td>
</tr>
<% for(int iVal=0;iVal<arryListV.size();iVal++)
{
Object[] objChildVal=(Object[])arryListV.get(iVal);
%>
<tr>
<td ><%= String.valueOf(objChildVal[0])%></td>
<td ><%= String.valueOf(objChildVal[0])%></td>
<td ><%= String.valueOf(objChildVal[0])%></td>
</tr>
<%
}
}
%>