CODEWITHSUNDEEP
javascripthtmldynamichtml-tablerow
Mac-Gon
Mac-Gon

Reputation: 240

Adding rows to multiple tables dynamically on one web page using Javascript

This one is probably my lack of experience with html5, but I have some code that works great for adding rows dynamically to a table using Javascript and the TBODY tag node, but when I have more than one table (which I do) on the page that I need to fill dynamically as data is entered....it doesn't work...

My issue is I can't figure out how to refer to the section I want to add the information too.

I tried creating a node with a specific tag, but it's not a recognized tag, so it added the data but not inside the table...oddly.

Here's the Javascript code I'm using

document.getElementById("sendNoteToDispatch").onclick=function()
    {
        event.preventDefault();
        console.log("Made it to note entry.");
        var noteTxt = $('#noteEntry').val();
        var noteEntBy = 'BGM';
        var nowNote = Date();
        var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
        if (!document.getElementsByTagName) return;
        tabBody=document.getElementsByTagName("TBODY").item(0);
        row=document.createElement("TR");
        cell1=document.createElement("TD");
        cell2=document.createElement("TD");
        cell3=document.createElement("TD");
        textnode1=document.createTextNode(noteEntDate);
        textnode2=document.createTextNode(noteEntBy);
        textnode3=document.createTextNode(noteTxt);
        cell1.appendChild(textnode1);
        cell2.appendChild(textnode2);
        cell3.appendChild(textnode3);
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        tabBody.appendChild(row);
        document.getElementById("noteEntry").value = '';
        document.getElementById("noteEntry").focus();
       }

});

Here's the html code it works with. 

<div id="Notes" class='acceptEnterNotes'>
            <form>
                <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" />
                <button type="submit" id="sendNoteToDispatch" class="noteEntryButton buttonAddNote" value="Submit">
                    Submit Note
                </button>
            </form>
            <br />
            <br />
            <div id="filterNotesGriddiv">
                <input type="text" name="filterNotesGrid" id="filterNotesGrid" class="tableFilterInput" size="75" placeholder="Search the Table Below..." />
            </div>
            <div id="notesEntered">
                <table id="notesEnteredGrid" class="lowerSectionTable">
                    <tbody>
                        <tr class="enteredNotesHeader">
                            <td class="tableHeaderCells cellDateEntered">Date Entered</td><td class="tableHeaderCells cellEnteredBy">Entered by</td><td class="tableHeaderCells cellNoteEntered">Note</td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>

I tried changing the tbody tag, to something like tbodyNotes, but that didn't work, then I tried adding an ID to tbody node, but that didn't work either...so anything that can help, so that I can add another section with a different table... would be awesome.

Upvotes: 0

Views: 4634

Answers (1)

Damon Smith
Damon Smith

Reputation: 1790

So at the moment you're getting the first TBODY tag in the page with:

tabBody=document.getElementsByTagName("TBODY").item(0);

then building a row of cells, then inserting that row into the tbody with:

tabBody.appendChild(row);

If you put another table into your page with a TBODY inside it, you can get the second table's TBODY tag with:

tabBody2=document.getElementsByTagName("TBODY").item(1);

In general though you seem to be using a lot of guesswork and (probably) cut-and-pasted code. When you say you tried IDs and they didn't work, that's a bit ridiculous. IDs on elements work fine, even TBODY tags. If in doubt, try calling them first from the firebug or chromebug console and get your line of code to get the TBODY tag working there first, then put it into your code. Try this: put two tables with tbody into your html page. Give the tbody tags ids, like "tbody1" and "tbody2", then open up your firebug console and type: document.getElementById("tbody1") hover over the result to see the element in the page highlighted. Then try the same with tbody2.

And finally, none of this is HTML5, it's just plain old boring HTML and Javascript. You can look at the DOM API level 2, HTML4 spec and Javascript reference on mozilla dev to find out more about any of those commands.

Upvotes: 2

Related Questions