Onclick事件删除表中过去的输入字段

这是我的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="scripts/randomletter.js"></script>
<h2>NomiCoseCittàAnimali</h2>
</head>
<body>
<div>Clicca qui sotto per generare una lettera casuale</div>
<div><button onclick="ranlet()">🎲</button></div>
<div>
<table id="gametable">
<tr>
<th>Nomi</th>
<th>Cose</th>
<th>Città</th>
<th>Animali</th>
<th>Punteggio</th>
</tr>
</table>
</div>
<div><button onclick="gentable()">Click here to generate a new row</button></div>
</body>

</html>

这是我的JS

function ranlet() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var x = Math.ceil((Math.random() * 1000) % 25)
alert ("La lettera trovata è " +characters[x]);
}
function gentable() {
document.getElementById('gametable').innerHTML +=
"<tr>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="range" min=0 max=4 step=0.5></td>"+
"</tr>";
}

单击此处生成新行在表innerHTML中添加一个包含新元素的新行。每当我点击它时都会发生这种情况，问题是每次我点击它都会删除先前的输入字段，它会正确地创建新行，但会完全删除保存的任何值。

在执行gentable((时，有没有一种方法可以保留先例输入字段中的值而不删除它们？

以这种方式使用document.getElementById('gametable').innerHTML，将重置整个表的html，并在此过程中创建多个<tbody>标记(删除之前存在的标记(，但不是这样。

您应该做的是，每次按下按钮时，都会向表中添加一个新元素(行(。

此外，使用类似jQuery的东西，这种类型的DOM操作会容易得多。

function ranlet() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var x = Math.ceil((Math.random() * 1000) % 25)
alert ("La lettera trovata è " +characters[x]);

}
function gentable() {
document.getElementById('gametable').innerHTML +=
"<tr>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="range" min=0 max=4 step=0.5></td>"+
"</tr>";
}
function appendRow() {
const newRow = document.createElement('tr')
let td, input;

for(let i=0; i<4; i++){
td = document.createElement('td')
input = document.createElement('input')
input.setAttribute('type','text')
td.appendChild(input)
newRow.appendChild(td)
}


td = document.createElement('td')
input = document.createElement('input')
input.setAttribute('type','range')
input.setAttribute('min',0)
input.setAttribute('max',4)
input.setAttribute('step',0.5)
td.appendChild(input)
newRow.appendChild(td)

document.getElementById('gametable').appendChild(newRow);
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="scripts/randomletter.js"></script>
<h2>NomiCoseCittàAnimali</h2>
</head>
<body>
<div>Clicca qui sotto per generare una lettera casuale</div>
<div><button onclick="ranlet()">🎲</button></div>
<div>
<table id="gametable">
<tr>
<th>Nomi</th>
<th>Cose</th>
<th>Città</th>
<th>Animali</th>
<th>Punteggio</th>
</tr>
</table>
</div>
<div>

<button onclick="appendRow()">Click here to generate a new row</button>
</div>
</body>
</html>

当您使用代码document.getElementById('gametable').innerHTML时，它会导致DOM元素的内容被解析和重建，这就是导致您的输入丢失的原因。相反，您应该使用insertAdjacentHTML。

MDN:的描述

innerHTML

设置innerHTML的值将删除元素的所有子体，并用解析字符串htmlString中给定的HTML构建的节点替换它们。

insertAdjacentHTML

Element接口的insertAdjacentHTML((方法将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树的指定位置。它不会重新分析正在使用的元素，因此不会损坏该元素中的现有元素。

function ranlet() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var x = Math.ceil((Math.random() * 1000) % 25)
alert ("La lettera trovata è " +characters[x]);
}
function gentable() {
document.getElementById('gametable').insertAdjacentHTML('beforeend',( 
"<tr>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="text"></td>"+
"<td><input type="range" min=0 max=4 step=0.5></td>"+
"</tr>"                                         
));
}

<body>
<div>Clicca qui sotto per generare una lettera casuale</div>
<div><button onclick="ranlet()">🎲</button></div>
<div>
<table id="gametable">
<tr>
<th>Nomi</th>
<th>Cose</th>
<th>Città</th>
<th>Animali</th>
<th>Punteggio</th>
</tr>
</table>
</div>
<div><button onclick="gentable()">Click here to generate a new row</button></div>
</body>

相关内容

最新更新

热门标签：