Create a page as follows: Here there are two tables with data on the top, and there is no data on the bottom, there is only one header!
Copy codeThe Code is as follows:
<Body>
<Form id = "form1" runat = "server">
<Div>
<Table border = '1px 'width = "500px" id = "tables">
<Tr>
<Td> 1 </td> <input type = "text" value = "20" style = "width: 50px "/> <input type =" text "value =" 200 "style =" width: 50px "/> </td> <td> I am a Chinese </td> <td> learn </td> <input type =" button "id =" but "value =" added "onclick =" butd (this ); "/> </td>
</Tr>
<Tr>
<Td> 2 </td> <input type = "text" value = "30" style = "width: 50px "/> <input type =" text "value =" 300 "style =" width: 50px "/> </td> <td> I am a Chinese </td> <td> learn </td> <input type =" button "id =" button1 "value =" added "onclick =" butd (this ); "/> </td>
</Tr>
<Tr>
<Td> 3 </td> <input type = "text" value = "40" style = "width: 50px "/> <input type =" text "value =" 400 "style =" width: 50px "/> </td> <td> I am a Chinese </td> <td> learn </td> <input type =" button "id =" button2 "value =" added "onclick =" butd (this ); "/> </td>
</Tr>
<Tr>
<Td> 4 </td> <input type = "text" value = "50" style = "width: 50px "/> <input type =" text "value =" 500 "style =" width: 50px "/> </td> <td> I am a Chinese </td> <td> learn </td> <input type =" button "id =" button3 "value =" added "onclick =" butd (this ); "/> </td>
</Tr>
<Tr>
<Td> 5 </td> <input type = "text" value = "60" style = "width: 50px "/> <input type =" text "value =" 600 "style =" width: 50px "/> </td> <td> I am a Chinese </td> <td> learn </td> <input type =" button "id =" button4 "value =" added "onclick =" butd (this ); "/> </td>
</Tr>
</Table>
</Div>
<Div>
<Table border = '1px 'width = "500px" id = "table2">
<Tr> <td> ID </td> <td> age </td> <td> money </td> <td> name </td> </tr>
</Table>
</Div>
</Form>
</Body>
Now, click the Add button to dynamically Add the data of the current row in the vertex to the TABLE below. The following code shows javascipt:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function butd (rows ){
Var rows = rows. parentNode. parentNode. rowIndex // locate the selected row.
Var mytable = document. getElementById ('tables '); // locate the current table;
Var Romm_price = mytable. rows [rows]. cells [0]. innerText; // locate the value of the first column of the current row
Var room_rows = mytable. rows [rows]. cells [1]. children [0]. value; // locate the value of the first text box in the second column of the current row;
Var room_rows2 = mytable. rows [rows]. cells [1]. children [1]. value; // locate the value of the second text box in the second column of the current row;
Var room_rows3 = mytable. rows [rows]. cells [2]. innerText; // locate the value of the third column of the current row;
// Locate table2 and add a row to table2
Var x = document. getElementById ('table2'). insertRow ();
X. align = "center"; // you can specify a row style.
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>
In this example, the most important thing is how to obtain the row you click, and then manually add the data of the current row to the table!