No desenvolvimento de aplicativos, algumas informações de entrada são dinâmicas, como a experiência de trabalho que queremos registrar um funcionário, como a figura a seguir
Se for transformado em um beco sem saída, você só poderá preencher três, e se tiverem quatro? Ou mais, não é impossível adicioná -lo? Portanto, isso não é bom, podemos adicionar dinamicamente linhas de tabela, como mostrado na figura abaixo, adicione uma linha e insira uma linha de informações, que é mais flexível
Vamos dar uma olhada em como combinar JavaScript no ASP e ASP.NET para alcançar esse efeito:
Primeiro de tudo, adicionar tabelas dinamicamente é implementado em primeiro plano. Quando a próxima estação estiver disponível, pode ser possível, mas o Ajax pode ser usado, o que é muito problemático, por isso é melhor usar o JavaScript para implementá -los. A seguir, são apresentadas duas maneiras de adicionar dinamicamente linhas de tabela:
O primeiro tipo: código -fonte
JavaScript:
<script type = "text/javascript">/** // * Esta função é usada para adicionar uma linha dinamicamente * TABOBJ: TABELA TABLE * COLNUM: o número de colunas que de uma linha na tabela * Sorpos: a fonte da nova linha. * Targpos: a posição em que a nova linha será adicionada. * */ função addRow (Tabobj, Colnum, Sorpos, Targpos) {var ntr = Tabobj.inserTrow (Tabobj.rows.length-Targpos); // Insira uma nova linha na tabela nomeada na posição // nomeado. var trs = tabobj.getElementsByTagName ('tr'); // Obtenha a coleção TRS da tabela designada var sort = trs [Sorpos]; // posicionou o Sortr var Tds = sort.getElementsByTagName ('TD'); // Obtenha a coleção TDS da linha designada if (colnum == 0 || colnum == indefinido || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = new Array (); // Crie uma nova matriz TDS para (var i = 0; i <colnum; i ++) {// atravessa os TDs na linha ntd [i] = nt.insertCell (); // Crie nova célula ntd [i] .id = tds [0] .id; // Copie o ID do TD para a nova célula. | Atenção! O sufixo do TDS // deve ser nomeado NTD [i] .innerHtml = tds [i] .innerhtml; // Copie o ID do TD para a nova célula. | Atenção! O sufixo do TDS // deve ser nomeado NTD [i] .innerHtml = tds [i] .innerhtml; // copie o valor no NTD [i] 's INERHTML do TDS correspondente}}/** // * Esta função é usada para remover a linha designada na tabela nomeada * TABOBJ: A tabela designada * TargPos: Remoft Position * Btnobj: Atualmente, cliquei na imagem */função (TABOBJ, BTNOBJ, Targo. i <tabobj.rows.length; i ++) {if (tabobj.getElementsByTagName ('img') [i] == btnobj) {tabobj.deleterow (i+targpos); }}}} </script>Html
<tabela id = tabuserinfo borda = 1> <tr> <td> nome </td> <td> gênero </td> <td> idade </td> <td> host </td> <td> delete </td> </tr> <tryle "them :er" od = trusherinfo> <td idh ods = </thys = them = into "= od = trusherinfo> > </td> <td id = tduserinfo> <idhp id = userSex nome = userSex> </td> <td id = tduserinfo> <id iD = nome do usuário = useragem> </td> <td id = tduserinfo> <input id = userLove = usuário td> </td = tduserinfo> <input Id = userLove = userove> ONCLICK = "DELETEROW (document.all.tabuserinfo, 1, this)"> </td> </tr> <tr> <td> <entrada de entrada = button value = "add" onclick = "addRow (document.all.tabuserinfo, null, 1,1)