Adding html to javascript

Question

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>

create a new row in the for loop too. Create a td for each piece of information. Append the tds to the tr and then append the tr to the tables body as the last step in the for loop. — Andrew L
– Andrew L, Commented Jan 30, 2019 at 13:54

jsadev.net · Accepted Answer · 2019-01-30 14:19:19Z

1

there are some issues in your Code:

the table has no head and no body
in your function you are facing an array that does'nt exists
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>

answered Jan 30, 2019 at 14:19

jsadev.net

2,6001 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Despo Over a year ago

Thank you very much. Maybe you know, becouse i need add delete button, that's how i write in this topic - stackoverflow.com/questions/54417713/…

Despo Over a year ago

I have one more question. How can i show table in another site? Example, all code is in index.html and i want show table and this items on another site. Copy and paste didn't word of course. I just ask about javascript.

jsadev.net Over a year ago

stackoverflow.com/questions/54459505/…

Despo Over a year ago

Could you please show how can i do this in my case?

Richard · Accepted Answer · 2019-01-30 13:56:20Z

1

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);
}

answered Jan 30, 2019 at 13:56

Richard

110k21 gold badges214 silver badges279 bronze badges

2 Comments

Despo Over a year ago

Thanks. Now i need make a new function and add this? Or only edit my function?

Richard Over a year ago

@Despo new function: only makes sense in the context of your program. But lots of short functions is almost always a better choice.

Collectives™ on Stack Overflow

Adding html to javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related