Como faço para o item adicionado na tabela pelo JS ter a mesma CSS?

Olá Raul!

Será mais fácil ajudá-lo se você postar o seu código aqui no fórum.

TABELA TESTE

        <thead id="titulo-tabela">

            <tr id="linha-de-titulo"> 
               <th class="nomes">Nome</th> 
                <th class="nomes">Id</th> 
                <th class="nomes">Telefone</th>                                      

            </tr>

        </thead>
        <tbody id="corpo-tabela">  

            <tr>
                <td class="input-dados"> Raul</td>
                <td class="input-dados">50</td>
                <td class="input-dados">(13) 3024-3153</td>

            </tr>

        </tbody>
    </table>

</main>
<section>
    <form id="form">

Codigo HTML Digite seu nome:

        <label for="id"> Digite seu Id:</label>
        <input type="number" name="id" id="id">

        <label for="telefone"> Digite seu telefone:</label>
        <input type="tel" name="telefone" id="telefone">

        <button id="botao">Inserir dados na tabela</button>

    </form>
</section>

<script src="estudo.js"></script>

Codigo CSS

body{ display:flex; width:70%;

flex-direction: column;
justify-content: center;
align-items: center;

}

#conteiner-tabela{ flex:1; display:flex; flex-direction: column; justify-content: center; align-items: center;

}

#tabela{

width: 100%;
margin-bottom : .5em;
table-layout: fixed;

}

}

td, th { padding: .7em; margin: 0; border: 1px solid #ccc; text-align: center; }

th{ font-weight: bold; background-color: #EEE; }

#corpo-tabela .nomes{

padding: .7em;
margin: 0;
text-align: center;

}

.input-dados{

border: 1px solid grey;
text-align: center;
background-color: bisque;

}

_CODIGO JS

//selecionando o botao do formulario

let botao=document.querySelector("#botao");

botao.addEventListener("click", function(event){

event.preventDefault();

//pegando itens do formulário e atribuindo-lhes valor

let itens_formulario= document.querySelector("#form");

let nome= itens_formulario.nome.value; let id = itens_formulario.id.value; let tel = itens_formulario.telefone.value;

id= Number(id)+1; // criando linhas da tabela

let tbody= document.querySelector("#corpo-tabela");

let linha= document.createElement("tr");

//criando colunas

let nomeTd= document.createElement("td"); let idTd= document.createElement("td"); let telefonetd= document.createElement("td");

// atribuindo valores às colunas

nomeTd.textContent= nome; idTd.textContent= id; telefonetd.textContent=tel;

// atribuindo filhos à tr linha

linha.appendChild(nomeTd); linha.appendChild(idTd); linha.appendChild(telefonetd);

// atribuindo linha ao tbody ou corpo da tabela

tbody.appendChild(linha);

});

Quanto a automatização, não consegui fazer rodar, dessa forma não vou nem postar.

Uma das formas, e que acredito ser a mais correta para aplicação de estilo através do JS, é você atribuir uma classe ao elemento, utilizando a seguinte sintaxe, exemplo:

let tr = document.querySelector('tr'); // captura o elemento que quer estilizar
tr.classList = 'linha'; // atribui uma nova classe chamada "linha"

e la no CSS você criar um estilo para essa nova classe "linha"

.linha {
    background: "red"
}

Espero ter ajudado

Vou tentar desse jeito, espero que dê certo. Muito obrigado.

Olá Wilson, vim avisar que consegui resolver o problema usando sua sugestão. MUITO OBRIGADO MESMO, eu tava quebrando a cabeça aqui e era tão simples! Nada como uma visão externa dos problemas para nos dar perspectiva.

Sofro com isso tambem, é normal kkk.. As vezes passamos dias com um problema e quando achamos resposta, era algo simples. Valeu