Member Avatar for farashh

Hi
I am trying to repeat <div> several times
because I have a table and the design of each "2" rows is repeated.
Is this possible? or there is another way?

the scribt I am using is:

<table class="style1" dir="ltr" >
            <script type = "text/javascript">

                var rows = 10; // the value will be taken from DB later
                for (var i = 0; i < rows; i++) {//
                    document.write('<div class= \"msgDiv\">');
                    document.write('<tr><td>Patient\sUserName</td><td> X </td></tr> '+
                     '<tr><td> System\'sResult</td><td>'+ i +'</td></tr>');
                     document.write('</div>');//something isn't working well><
                }
               </script> 
        </table>

the problem is that the <div> is repeated 10 times and the cells are created but each in separate location

Edited by kvprajapati because: Added [code] tags.
  • 4 Contributors
  • 5 Replies
  • 332 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by farashh

Dani AI

Generated

The root cause is invalid HTML: a TABLE accepts only table-related children (thead/tbody/tfoot/tr/colgroup/caption). Placing a non-table element like <div> between rows makes browsers repair the DOM, which is why the cells end up in unexpected locations. Using document.write inside a table is brittle as well — it can break the parser or overwrite the document if run at the wrong time.

Two clean fixes:

  • Keep the table semantics and generate only table nodes. Group the repeated two-row block in a <tbody class="group"> (or give each <tr> a class) and append real <tr>/<td> elements via DOM methods or render them server-side. This preserves accessibility, layout and allows styling of each group.
  • Drop the table for visual layout and use block markup + CSS (Flexbox or Grid). In that case inline-block (the idea from ) or flexbox will reliably put the two columns side-by-side.

Example (DOM approach that avoids document.write and mixed markup):

var table = document.getElementById('myTable'); // <table id="myTable">
for (var i = 0; i < rows; i++) {
  var group = document.createElement('tbody');
  group.className = 'msgGroup';

  var r1 = document.createElement('tr');
  var a = document.createElement('td'); a.textContent = "Patient's UserName";
  var b = document.createElement('td'); b.textContent = 'X';
  r1.appendChild(a); r1.appendChild(b);

  var r2 = document.createElement('tr');
  var c = document.createElement('td'); c.textContent = "System'sResult";
  var d = document.createElement('td'); d.textContent = i;
  r2.appendChild(c); r2.appendChild(d);

  group.appendChild(r1);
  group.appendChild(r2);
  table.appendChild(group);
}

Notes: was correct about proper row nesting; 's tbody idea was along the right lines but mixing <div> with <tr> is the cause of the problem; ' alignment tip applies when using div-based layouts. For DB-driven output, server-side rendering or cloning a <template> client-side is simpler and more robust than document.write or innerHTML that mixes table/non-table tags.

Recommended Answers

All 5 Replies

Member Avatar for hericles

This is probably because div is a block element, it doesn't want to aline things side by side. Add display: inline-block to your css for the divs and they should start to line up properly.

Member Avatar for kvprajapati

Try this,

<script type="text/javascript">
   window.onload=function()
   {
      var tab1=document.getElementById("tab1");

      for(i=1;i<=10;i++)
       {
         var bdy=document.createElement("tbody");
         
         bdy.innerHTML="<div><tr><td>Patients's UserName</td><td> X 

</td></tr><tr><td>System'sResult</td><td>"+ i +"</td></tr></div>"; 
         tab1.appendChild(bdy);

       }
   };
</script>

<body>
   <table id="tab1" border="1"></table>
</body>
Member Avatar for Sarama2030

I think the problem is that you're using <tr><td> without nestinfg them in a table. I think rows and collumns should only be used in tables.try

<table><tr><td></td></tr></table>

see if it works.The alternate could be to nest multiple <div>s inside one main <div> and then positioning them in css.

Member Avatar for hericles

Sarama2030, there is quite clearly a <table> element at the start and a </table> element at the end. The OP is using document.write to insert the code between those two tags

Member Avatar for farashh

thanx to all,
but still it seems it does not work
"adatapost" what you did showed the table
"but what i did in css is completly ignored in google chrome and believe me you do not want to see the result in IE9"

I am thinking to change the table idea and us 2 <p> instead. i hope it will work

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.