Deixando uma tabela editavel

[samueldev 0]

fiz a seguinte tabela

<table width="692" height="194" id="tableEditavel" border="1px" >
<tr>
<td width="96" height="36"> </td>
<td width="132"><div align="center"><strong><code>Segunda</code></strong></div></td>
<td width="132"><div align="center"><strong><code>Terça</code></strong></div></td>
<td width="132"><div align="center"><strong><code>Quarta</code></strong></div></td>
<td width="132"><div align="center"><strong><code>Quinta</code></strong></div></td>
<td width="132"><div align="center"><strong><code>Sexta</code></strong></div></td>
</tr>
<tr>
<td rowspan="9"><div align="center"><strong><code>Informatica 2011</code></strong></div></td>
<td ><div align="center"><strong><code>Sociologia</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Fisica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td ><div align="center"><strong><code>Sociologia</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
<tr>
<td><div align="center"><strong><code>Matematica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>Quimica</code></strong></div></td>
<td><div align="center"><strong><code>HIStoria</code></strong></div></td>
<td><div align="center"><strong><code>Sociologia</code></strong></div></td>
</tr>
</table>

 

Gostaria de saber se tem como deixar essa tabela editavel ?

Na hora que o usuario clicar na célula da tabela , esta torne-se editavel ..

[Andrew Marques 47]

Coloca os conteudos dentro de inputs :joia:

[Jair Humberto 2]

Cara, organiza esse código. A página abaixo que criei, foi um exemplo. Coloquei os comentários para explicar mais ou menos.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Exemplo de Tabela Editável</title>
        <script type="text/javascript">
            function tornarTabelaEditavel(tabela)
            {
                // Obtém todas as tds da tabela fornecida.
                var tdlist = tabela.getElementsByTagName("td");

                for(var i = 0; tdlist[i]; i++) {
                    // Adiciona o evento double click em cada td da tabela.
                    tdlist[i].ondblclick = function() {
                        // Se for texto, muda para input.
                        if(this.firstChild.nodeType == 3) {
                            // Cria um campo de texto editável e insere o valor da td nesse campo.
                            var campo = document.createElement("input");
                            campo.value = this.firstChild.nodeValue;

                            // Substitui o texto da td pelo campo.
                            this.replaceChild(campo, this.firstChild);

                            campo.select();

                            // Faz o processo inverso ao perder o foco.
                            campo.onblur = function() {
                                this.parentNode.replaceChild(document.createTextNode(this.value), this);
                            }
                        }
                    }
                }
            }

            window.onload = function() {
                tornarTabelaEditavel(document.getElementById('idtabela'));
            }
        </script>
    </head>
    <body>
        <!-- use css para criar a tabela com estilos, evita usar aquelas tags strong e code. Se for necessário ainda
        assim, substitua  tabela.getElementsByTagName("td") por tabela.getElementsByTagName("code")-->
        <table border="1" id="idtabela">
            <tr>
                <td>meu texto</td>
                <td>meu texto</td>
            </tr>
            <tr>
                <td>meu texto</td>
                <td>meu texto</td>
            </tr>
        </table>
    </body>
</html>

[samueldev 0]

Muito massa seu exemplo, valeu mesmo .

Tinha criado esse exemplo apenas para postar no Fórum, e foi muito rápido, desculpa aê, de qualquer modo muito obrigado, ajudou muito .

[Vitor Iglesias 0]

@Jair Humberto, boa tarde!
Gostei do seu exemplo! Parabéns!
Tem forma de que os dados editados pelo usuário fiquem salvos? 

Muito obrigado!