javascript 수 동 으로 표 에 데 이 터 를 추가 하 는 작은 예
<body>
<form id="form1" runat="server">
<div>
<table border='1px' width="500px" id="tables">
<tr>
<td>1</td><td><input type="text" value="20" style="width:50px" /><input type="text" value="200"style="width:50px" /></td><td> </td><td> </td><td><input type="button" id="but" value=" " onclick="butd(this);" /></td>
</tr>
<tr>
<td>2</td><td><input type="text" value="30"style="width:50px" /><input type="text" value="300"style="width:50px" /></td><td> </td><td> </td><td><input type="button" id="Button1" value=" " onclick="butd(this);" /></td>
</tr>
<tr>
<td>3</td><td><input type="text" value="40" style="width:50px" /><input type="text" value="400" style="width:50px"/></td><td> </td><td> </td><td><input type="button" id="Button2" value=" " onclick="butd(this);" /></td>
</tr>
<tr>
<td>4</td><td><input type="text" value="50" style="width:50px" /><input type="text" value="500"style="width:50px" /></td><td> </td><td> </td><td><input type="button" id="Button3" value=" " onclick="butd(this);" /></td>
</tr>
<tr>
<td>5</td><td><input type="text" value="60" style="width:50px" /><input type="text" value="600"style="width:50px" /></td><td> </td><td> </td><td><input type="button" id="Button4" value=" " onclick="butd(this);" /></td>
</tr>
</table>
</div>
<div>
<table border='1px' width="500px" id="table2">
<tr><td>ID</td><td> </td><td> </td><td> </td></tr>
</table>
</div>
</form>
</body>
현재 새로 추 가 된 단 추 를 누 르 면 현재 줄 의 데 이 터 를 아래 TABLE 에 동적 으로 추가 합 니 다.javascipt 코드 는 다음 과 같 습 니 다.
<script type="text/javascript">
function butd(rows) {
var rows = rows.parentNode.parentNode.rowIndex //
var mytable = document.getElementById('tables'); // table;
var Romm_price = mytable.rows[rows].cells[0].innerText; //
var room_rows = mytable.rows[rows].cells[1].children[0].value; // ;
var room_rows2 = mytable.rows[rows].cells[1].children[1].value; // ;
var room_rows3 = mytable.rows[rows].cells[2].innerText; // ;
// table2, table2
var x = document.getElementById('table2').insertRow();
x.align = "center"; //
var Romm_typename = x.insertCell(0);
var txtDate = x.insertCell(1);
var Guest_Type_ID = x.insertCell(2);
var room_row = x.insertCell(3);
Romm_typename.innerHTML = Romm_price;
txtDate.innerHTML = room_rows;
Guest_Type_ID.innerHTML = room_rows2;
room_row.innerHTML = room_rows3;
}
</script>
이 중에서 가장 중요 한 것 은 현재 줄 의 데 이 터 를 어떻게 얻 느 냐 하 는 것 입 니 다.그리고 현재 줄 의 데 이 터 를 table 에 어떻게 수 동 으로 추가 하 느 냐 하 는 것 입 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.