Table rows not showing on own lines

JavaScript
1

I am using TaffyDB to collect data and display as table rows. But the table rows don’t show as rows underneath one another. The text content of the rows start immediately after the previous text. How do I make the tr rows one under the other?

This is the output div:

// construct and target the output19701979 innerHTML div id
    var output = document.getElementById('output19701979');

The opening table info is here:

// will write the innerHTML to here . appears once at top:|

output.innerHTML="<br>To view details of a vehicle, scroll down and click on the year of the vehicle. <table>;|"

Then the repeating info is printed:

// REPEATING ELEMENTS -- part listing of rows
 db({filter1:show2}).each(function (name2){ // 'show2' and filter1: "19701979" "name2" is an alias
    var yearHistory  = name2.yearHistory; // like 1970
    var partNo       = name2.partNo; // part no in listing row
    var partName     = name2.partName; // part name in listing row
		
		output.innerHTML+="<tr><td>" + yearHistory + " | " + partNo + " | <strong>" + partName + "</strong></td></tr>";
    });

Then the closing table tag:

		output.innerHTML+="</table>";
	
 } // must encompass above code.
2

I miss some quotes around the string or?

3

The quotes are around the string. They did not transfer on copy/paste.
I fixed it in the OP.

Also wondering why the < strong > tags don’t affect the type. (Actually, they work in Chrome and not Firefox.)

4

What is the webdeveloper window showing? How is the DOM looking like?
I cannot see an error in the code.
The semicolon after the table makes no sense but this shouldn’t kill the whole table structure.
You can add a console.log in the loop to show what you are adding to the html.

Firefox has an implementation note on the strong tag. I didn’t searched for it.
At the end I never understood the use case of strong as it does the same as the b tag and is much longer,

5

In Chrome, Elements, the table is closed immediately:
<table></table>
then all the rest display after that. That’s why it’s not displaying as a table! Don’t know how to stop browser from “fixing” it.

Thanks about the b, now it shows in FF as well.

The semi-colon after table is merely closing the innerHTML code.

6

I don’t know TaffyDB, but is it working asynchronously?

So output.innerHTML+="</table>"; is performed synchronously before the each method has chance to run.

7

TaffyDB is composed of JS objects, and they run top to bottom. Sample:

 function getData(){
 	"use strict";
 var db = TAFFY([
 {
 filter1: "19701979",
 yearHistory: 1970, 
 heading:"year1970",
 partNo:"4945751",
 partName:"part name goes here",
 imageFilename:"file name goes here", 
 imageCaption:"caption goes here",
 imageThumb:"blank"
 },

In our case, only filter1: “19701979”, will display. Others say filter1: “”, and those won’t show.

1 Like
8

Doing it this way with table tags around makes every row a table of its own. Not neat, but it will work well enough:

output.innerHTML+="<table><tr><td>" + yearHistory + " <b>&nbsp;&nbsp;" + partNo + "&nbsp;&nbsp;</b> " + partName + "</b></td></tr></table>";

9

@WebSteve

So just having a play with taffydb using example data from their website

Sample data

const friends = TAFFY([
  {"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
  {"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
  {"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
  {"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}	
]);

I’ve created a function which returns a template string containing the table html.

// taffydb's filtered result provides a 'map' method as well as 'each'
const createTable = (friends) => (`
  <table>
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
      ${
        friends.map(({ first, last, city }) => {
          return `<tr><td>${first} ${last}</td><td>${city}</td></tr>`
        }).join('\n')                         
      }
    </tbody>
  </table>
`)

And calling createTable

const femaleFriends = createTable(friends({gender: 'F'}))
document.querySelector('#users').innerHTML = femaleFriends

Note: I’m also thinking you could just create a table in your html, and append the table data to the tbody, rather than creating a whole table.

Here is a codepen

This is new to me — (that I can recall). I hope this is helpful.

10

This is very nice! Thanks for helping.

However, clicking on any of 5 buttons on a page will scour the TaffyDB and return 5 different tables of results. I don’t know how to arrange your code for that.

However, the code I have is working and sufficient.

Now I’m working on a different headache.

1 Like
11

To be honest, it is never a good idea to life with workarounds like you do in programming. Sentences like „Don‘t know why, but it works so it’s good“ will lead you into big big trouble when your project grows.

Change your mind setting and start to try to understand everything in detail you have written before you go onto new features.

Just a well intended advice from someone who is developing for over 40 years now and has developed many applications used by thousands of people all over the world.

3 Likes
12

The broken window theory comes to mind.

1 Like
13

The strong tag is used when that section of text is more important than the rest of the line. Semantically it means importance.

The b tag on the other hand has no real semantics applied to it and does not signify importance. It just makes the text bold so it stands out but doesn’t mean it’s more important than anything else on that line.

Whether you use strong or b will therefore depend on the semantics of the text concerned. For a purely visual effect then a b element is fine but to add importance to a phrase then strong should be used.

14

This is only a question of definition. Why should I make something bold if it has no more importance to me?

For me strong tag is only another „we do because we can do it“ addition to HTML

15

Without wishing to go off topic but the question was asked:)

As I said above you may want to create some visual non semantic effect. I very often bold every even row in a table just because it makes it easier to scan. I do not want the html to imply that the bold rows are more important than the rest.

I don’t agree and I find the strong tag is a useful semantic html tag. In my mind semantic html comes first and should be understandable on its own merits. Without using semantic tags you lose that ability.

Theoretically screen readers and search engines will use semantic tags to understand the html. Whether or not that is true for all tags is still not a reason to avoid using the correct tag for the task in hand.

16

I appreciate what you are telling me, Thallius.

I am introducing something entirely new to the code and that’s where the problem lies. When there are no more problems, then it will be production-ready.

17

If I can recommend, the bold tag in hell has actual meaning that something is more important.

Because you are using bold for semantic reasons of presentation, to make the lines more scannable, there is a more appropriate way to do it by giving the lines odd and even classnames. That way you can apply a weight to the odd lines to make them bold, or adjust the background of them, or any other css techniques that you prefer to use.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.