양식 항목을 변수에 저장하고 테이블에 추가

그래서 내 웹 페이지에서 원하는 것은 내가 원하는 데이터에 넣고 e 버튼을 누르면 삽입 된 데이터가있는 테이블에 새 항목이 추가됩니다 의 형태의.양식 항목을 변수에 저장하고 테이블에 추가

그래서를 heres 내가 무엇을 :

<!DOCTYPE html> 

<html> 
<body> 
<var>nome</var> 
<var>num</var> 
<var>marca</var> 
<var>modelo</var> 
<var>carregador</var> 

<form action="chegada.txt"> 
Nome: <input type="text" value=nome()><br> 
Número: <input type="text" value=num()><br> 
Marca: <input type="text" value=marca()><br> 
Modelo: <input type="text" value=modelo()><br> 
Carregador: <input type="text" value=carregador()><br> 
</form> 
<button onclick="novo()">Novo</button> 
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 5px; 
} 
</style> 
</head> 
<body> 

<table style="width:100%" id="chegada"> 
    <tr> 
    <th>Nome</th> 
    <th>Numero</th> 
    <th>Marca</th> 
<th>Modelo</th> 
<th>carregador</th> 
    </tr> 
</table> 
<br> 

<script> 
function novo() { 
    var table = document.getElementById("chegada"); 
    var row = table.insertRow(0); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    cell1.innerHTML = nome(); 
    cell2.innerHTML = numero(); 
    cell3.innerHTML = marca(); 
    cell4.innerHTML = modelo(); 
    cell5.iinerHTML = carregador(); 
} 
</script> 

</body> 
</html>

이

출처

2016-06-01 n0t313

귀하의 HTML은 매우 잘못된 것입니다 테이블에서 "포스트"데이터를 제외한 모든 작업을 수행합니다. 그리고'novo '내부에서 호출하는 함수 중 어느 것도 정의되어 있지 않습니다. – Xufox

사용이

<!DOCTYPE html> 

<html> 
<body> 

<form action="chegada.txt"> 
Nome: <input type="text" value="" id="val1"><br> 
Número: <input type="text" value="" id="val2"><br> 
Marca: <input type="text" value="" id="val3"><br> 
Modelo: <input type="text" value="" id="val4"><br> 
Carregador: <input type="text" value="" id="val5"><br> 
</form> 
<button onclick="novo()">Novo</button> 
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 5px; 
} 
</style> 
</head> 
<body> 

<table style="width:100%" id="chegada"> 
    <tr> 
    <th>Nome</th> 
    <th>Numero</th> 
    <th>Marca</th> 
<th>Modelo</th> 
<th>carregador</th> 
    </tr> 
</table> 
<br> 

<script> 
function novo() { 
    var val1 = document.getElementById("val1").value; 
    var val2 = document.getElementById("val2").value; 
    var val3 = document.getElementById("val3").value; 
    var val4 = document.getElementById("val4").value; 
    var val5 = document.getElementById("val5").value; 

    var prev=document.getElementById("chegada").innerHTML; 
    document.getElementById("chegada").innerHTML=prev+"<tr><td>"+val1+"</td><td>"+val2+"</td><td>"+val3+"</td><td>"+val4+"</td><td>"+val5+"</td></tr>" 

} 
</script> 

</body> 
</html>

출처

2016-06-01 09:47:30 Mani

효과가 있습니다! 정말 고맙습니다! – n0t313

환영합니다. 그것을 옳은 대답으로 만드십시오. – Mani

양식 항목을 변수에 저장하고 테이블에 추가

답변

관련 문제