First build a page as follows: Here are two tables, the above one has data, the following one has no data, only a table head!
Copy Code code as follows:
<body>
<form id= "Form1" runat= "Server" >
<div>
<table border= ' 1px ' width= "500px" id= "Tables" >
<tr>
<td>1</td><td><input type= "text" value= "style=" width:50px "/><input type=" text "value = "style=" "width:50px"/></td><td> I am a Chinese </td><td> study hard </td><td><input Type= "button" id= "but" value= "add" onclick= "BUTD (this);"/></td>
</tr>
<tr>
<td>2</td><td><input type= "text" value= "style=" width:50px "/><input type=" text "value = "width:50px" style= "/></td><td>" I am a Chinese </td><td> study hard </td><td><input Type= "button" id= "Button1" value= "Add" onclick= "BUTD (this);"/></td>
</tr>
<tr>
<td>3</td><td><input type= "text" value= "style=" width:50px "/><input type=" text "value = "style=" "width:50px"/></td><td> I am a Chinese </td><td> study hard </td><td><input Type= "button" id= "Button2" value= "Add" onclick= "BUTD (this);"/></td>
</tr>
<tr>
<td>4</td><td><input type= "text" value= "style=" width:50px "/><input type=" text "value = "style=" "width:50px"/></td><td> I am a Chinese </td><td> study hard </td><td><input Type= "button" id= "Button3" value= "Add" onclick= "BUTD (this);"/></td>
</tr>
<tr>
<td>5</td><td><input type= "text" value= "a" style= "width:50px"/><input type= "text" value = "style=" "width:50px"/></td><td> I am a Chinese </td><td> study hard </td><td><input Type= "button" id= "Button4" value= "Add" 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 add the current row data in the point to the table below, Javascipt code as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
function Butd (rows) {
var rows = rows.parentNode.parentNode.rowIndex//Find the currently selected row
var mytable = document.getElementById (' tables '); Locate the current table;
var romm_price = Mytable.rows[rows].cells[0].innertext; Find the value of the first column in the current row
var room_rows = Mytable.rows[rows].cells[1].children[0].value; Finds 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; Finds the value of the second text box in the second column of the current row;
var room_rows3 = Mytable.rows[rows].cells[2].innertext; Finds the value of the third column of the current row;
Find Table2 and add a new line to table2
var x = document.getElementById (' table2 '). InsertRow ();
x.align = "center"; Set 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>
The most important thing in this is how to get the current line you clicked and how to manually add the current row data to the table!
