Problem with tr of table inserted via javascript

Question

Problem with tr of table inserted via javascript

Navigation

#1 by (1 votes)

2

	function cadProd(){
	var nomeProd = document.getElementById("nomeProd").value;
	var categoria = document.getElementById("categoria").value;
	var descricao = document.getElementById("descricao").value;
	var un = document.getElementById("un").value;
	var qtd = document.getElementById("qtd").value;
	var qtdMin = document.getElementById("qtdMin").value;
	var table = document.getElementById("novosProds");
	var row = table.insertRow(1);
	row.insertCell(0).innerHTML = nomeProd;
	row.insertCell(1).innerHTML = categoria;
	row.insertCell(2).innerHTML = descricao;
	row.insertCell(3).innerHTML = un;
	row.insertCell(4).innerHTML = qtd;
	row.insertCell(5).innerHTML = qtdMin;
	row.insertCell(6).innerHTML = '<input type="submit" value="Deletar">';
	return alert("Registro realizado com sucesso");
}

<!DOCTYPE pt-br>
<html>
	<head>

	</head>
	<body>
		<?php/*
			include 'header.php';
		*/?>
		<div class='cadProd'>
			<h1>Cadastrar Produto</h1>
			<table border='2' id='cadastrar'>
				<tr>
					<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
				</tr>
				<tr><form method='POST'>
					<td>
						<input type='text' name='nomeProd' id='nomeProd'/>
					</td>
					<td>
						<select name='categoria' id='categoria'>
							<option id='1'>Limpeza</option>
							<option id='2'>Escritório</option>
							<option id='3'>Uniforme</option>
							<option id='4'>Acessórios</option>
						</select>
					</td>
					<td>
						<input type='descricao' name='descricao' id='descricao'>
					</td>
					<td>
						<select name='un' id='un'>
							<option id='1'>Un</option>
							<option id='2'>Pct</option>
							<option id='3'>Lts</option>
							<option id='3'>Kilo</option>
						</select>
					</td>
					<td>
						<input type='number' name='qtd' id='qtd'>
					</td>
					<td>
						<input type='number' name='qtdMin' id='qtdMin'>
					</td>
					<td>
						<input type='submit' onclick='cadProd()' value='Cadastrar'/>
					</td>
				</form></tr>
			</table>
			<table border='2' id='novosProds'>
				<tr>
					<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
				</tr>
			</table>
		</div>
	
	<body>
</html>

Well, if you look at the example, it's holding the line. My problem is that when this is executed here in my localhost, it deletes the line after inserting it.

This code is complete. If saving as html can see the problem:

<!DOCTYPE pt-br>

</head>
<body>
    <div class='cadProd'>
        <h1>Cadastrar Produto</h1>
        <table border='2' id='cadastrar'>
            <tr>
                <th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
            </tr>
            <tr><form method='POST'>
                <td>
                    <input type='text' name='nomeProd' id='nomeProd'/>
                </td>
                <td>
                    <select name='categoria' id='categoria'>
                        <option id='1'>Limpeza</option>
                        <option id='2'>Escritório</option>
                        <option id='3'>Uniforme</option>
                        <option id='4'>Acessórios</option>
                    </select>
                </td>
                <td>
                    <input type='descricao' name='descricao' id='descricao'>
                </td>
                <td>
                    <select name='un' id='un'>
                        <option id='1'>Un</option>
                        <option id='2'>Pct</option>
                        <option id='3'>Lts</option>
                        <option id='3'>Kilo</option>
                    </select>
                </td>
                <td>
                    <input type='number' name='qtd' id='qtd'>
                </td>
                <td>
                    <input type='number' name='qtdMin' id='qtdMin'>
                </td>
                <td>
                    <input type='submit' onclick='cadProd()' value='Cadastrar'/>
                </td>
            </form></tr>
        </table>
        <table border='2' id='novosProds'>
            <tr>
                <th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
            </tr>
        </table>
    </div>
        <script language='javascript'>
function cadProd(){
var nomeProd = document.getElementById("nomeProd").value;
var categoria = document.getElementById("categoria").value;
var descricao = document.getElementById("descricao").value;
var un = document.getElementById("un").value;
var qtd = document.getElementById("qtd").value;
var qtdMin = document.getElementById("qtdMin").value;
var table = document.getElementById("novosProds");
var row = table.insertRow(1);
row.insertCell(0).innerHTML = nomeProd;
row.insertCell(1).innerHTML = categoria;
row.insertCell(2).innerHTML = descricao;
row.insertCell(3).innerHTML = un;
row.insertCell(4).innerHTML = qtd;
row.insertCell(5).innerHTML = qtdMin;
row.insertCell(6).innerHTML = '<input type="submit" value="Deletar">';
return alert("Registro realizado com sucesso");

}

Any suggestions on this? Sincerely

javascript html5 css3

asked by anonymous 14.02.2017 / 17:50

1 answer

Error: argument of type char is incompatible with lpcwstr Catch only what was changed in an object

score 1 · Accepted Answer

When using [type="submit"] the browser will make a POST request to the URL or URI attribute "action" defined in the tag, if there is no action or form, click on a [type="submit "] will execute a POST on the page itself, which will result in a redirect, as your code has no persistence mechanism the data is lost due to page refresh. Changing <input type="submit" value"(...)"> by <button type="button">(...)</button>

Below is the modified code for this reality:

	function cadProd(){
		var nomeProd = document.getElementById("nomeProd").value;
		var categoria = document.getElementById("categoria").value;
		var descricao = document.getElementById("descricao").value;
		var un = document.getElementById("un").value;
		var qtd = document.getElementById("qtd").value;
		var qtdMin = document.getElementById("qtdMin").value;
		var table = document.getElementById("novosProds");
		var row = table.insertRow(1);
		row.insertCell(0).innerHTML = nomeProd;
		row.insertCell(1).innerHTML = categoria;
		row.insertCell(2).innerHTML = descricao;
		row.insertCell(3).innerHTML = un;
		row.insertCell(4).innerHTML = qtd;
		row.insertCell(5).innerHTML = qtdMin;
		row.insertCell(6).innerHTML = '<button type="button"  onclick="delProd(this)">Deletar</button>';
		return alert("Registro realizado com sucesso");
	}
	function delProd(td) {
		var tr=td.parentNode.parentNode;
		tr.parentNode.removeChild(tr);
	}

   <!DOCTYPE pt-br>
<html>
<head>

</head>
<body>
	<?php/*
		include 'header.php';
	*/?>
	<div class='cadProd'>
		<h1>Cadastrar Produto</h1>
		<table border='2' id='cadastrar'>
			<tr>
				<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
			</tr>
			<tr><form method='POST'>
				<td>
					<input type='text' name='nomeProd' id='nomeProd'/>
				</td>
				<td>
					<select name='categoria' id='categoria'>
						<option id='1'>Limpeza</option>
						<option id='2'>Escritório</option>
						<option id='3'>Uniforme</option>
						<option id='4'>Acessórios</option>
					</select>
				</td>
				<td>
					<input type='descricao' name='descricao' id='descricao'>
				</td>
				<td>
					<select name='un' id='un'>
						<option id='1'>Un</option>
						<option id='2'>Pct</option>
						<option id='3'>Lts</option>
						<option id='3'>Kilo</option>
					</select>
				</td>
				<td>
					<input type='number' name='qtd' id='qtd'>
				</td>
				<td>
					<input type='number' name='qtdMin' id='qtdMin'>
				</td>
				<td>
					<button type="button" onclick="cadProd()">Cadastrar</button>
				</td>
			</form></tr>
		</table>
		<table border='2' id='novosProds'>
			<tr>
				<th>Nome</th><th>Categoria</th><th>Descrição</th><th>Un. Medida</th><th>Qtd</th><th>Qtd Minima</th>
			</tr>
		</table>
	</div>
<body>
</html>

Basically I removed inputs type submit and replaced with buttons of type button that did not fire the submit event. I need to add a unique function to remove the product, in it I pass the element clicked and then I go up until I get to the table where I remove the element.