Este artigo descreve como o JS implementa adição dinâmica, exclusão e atualização de tabelas. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Operação da tabela </ititure>
<style type = "text/css">
corpo {
Size da fonte: 13px;
altura de linha: 25px;
}
mesa {
Top de borda: 1px Solid #333;
fundo de borda: 1px Solid #333;
Largura: 300px;
}
TD {
Fronteira: 1px Solid #333;
fundo de borda: 1px Solid #333;
}
.título {
Alinhamento de texto: centro;
Peso da fonte: negrito;
Antecedentes: #ccc;
}
.center {
Alinhamento de texto: centro;
}
#displayinfo {
Cor: vermelho;
}
</style>
<script type = "text/javascript">
função addRow () {// Adicione uma linha
var tableObj = document.getElementById ('myTable');
var rownums = tabelaobj.rows.length;
var newrow = tabelaobj.insertrow (rownums);
var col1 = newrow.insertCell (0);
col1.innerhtml = "A felicidade cai do céu";
var col2 = newrow.insertCell (1);
col2.innerhtml = "$ 18,5";
col2.align = "centro";
var divinfo = document.getElementById ('DisplayInfo');
divinfo.innerhtml = "Adicione o produto com sucesso";
}
função delrow () {// exclua a segunda linha
document.getElementById ('myTable'). Deleterow (1);
var divinfo = document.getElementById ('DisplayInfo');
divinfo.innerhtml = "Exclua o produto com sucesso";
}
função updaterow () {// Atualizar informações da linha
var urow = document.getElementById ('myTable'). linhas [0];
urow.className = "title";
}
</script>
</head>
<Body>
<tabela CellPadding = "0" CellPacing = "0" id = "myTable">
<tr id = "row1">
<td> Título do livro </td>
<Td> Preço </td>
</tr>
<tr id ID = "Row2">
<Td> A sala com vistas </td>
<Td> $ 30,00 </td>
</tr>
<tr id = "row3">
<Td> 60 momentos </td>
<td> $ 32,00 </td>
</tr>
</tabela>
<nome de entrada = "b1" type = "button" value = "Adicione uma linha" onclick = "javascript: addrow ();" /> <r />
<input name = "b2" type = "button" value = "exclua a segunda linha" onclick = "javascript: delrow ();" /> <r />
<input name = "b3" type = "button" value = "modificar título" onclick = "javascript: updaterow ();" /> <r />
<div id = "displayInfo"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.