Recentemente li três livros da O'Reilly, que geralmente chamamos de livros de feras (o nome de um dos meus colegas é muito parecido com o meu, haha), e sempre quis fazer uma amostra para praticar minhas habilidades, porque muitas empresas usam formulários dinâmicos, então tentei usar js para criar um formulário dinâmico e usei o navegador firfox para depurá-lo, porque o plug-in firbug é melhor de usar. Originalmente, eu queria implementar uma pequena função. quiser fazer tanto, basta clicar no botão para adicionar uma linha, e então mais e mais foram adicionadas, e ficaram cada vez mais bonitas. Poste o código-fonte para que todos possam aprender juntos. Se você tiver alguma dúvida, pode corrigi-la. Se você é iniciante em js, por favor, tenha misericórdia.
ps: Não sei por que o número da linha não aparece acima, não o uso há muito tempo. As notas são escritas de forma clara e todos podem aprender juntos.
Copie o código do código da seguinte forma:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabela Dinâmica</title>
<style type="texto/css">
corpo{ cor de fundo:#9CC; alinhamento de texto:centro}
tabela{margem:10px auto;}
tr th {borda: 1px sólido #096;}
td{borda: 1px sólido #096;}
</estilo>
<script type="texto/javascript">
/*Apenas algumas variáveis podem ser declaradas fora da função, e métodos de operação não podem ser usados porque não há função para chamá-la e executá-la. */
//Ao carregar a página, coloque a caixa de seleção no cabeçalho da tabela, pois é de uso único
janela.onload=função(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var filhotd = firsttr.childNodes;
//Adiciona uma caixa de seleção na primeira linha e coluna
var inp = document.createElement('input');
inp.type = 'caixa de seleção';
//Registro de evento DOM nível 2
catchEvent(inp,'click',function(){ //Registra a função para julgar diferentes estados
if(inp.checked ==true){
allSelect();
}outro{
cancelarSelecionar();
}
});
//catchEvent(inp,'clique',allSelect);
//catchEvent(inp,'alterar',cancelSelect);
filhotd[0].appendChild(inp);
}
//Adiciona uma linha
//var count =0; //Adiciona uma coluna para contagem
função addRow(){
//conta++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var filhotd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = new Array();
var arrinp = new Array();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
se(eu==0){
arrinp[i].type = 'caixa de seleção';
arrinp[i].nome = 'selectbox';
}senão se(i==1){
//arrinp[i] = document.createTextNode(contagem);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//Pense sobre por que input também precisa adicionar um array.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
novaClassificação();
}
//Excluir operação
função deleteRow(){
var parentTr = new Array(); //Primeiro coloca as linhas selecionadas em um array
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<caixa.comprimento;i++){
if(caixa[i].checked==true){
var pai = caixa[i].parentNode;
parentTr[i] = parent.parentNode;//Se for colocado diretamente dentro, por que não pode ser completamente excluído? ? É porque não há resposta suficiente?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Isso excluirá todos os itens selecionados
if(parentTr[i]){ //Aqui precisamos primeiro determinar se é um valor nulo. Se não for nulo, remova-o. Caso contrário, um erro será relatado.
tab.removeChild(parentTr[i]);
}
}
novaClassificação();
}
//Se a exclusão for realizada, reordene
função novaClassificar(){
var texto = new Array();
var filho_td = novo Array();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//Obtém todos os nós na segunda coluna começando na segunda linha
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
texto[i] = document.createTextNode(i);
filho_td[i].appendChild(texto[i]);
}
}
//seleciona todas as operações
function allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<caixa.comprimento;i++){
caixa[i].checked = verdadeiro;
}
}
//Cancela todas as seleções
função cancelarSelecionar(){
var box = document.getElementsByName('selectbox');
for(var i = 0;i<caixa.comprimento;i++){
if(caixa[i].verificado == verdadeiro){
caixa[i].checked =falso;
}
}
}
//Função de registro de evento
function catchEvent(eventobj,evento,eventHandler){
if(eventobj.addEventListener){
eventobj.addEventListener(evento,eventHandler,falso);
}else if(eventobj.attachEvent){
evento = 'on'+evento;
eventoobj.attachEvent(evento,eventHandler);
}
}
//catchEvent(add,'clique',addRow);
</script>
</head>
<corpo>
<h3>Tabela dinâmica</h3>
<input type="button" value="Adicionar" id="add" onclick="addRow()" />
<input type="button" value="Selecionar tudo" onclick="allSelect()" />
<input type="button" value="Cancelar tudo" onclick="cancelSelect()" />
<input type="button" value="Delete" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellpacing="0px">
<tr><td></td><td>Número de série</td><td>Pergunta um</td><td>Pergunta dois</td><td>Pergunta três</td></tr>
</tabela>
</body>
</html></span>