1. Carregamento dinâmico de tabelas
1. Primeiro defina o id para a posição adicionada da tabela em html
Ou seja, escreva uma tag div dentro da tag body do html para indicar que a tabela deve ser adicionada ao interior desta div. do seguinte modo
<div id="tdl"><div>
2. Escreva a instrução para adicionar a tabela em javascript
Se estiver no arquivo html atual, está escrito dentro da tag <script>, como
Copie o código do código da seguinte forma:
<script type="texto/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //A tabela adicionada aqui pode ser criada de acordo com suas próprias necessidades
</script>
Se você importar um arquivo js, escreva a seguinte instrução diretamente no arquivo js (assumindo que seja test.js)
Copie o código do código da seguinte forma:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
Em seguida, apresente seu próprio arquivo html
Copie o código do código da seguinte forma:
<script type="text/javascript" src="test.js"></script>
2. Adicionar linhas da tabela dinamicamente
1. Primeiro defina o ID para a posição de adição da linha da tabela em HTML. Esta posição deve estar dentro de <tbody> (não é particularmente preciso, mas cheguei a essa conclusão com base em meu teste. Se você tiver outros métodos, deixe uma mensagem. , obrigado), como segue
Copie o código do código da seguinte forma:
<tabela>
<thead></thead>
<tfoot><tfoot> //tfoot e thead são usados junto com tbody, mas quando eu estava escrevendo, não havia problema em não usá-los.
<tbody id="rows"></tbody>
</tabela>
[/s/S ]*/n
2. No conteúdo javascript, você deve primeiro criar linhas e células e, em seguida, adicionar linhas em <.tbody>, como segue
[código]
row=document.createElement("tr"); //Criar linha
td1=document.createElement("tr"); //Criar célula
td1.appendChild(document.createTextNode("content")); //Adicionar conteúdo à célula
row.appendChild(td1); //Adiciona células à linha
document.getElementById("rows").append(row); //Adiciona linhas a <tbody>
3. Minha pequena descoberta (talvez outros já saibam...)
1. Eu mesmo fiz um teste, escrevendo <table id="tdl'></table> em html e document.getElementById("tdl").innerHTML="<tr><td></td> em javascript </ tr>", depois de escrever isso, teste, as linhas da tabela no html não serão adicionadas.
2. Depois de concluir o teste acima, mudei novamente para escrever <table><tr><td id="t'><td><tr></table> em html e document.getElementById("t in javascript " ).innerHTML="<p>content</p>", o teste pode adicionar conteúdo.
3. Pensando: Que conclusões podem ser tiradas dos dois testes acima. Ainda não descobri como resumi-los. Que tipo de tags podem ser adicionadas diretamente por meio do innerHTML?