Question

我尝试使用JavaScript在表格中添加元素。

我尝试使用innerHTML作为：

＆＃13;

cell6.innerHTML = '<input id="Holland" onclick="Ja()" type="submit" value="Wijzig">';

＆＃13;

问题是，当我这样做时，所有按钮都是相同的并具有相同的ID。我希望每个按钮都有不同的ID。它应该是这样的：

＆＃13;

cell6.innerHTML = '<input id="+ object.capital+ " onclick="Ja()" type="submit" value="Wijzig">';

＆＃13;

我还试图在其中创建一个带有createElement的变量：

输出如下：

[object HTMLInputElement]在行中而不是按钮。

JavaScript函数如下：

＆＃13;

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

＆＃13;

HTML code：

＆＃13;

    <!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>

＆＃13;

知道如何解决这个问题吗？提前谢谢。

Answer 1

你正在删除一些引号：

cell6.innerHTML = '<input id="' + object.capital + '" onclick="Ja()" type="submit" value="Wijzig">';

这很有效。

Answer 2

这里我在单元格中插入一个收音机，但你可以添加你想要的内容

var cell = tr.insertCell();
var radio = document.createElement("input");
radio.setAttribute("type", "radio");
cell.appendChild(radio);

在Javascript中的表格单元格中插入元素

2 个答案: