CODEWITHSUNDEEP
javascripthtml
ambonjingness
ambonjingness

Reputation: 95

Adding <TR> to a <TABLE> with .appendChild

Everytime I try to enter a new cell to the table it doesn't add the text in the bowlersName value. Is there something wrong with my Javascript code? It says "undefined".

function addBowler() {
  var newBowler = document.getElementsByName('bowlersName').value;
  var tr = document.createElement('tr');
  var td = tr.appendChild(document.createElement('td'));
  td.innerHTML = newBowler;
  document.getElementById("bowlerList").appendChild(tr);
}
<!-- HEADER 1 & 2 -->
<h1>Central Valley Lanes</h1>
<h2>2008 Bowling Teams</h2>
Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" onclick="addBowler()" />

<h2>Team Roster</h2>
<form action="FormProcessor.html" method="get">
  <table border="1" id="bowlerList">
    <tr>
      <td id="empty">Your team roster is empty</td>
    </tr>
  </table>
  <br />
  <input type="button" value="Submit Roster" />
</form>

Upvotes: 4

Views: 36377

Answers (3)

ttfreeman
ttfreeman

Reputation: 5533

 <table class="table table-striped" id="dashTable">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody id="task-row">    
            </tbody>
        </table>

Now you can insert your rows using literal strings:

            data.forEach((element, i) => {
                console.log(element, i)
                var t = document.getElementById("dashTable");
                var r = document.createElement("TR");
                r.innerHTML = `
                                             <tr>
                                                <th scope="row">${i + 1}</th>
                                                <td>${element.text}</td>
                                                <td>${element.createdAt}</td>
                                                <td>${element.completed}</td>
                                            </tr>
                                    `
                t.tBodies[0].appendChild(r)

Upvotes: 1

Hugo Marisco
Hugo Marisco

Reputation: 113

Try to change this line:

td.innerHTML = (" + bowlersName + ");

To this:

td.innerHTML = `(${bowlersName})`

Upvotes: 6

Arun P Johny
Arun P Johny

Reputation: 388316

There are two problems

  1. There is no variable named bowlersName, it should be newBowler
  2. Your string concatenation is wrong, (" + bowlersName + ") should be newBowler

Demo: Fiddle

function addBowler() { 
    var table = document.getElementById("bowlerList");
    var emptyRow = document.getElementById("empty");
    if(emptyRow){
        emptyRow.parentNode.removeChild(emptyRow)
    }

    var newBowler = document.getElementsByName('bowlersName')[0].value;
    var tr = document.createElement('tr');
    var td = tr.appendChild(document.createElement('td'));
    td.innerHTML = newBowler;
    table.appendChild(tr);
}

Upvotes: 4

Related Questions