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>

• Mathyn: Please also share your HTML.
• Andrew L: 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.
• Despo: could you show how?

Answer 1

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>

• Despo: 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: 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: stackoverflow.com/questions/54459505/…
• Despo: Could you please show how can i do this in my case?

Answer 2

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

• Despo: Thanks. Now i need make a new function and add this? Or only edit my function?
• Richard: @Despo new function: only makes sense in the context of your program. But lots of short functions is almost always a better choice.