CODEWITHSUNDEEP
javascripthtml
Despo
Despo

Reputation: 85

Adding html to javascript

I'm newbie in javascript and i have problem with adding new row in javascript.

I want to, the new index, part, pieces and weight go to new row (next td) and i can't do it. Please a help.

function addTodosToPage() {
  var tr = document.getElementById("todoList");
  for (var i = 0; i < todos.length; i++) {
    var todoItem = todos[i];
    var td = document.createElement("td");
    td.innerHTML = "Index: " + todoItem.index + '</td>' + "part: " + todoItem.part + ", pieces: " + todoItem.pieces + ", weight: " + todoItem.weight;
    tr.appendChild(td);
  }
}
<table id="todoList">
</table>

<form>
  <fieldset>
    <div class="tableContainer">
      <label for="index">
        <select id="index" name="index"> 
          <option hidden="" >Index</option> 
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </label>
      <input placeholder="part" id="part" />
      <input placeholder="pieces" id="pieces" />
      <input placeholder="weight" id="weight" />
      <input type="button" id="submit" value="ADD">
    </div>
  </fieldset>
</form>

Upvotes: 0

Views: 160

Answers (2)

jsadev.net
jsadev.net

Reputation: 2590

there are some issues in your Code:

  1. the table has no head and no body
  2. in your function you are facing an array that does'nt exists
  3. you are not getting the Input.values

[…]

I think you should take a look at https://www.codecademy.com/ (its for free)

Here is a working example:

function addTodosToPage() {
  var table = document.getElementById("todoList");
  var tr = document.createElement("tr");
  var index = document.getElementById('index').value;
  var part = document.getElementById('part').value;
  var pieces = document.getElementById('pieces').value;
  var weight = document.getElementById('weight').value;
  tr.innerHTML = "<td>" + index + "</td><td>" + part + "</td><td>" + pieces + "</td><td>" + weight + "<td>";
  table.appendChild(tr);
}
<table>
  <thead>
    <tr>
      <th>Index</th>
      <th>Part</th>
      <th>Pieces</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody id="todoList">
  </tbody>
</table>

<form>
  <fieldset>
    <div class="tableContainer">
      <label for="index">
        <select id="index" name="index"> 
          <option hidden="" >Index</option> 
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </label>
      <input placeholder="part" id="part" />
      <input placeholder="pieces" id="pieces" />
      <input placeholder="weight" id="weight" />
      <input type="button" id="submit" value="ADD" onclick="addTodosToPage()">
    </div>
  </fieldset>
</form>

Upvotes: 1

Richard
Richard

Reputation: 109180

You need to create new table row (<tr>) elements as well.

Assuming t is a reference to the table (and you've avoiding being pedantic with a <tbody> element) and you just have one column:

for (var i = 0; i < data.length; ++i) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  td.textContent = data[i].text;
  tr.appendChild(td);
  t.appendChild(tr);
}

Upvotes: 1

Related Questions