Populating HTML Table Data without Repetition

Question

How can I populate multiple tables without copy and pasting code. For instance loop through an array and assign

<p>AMD</p>

without copy and pasting the code below. Maybe looping and incrementing an id written in javascript. I just dont know how to go about it.

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div class="chat-message-content clearfix"  onclick=alert("test")>

                    <span class="chat-time"></span>

                    <h5></h5>

                    <p>AMD</p>

                </div> <!-- end chat-message-content -->

I tried this im still working on it not fully understanding yet.

<div  class="chat">

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div id="company" class="chat-message-content clearfix"  onclick=alert("hush")>

                    <span class="chat-time"></span>

                    <h5></h5>

                    <p >DCTH</p>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <script>

                for (i = 0; i < 10; i++) {
                    document.getElementById("company").innerHTML+= "<p>TEST</p>"
                }



            </script>

https://stackoverflow.com/a/13495046/2545197 this is what you need to do. use javascript to loop through it and insert new elements — Abhinay, Feb 06 '18 at 05:30
your items can go inside a `div`. something like `

` and then through script you should insert your items in a `
` tag..something like: `document.getElementById("company").innerHTML+= "
AMD
"`. see if that works. — Abhinay, Feb 06 '18 at 05:41

score 0 · Answer 1 · answered Feb 06 '18 at 06:01

0

your items can go inside a div and then through script you should insert your items in a <p> tag. added a sample script below:

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div class="chat-message-content clearfix"  onclick=alert("hush")>

                    <span class="chat-time"></span>

                    <h5></h5>
                    <div id="company"></div>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <script>
                var company = ["AMD", "APPLE"];
                company.forEach(function(i) {
                document.getElementById("company").innerHTML+= "<p>" + i + "</p>";
                });
            </script>

answered Feb 06 '18 at 06:01

Abhinay

1,796
4
28
52

it populating them in the same cell – husharoonie Feb 06 '18 at 06:02
@husharoonie do you want this section (`class="chat-message-content"`) to be populated multiple times? – Abhinay Feb 06 '18 at 06:04
Where the div starts it creats another cell in my table as shown in the picture above. I want it to look exactly like the picture but without copy and paste – husharoonie Feb 06 '18 at 06:05
essentially putting a for loop around the entire code where the div starts and ends if that makes sense. – husharoonie Feb 06 '18 at 06:08
Yes what you need to figure out first is what are the common parts which needs no repetition. its just a matter of inserting dynamic parts using same code snippet. – Abhinay Feb 06 '18 at 06:11

Populating HTML Table Data without Repetition

1 Answers1