在Javascript的表格單元內插入元素
[英]Inserting an element inside a table cell in Javascript
問題描述
我正在嘗試使用JavaScript將元素添加到表中。
我試圖使用innerHTML做到這一點：
cell6.innerHTML = '<input id="Holland" onclick="Ja()" type="submit" value="Wijzig">';
問題是當我這樣做時，所有按鈕都將相同並且具有相同的ID。 我希望每個按鈕都有一個不同的ID。 應該是這樣的：
cell6.innerHTML = '<input id="+ object.capital+ " onclick="Ja()" type="submit" value="Wijzig">';
我也試着用createElement來創建一個變量：
輸出如下：
該行中的[object HTMLInputElement]而不是按鈕。
JavaScript函數如下所示：
function loadCountries() { fetch("restservices/countries") .then(response => response.json()) .then(function(myJson) { var tabel = document.getElementById("mijnTabel"); for (const object of myJson) { var rij = tabel.insertRow(1); rij.addEventListener("click", function() { showWeather(object.latitude, object.longitude, object.capital); }); var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "Click me"); x.setAttribute("id", object.capital); var cell1 = rij.insertCell(0); var cell2 = rij.insertCell(1); var cell3 = rij.insertCell(2); var cell4 = rij.insertCell(3); var cell5 = rij.insertCell(4); var cell6 = rij.insertCell(5); var cell7 = rij.insertCell(6); cell1.innerHTML = object.name; cell2.innerHTML = object.capital; cell3.innerHTML = object.region; cell4.innerHTML = object.surface; cell5.innerHTML = object.population; cell6.innerHTML = x; //cell6.innerHTML = '<input id="+ object.capital+ " onclick="Ja()" type="submit" value="Wijzig">'; //cell7.innerHTML = '<input id="verwijder" onclick="Nee()" type="submit" value="Verwijder">'; } }); }
HTML代碼：
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/l8p1.css"> <title>Les 8 Practicum 1</title> <body> <div id="frame"> <div id="myLocation"> <div id="titel1"> <h3>Mijn locatie</h3> </div> <label id="landcode" for="landcode">Landcode: </label><br> <label id="land" for="land">Land: </label><br> <label id="regio" for="regio">Regio: </label><br> <label id="stad" for="stad">Stad: </label><br> <label id="postcode" for="postcode">Postcode: </label><br> <label id="latitude" for="latitude">Latitude: </label><br> <label id="longitude" for="longitude">Longitude: </label><br> <label id="ip" for="ip">IP: </label> </div> <div id="weatherInfo"> <div id="titel2"></div> <label id="temperatuur" for="Temperatuur"></label><br> <label id="luchtvochtigheid" for="Luchtvochtigheid"></label><br> <label id="windsnelheid" for="Windsnelheid"></label><br> <label id="windrichting" for="Windrichting"></label><br> <label id="zonsopgang" for="Zonsopgang"></label><br> <label id="zonsondergang" for="Zonsondergang"></label> </div> <div id="countryList"> <div id="titel3"> <h3>Beschikbare vakantiebestemmingen</h3> </div> <div style="overflow-x:auto;"> <table id="mijnTabel"> <tr> <th>Land</th> <th>Hoofdstad</th> <th>Regio</th> <th>Oppervlakte</th> <th>Inwoners</th> <th>Wijzig</th> <th>Verwijder</th> </tr> </table> </div> </div> </div> <script src="javascript/les8_p1_functies.js"></script> </body> </html>
任何想法如何解決這個問題？ 提前致謝。
2 個解決方案
解決方案1
2 2018-05-16 14:55:24
您要刪除一些引號：
cell6.innerHTML = '<input id="' + object.capital + '" onclick="Ja()" type="submit" value="Wijzig">';
這可行。
解決方案2
0 2018-05-16 15:08:42
在這里，即時通訊在單元格中插入，但您可以添加所需的內容
var cell = tr.insertCell();
var radio = document.createElement("input");
radio.setAttribute("type", "radio");
cell.appendChild(radio);
Javascript - 表格內的按鈕 -> 插入 TextContent
[英]Javascript - button inside a table -> inserting TextContent
Javascript：如果已填充數組元素，則為數組的每個元素插入表行
[英]Javascript: Inserting table rows for each element of an array, if array element populated
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.