Botão para manipular tabela

FoxBones · Junho 30, 2014

Bom galera, eu estou passando o maior perrengue com esse pequeno problema aqui.

Eu tenho que fazer uma tabela parecida com a deste link aqui:

https://docs.google.com/spreadsheets/d/18oxn0TANreQ_C7dHpnE9uDgeNmi2KRMg5vyOAvJ6cAg/edit?usp=sharing

eu tenho que fazer a tabela e colocar funções no botão X...

como eu preciso fazer de forma parecida eu fiz esse código aqui, porém eu não estou conseguindo implantar de jeito nenhum o botão "X" na coluna excluir da tabela, alguém pode me ajudar com isso?

segue o código que eu consegui fazer, não sou muito bom com javascript

<html>

<head>

<title>Exercício 4</title>

</head>

<body>

<td>Despesa</td>

<td>Valor</td>

<td>Excluir</td>

</tr>

</table>

<br/>

Data:<input type="date" id="data">

Despesa:<input type="text" id="despesa">

Valor:<input type="text" id="valor"><br>

geral=0;

function adiciona(){

geral++

tabelinha= document.getElementById("tabela")

var data1= document.getElementById("data");

var despesa1= document.getElementById("despesa");

var valor1= document.getElementById("valor");

var novaLinha= tabelinha.insertRow(-1);

var novaCelula;

if(geral%2==0) cortabela= "#FFFF00";

else cortabela= "#FF7F00";

novaCelula = novaLinha.insertCell(0);

novaCelula.style.backgroundColor= cortabela;

novaCelula.innerHTML= data1.value;

novaCelula = novaLinha.insertCell(1);

novaCelula.style.backgroundColor= cortabela;

novaCelula.innerHTML= despesa1.value;

novaCelula = novaLinha.insertCell(2);

novaCelula.style.backgroundColor= cortabela;

novaCelula.innerHTML= valor1.value;

}

</script>

</body>

</html>

euler01 · Julho 10, 2014

Boa noite, segue as modificações no codigo.

<html>
    <head>
        <title>Exercício 4</title>

    </head>
    <body>
        <table id='tabela' border='10' width='100%'>
            <tr style='background-color:#CC0000'>
                <td>Data</td>
                <td>Despesa</td>
                <td>Valor</td>
                <td>Excluir</td>
            </tr>
        </table>
        <br/>
        Data:<input type="date" id="data">
        Despesa:<input type="text" id="despesa">
        Valor:<input type="text" id="valor"><br>
        <input type='button' id='incluir' value='incluir' onclick='adiciona()'/>

        <script LANGUAGE="JavaScript">
            geral = 0;
            function adiciona() {
                geral++
                tabelinha = document.getElementById("tabela")
                var data1 = document.getElementById("data");
                var despesa1 = document.getElementById("despesa");
                var valor1 = document.getElementById("valor");
                var novaLinha = tabelinha.insertRow(-1);
                var novaCelula;
                if (geral % 2 == 0)
                    cortabela = "#FFFF00";
                else
                    cortabela = "#FF7F00";

                novaCelula = novaLinha.insertCell(0);
                novaCelula.style.backgroundColor = cortabela;
                novaCelula.innerHTML = data1.value;

                novaCelula = novaLinha.insertCell(1);
                novaCelula.style.backgroundColor = cortabela;
                novaCelula.innerHTML = despesa1.value;

                novaCelula = novaLinha.insertCell(2);
                novaCelula.style.backgroundColor = cortabela;
                novaCelula.innerHTML = valor1.value;

                novaCelula = novaLinha.insertCell(3);
                novaCelula.style.backgroundColor = cortabela;
                novaCelula.innerHTML = '<input type="button" value="X" onclick="deleteRow(this)"/>';


            }
            function deleteRow(btn) {
                var row = btn.parentNode.parentNode;
                row.parentNode.removeChild(row);
            }

        </script>
    </body>
</html>

Entrar

Botão para manipular tabela

Pergunta

FoxBones

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

euler01

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades