ATUALIZAR TABELA HTML (JAVASCRIPT)

1,622 views
Skip to first unread message

Evandro Araujo de Abreu

unread,
Jun 21, 2012, 8:38:49 AM6/21/12
to list...@googlegroups.com, php...@yahoogrupos.com.br

Pessoal,

gostaria de excluir uma linha da tabela HTML, e atualizar na tela.
Por exemplo , tenho a tabela html abaixo e quero excluir o item 2 - teste, atraves do link "apagar",
entao minha tabela ficaria com o registros 1 e 3.

Obs. eu ja fiz a rotina de excluir no banco , minha dificuldade é atualizar na tabela HTML



segue o script abaixo:


<HTML>
<HEAD>
 <TITLE>New Document</TITLE>
</HEAD>
<BODY>
  <table width='800' border='0' cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>
        <tr>
        <span><label><strong>Pesquisa(Nome):</strong></label>
        <input lang='pt' type='text' style='font-family:arial;font-size:11px;color:#0000FF'
         value='' maxlength='30' id='nome' name='nome' onkeyup ='filtro(this.value,1,event);'/>

        </span>
            <td colspan=3> <a href='index.php'>Home </a>  ||   <a href=\"javascript:requestInfo('tablecolaboradores.php?mode=new&id=$id','tablecolaboradores','')\">Adicionar </a>  ||  <a href=\"javascript:requestInfo('tablecolaboradores.php?mode=list','tablecolaboradores','')\">Atualizar</a></td>
        </span>

        </tr>

        <tr>
            <th> Cod.
            <th> Nome

        </tr>
            <tr bgcolor='#ffffff'>

                <td>1</td>
                <td>evandro</td>
                <td> alterar </td>
                <td> apagar</td>
            </tr>
            <tr bgcolor='#ffffff'>

                <td>2</td>
                <td>teste</td>
                <td> alterar </td>
                <td> apagar</td>
            </tr>
           
            <tr bgcolor='#ffffff'>

                <td>3</td>
                <td>roberta</td>
                <td> alterar </td>
                <td> apagar</td>
            </tr>

        </table>
</BODY>
</HTML>




Luis Fernando Gaido

unread,
Jun 21, 2012, 12:20:26 PM6/21/12
to list...@googlegroups.com
http://www.w3schools.com/jsref/met_table_deleterow.asp

--
============================================================
JQUERY MAGAZINE > http://www.jquerymagazine.com.br
--
PHP MAGAZINE > http://www.phpmagazine.com.br
--
LISTA NODE.JS > https://groups.google.com/group/lista-nodejs?hl=pt-br
--
AJAX-BRASIL > http://groups.google.com/group/ajax-brasil
--
PYTHON-GOOGLE > http://groups.google.com.br/group/python-google
--
DOTNET-BRASIL > http://groups.google.com.br/group/dotnet_br
============================================================



--
Luís Fernando Gaido
Analista de Sistemas
PHP + MySQL + Ajax

"Em teoria, não existe nenhuma diferença entre teoria e prática. Mas, na prática, existe."

Fernando Becker

unread,
Jun 21, 2012, 12:22:32 PM6/21/12
to list...@googlegroups.com, php...@yahoogrupos.com.br
Você deve montar a tabela atraves de uma consulta ao banco de dados. Se excluir do bando nao ira mostra na tabela.

Atenciosamente,
Fernando Becker



Em 21 de junho de 2012 09:38, Evandro Araujo de Abreu <evandr...@gmail.com> escreveu:

Joubert Guimarães de Assis

unread,
Jun 21, 2012, 10:14:26 PM6/21/12
to list...@googlegroups.com
Esta tabela é fixa ou é provida por um banco de dados?

2012/6/21 Fernando Becker <febe...@gmail.com>

Evandro Araujo de Abreu

unread,
Jun 22, 2012, 7:19:15 AM6/22/12
to list...@googlegroups.com, jouber...@gmail.com
Pessoal

Resolvi da seguinte forma:


<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);

        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>
</HEAD>
<BODY>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>




2012/6/22 Evandro Araujo de Abreu <evandr...@gmail.com>
Bom dia,


a tabela vou carregar pelo banco de dados..e mostrar em uma tabela html


2012/6/21 Joubert Guimarães de Assis <jouber...@gmail.com>

Evandro Araujo de Abreu

unread,
Jun 22, 2012, 7:09:41 AM6/22/12
to list...@googlegroups.com, jouber...@gmail.com
Bom dia,


a tabela vou carregar pelo banco de dados..e mostrar em uma tabela html

2012/6/21 Joubert Guimarães de Assis <jouber...@gmail.com>
Esta tabela é fixa ou é provida por um banco de dados?
Reply all
Reply to author
Forward
0 new messages