如何将选择链接到我的桌头？

Question

I want to know how can I link my tableheads with a select ?

Here is a screen of how it looks

I just want to add a town in a column I've chosen before.

Here is my code :

 function addRow() { var table = document.getElementById("table"); var row= table.insertRow(-1); var column1 = row.insertCell(0); column1.innerHTML += document.getElementById("ville").value; }

 <h2>Test</h2> <form method="post" action=""> <select id="select"> <option selected disabled>Choose one</option> <option>Option A</option> <option>Option B</option> <option>Option C</option> <option>Option D</option> <option>Option E</option> </select> <input type="text" name="ville" id="ville" /> <input type="button" onclick="addRow();" value="Save"/> </form> <table id="table" style="margin: 30px; border-spacing: 20px;"> <thead> <tr> <th>Option A</th> <th>Option B</th> <th>Option C</th> <th>Option D</th> </tr> </thead> <tbody> <tr> <td>TEST</td> </tr> </tbody> </table>

Answer 1

You need to have the select list provide you with the column number the new text needs to go in. Something like:

 function addRow() { var table = document.getElementById("table"); var row = table.insertRow(-1); var columnpicked = document.getElementById("select").value; for (let i = 0; i <= columnpicked; i++) { row.insertCell(0); } row.cells[columnpicked].innerHTML += document.getElementById("ville").value; }

 <h2>Test</h2> <select id="select"> <option selected disabled>Choose one</option> <option value=0>Option A</option> <option value=1>Option B</option> <option value=2>Option C</option> <option value=3>Option D</option> <option value=4>Option E</option> </select> <input type="text" name="ville" id="ville" /> <input type="button" onclick="addRow();" value="Save"/> <table id="table" style="margin: 30px; border-spacing: 20px;"> <thead> <tr> <th>Option A</th> <th>Option B</th> <th>Option C</th> <th>Option D</th> <th>Option E</th> </tr> </thead> <tbody> <tr> <td>TEST</td> </tr> </tbody> </table>

Note that you only had four columns in your example - so, I've added an Option E column to match the select list items.

Answer 2

I will leave the other answer there in case we need to go back to it. From your comments, I think you need to do something like:

 function addRow() { // Get the tbody element - NOTE: an id has been added to that to make it easier to find var table = document.getElementById("tablerows"); // Get the rows in the tbody element var rows = table.getElementsByTagName("tr"); // If there are no rows, create one if (rows.length == 0) { tbody.insertRow(); } // Get the first row var row = rows[0]; // Get the column selected by the user var selected = document.getElementById("select").value; // Check if the row has enough td items to put the text into the selected column if (row.cells.length - 1 < selected) { // If it hasn't, create them for (let i = 0; i < selected; i++) { let td = document.createElement("td"); row.appendChild(td); } } // Get the text to be inserted var ville = document.getElementById("ville"); // Insert the text in the selected column row.cells[selected].innerHTML = ville.value; }

 <h2>Test</h2> <select id="select"> <option selected disabled>Choose one</option> <option value=0>Option A</option> <option value=1>Option B</option> <option value=2>Option C</option> <option value=3>Option D</option> <option value=4>Option E</option> </select> <input type="text" name="ville" id="ville" /> <input type="button" onclick="addRow();" value="Save"/> <table id="table" style="margin: 30px; border-spacing: 20px;"> <thead> <tr> <th>Option A</th> <th>Option B</th> <th>Option C</th> <th>Option D</th> <th>Option E</th> </tr> </thead> <tbody id="tablerows"> <tr> <td>TEST</td> </tr> </tbody> </table>

I have added an id to the tbody tag as the header row is seen as part of the table's rows collection. Doing this means that we can target only the rows on the tbody.

---

OK - assuming we are ok for the users to enter text directly in a cell, try:

 function addRow() { var t = document.getElementById("datarows"); var rtemplate = document.getElementById("newrow"); var r = rtemplate.content.cloneNode(true); t.appendChild(r); }

 table {border-collapse:collapse;} td {height:23px; background-color:white; border:1px solid black; padding:5px; width:100px; vertical-align:top;} th {border:1px solid black; padding:5px; width:100px;} td:focus {background-color:lightgreen;}

 <b>Click on a table cell to add/edit text</b><br>or click to add a new row <button id="newrowbutton" onclick="addRow();">Add new row</button> <hr> <table> <thead id="headerrow"> <tr> <th>Option A</th> <th>Option B</th> <th>Option C</th> <th>Option D</th> <th>Option E</th> </tr> </thead> <tbody id="datarows"> <tr> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> </tr> </tbody> </table> <template id="newrow"> <tr> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> </tr> </template>