How to add rows to table in one HTML page by asking for data to be added into rows from another HTML page (may be using “prompt” & javascripts)?
Question
I used following code:
Form1.html
<html>
<head>
<title>Table of Data</title>
</head>
<body>
<form method="POST">
<table border="1" id="tblQuery">
<tr>
<th>Query</th>
<th>Answer</th>
<th>Data Type</th>
<th>Screen No.</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text"/></td>
<td>Textbox</td>
<td>1</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male" />Male<br><input type="radio" name="gender" value="female" />Female</td>
<td>Radio Buttons</td>
<td>2</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Qualification</td>
<td><input type="checkbox" name="qualification" value="graduate" />Graduate<br><input type="checkbox" name="qualification" value="post graduate" />Post Graduate</td>
<td>Checkbox</td>
<td>1</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>City</td>
<td><select>
<option value="new_delhi">New Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="kolkata">Kolkata</option>
<option value="chennai">Chennai</option>
</select></td>
<td>Select List</td>
<td>4</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
<tr>
<td>Academic Record</td>
<td><input type="button" value="Add Table" onclick="addTable.html" /></td>
<td>Table</td>
<td>3</td>
<td><input type="button" value="Edit" /><input type="button" value="Delete" /></td>
</tr>
</table>
<br>
</form>
</body>
</html>
Form2.html
<html>
<head>
<title>Action</title>
<script src="scripts/newQuery.js"></script>
</head>
<body>
<input type="button" value="Add Query" onclick="openPage()" />
<input type="button" value="Create Metafile" />
</body>
</html>
Later, I added both the pages to an "index.html" file using "frameset" element as follows:
index.html
<html>
<head>
<title>Main Application case Study</title>
</head>
<frameset rows="75%, *">
<frame src="Form.html" />
<frame src="Form2.html" />
</frameset>
</html>
Now if I open the "index.html" page & click on "Add Query" button, I would get a "prompt" message that would ask me my Query to be added & i'll add it to "Form1.html" page.
The problem i'm facing here is that, when i submit my query to be added to the table, the query is actually submitted to "Form2.html" page, as the "prompt" is coded at that page. But I need to add a row to "Form1.html" .
How can I achieve it?
1 answers
solution1
0 2013-01-15 12:38:07
You are making your life much harder than necessary.
You want to open a page that opens a page which does something like
http://www.dzone.com/snippets/add-rows-html-table
function addRow(table,content,morecontent,evenmorecontent) {
var tabBody=table.getElementsByTagName("TBODY")[0];
var row=document.createElement("TR");
var cell1 = document.createElement("TD");
var cell2 = document.createElement("TD");
var cell3 = document.createElement("TD");
var textnode1=document.createTextNode(content);
var textnode2=document.createTextNode(morecontent);
var textnode3=document.createTextNode(evenmorecontent);
cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tabBody.appendChild(row);
}
var table = opener.opener.document.getElementById("tblQuery");
addRow(table,"cell1 content","cell2 content","cell3 content");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.