I'm not much of a HTML or Javascript programmer but have a little experience just hacking away at it.
I am creating a HTML application and would like to be able to add or remove rows of a table. The row that gets added will need to contain 2 columns, 1 which contains an IFRAME, and the other will contain a Javascript Menu which will be used to select the content displayed in the IFRAME.
The purpose of the tool is to be used as a video monitor bank. The user will be able to configure the first bank and set which feed they want to display, then if they want add a second bank and select a different feed to display and so on. I have a site working with one such bank but want to add the functionality of being able to dynamically add to it.
The information I have read or seen on this is either to do with dynamically adding text boxes or adding content that is the same as the previous row. I would need each new row to have unique ID's for the IFRAMEs so that I can have different content in them.
I should also point out that everything must rely on client side scripting because it is a local application and will not be hosted on a server.
Any help or points in the right direction would be awsome.
5  3183  acoder 16,027
Recognized Expert Moderator MVP
Welcome to TSDN!
What code do you have for the first row?
To add a row, create a row (tr element), two cells (td elements) and use appendChild, e.g. - //get table
-
var table = document.getElementById("tableid");
-
// create row
-
var tr = document.createElement("tr");
-
// create cell
-
var td = document.createElement("td");
-
// create iframe using document.createElement("iframe");
-
// append to td
-
td.appendChild(iframe);
-
// append to row
-
tr.appendChild(td);
-
table.appendChild(tr);
-
To use a unique ID for each row, you could use the row number or create a variable which keeps the count.
Thanks for your help. Perhaps I am in over my head but I figure I will post what I have here and get your suggestions. This is what I am working with it displays best in Firefox and as this will only be used locally that will suffice for now. -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
<html>
-
<head>
-
<meta http-equiv="content-type"
-
content="text/html; charset=ISO-8859-1">
-
<title>DMP Codec Web Monitor</title>
-
<meta name="author" content="Liquidtouch">
-
<script type="text/javascript" language="JavaScript1.2"
-
src="stm31.js"></script>
-
</head>
-
<body style="color: white; background-color: black;"
-
alink="#0000fd" link="white" vlink="white">
-
<table
-
style="background-color: rgb(113, 106, 90); text-align: left; margin-left: auto; margin-right: auto; width: 1224px; height: 368px;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td style="background-color: rgb(73, 69, 58);">
-
<div style="text-align: center; font-family: Trebuchet MS;"><big><big><span
-
style="color: white;">Main Table</span><br>
-
</big></big></div>
-
<table
-
style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td style="background-color: rgb(113, 106, 90);">
-
<table
-
style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td
-
style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
-
colspan="3"><iframe name="mon1" src=""
-
hspace="50" vspace="50" align="middle"
-
height="260" scrolling="no" width="1110"></iframe></td>
-
<td style="width: 147px; vertical-align: top;">DHTML
-
MENU 1</td>
-
</tr>
-
<tr>
-
<td
-
style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
-
1</big></td>
-
<td
-
style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
-
2</big></td>
-
<td style="text-align: center; width: 368px;"><big><span
-
style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
-
<td></td>
-
</tr>
-
</tbody>
-
</table>
-
<div
-
style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
-
Bank 1<br>
-
</big></div>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
<table
-
style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td style="background-color: rgb(113, 106, 90);">
-
<table
-
style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td
-
style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
-
colspan="3"><iframe name="mon1" src=""
-
hspace="50" vspace="50" align="middle"
-
height="260" scrolling="no" width="1110"></iframe></td>
-
<td style="width: 147px; vertical-align: top;">DHTML
-
MENU 2</td>
-
</tr>
-
<tr>
-
<td
-
style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
-
1</big></td>
-
<td
-
style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
-
2</big></td>
-
<td style="text-align: center; width: 368px;"><big><span
-
style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
-
<td></td>
-
</tr>
-
</tbody>
-
</table>
-
<div
-
style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
-
Bank 2<br>
-
</big></div>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
<table
-
style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td style="background-color: rgb(113, 106, 90);">
-
<table
-
style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
-
border="0" cellpadding="2" cellspacing="2">
-
<tbody>
-
<tr>
-
<td
-
style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
-
colspan="3"><iframe name="mon1" src=""
-
hspace="50" vspace="50" align="middle"
-
height="260" scrolling="no" width="1110"></iframe></td>
-
<td style="width: 147px; vertical-align: top;">DHTML
-
MENU 3</td>
-
</tr>
-
<tr>
-
<td
-
style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
-
1</big></td>
-
<td
-
style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
-
2</big></td>
-
<td style="text-align: center; width: 368px;"><big><span
-
style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
-
<td></td>
-
</tr>
-
</tbody>
-
</table>
-
<div
-
style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
-
Bank 3<br>
-
</big></div>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
</body>
-
</html>
-
So what I am attempting/wanting to do is be able to dynamically add and remove each of the tables labeled "Monitor Bank 1 thru 3". If I could get all the formatting to work entirely done in Javascript would be nice, otherwise just a Java Script function to hide and unhide each bank would work as well. The menu that will appear beside each bank will be used to change the contents of the iframe in that bank. Hope this clarifys what I am trying to do.
Thanks again.
acoder 16,027
Recognized Expert Moderator MVP
How are you planning to add and remove rows? Using buttons? You can use one button for adding. For removing, you could have one button for each row or use a checkbox to specify which rows are selected and one button at the bottom for removal.
I thinking that I would have 1 button visible at the bottom of the last bank to add a new one. And then have a button at the top of each bank to delete it sort of like the standard "X" button in MS Windows applications.
That being said adding buttons to call the Javascript functions isn't too hard its writing the javascript and getting it to work thats my hardest challenge.
I have been playing with it a bit and I have got show/hide functions working using the following code. -
function hideBank2() {
-
if (document.getElementById) { // DOM3 = IE5, NS6
-
document.getElementById('bank2').style.visibility = 'hidden';
-
}
-
else {
-
if (document.layers) { // Netscape 4
-
document.hideShow.visibility = 'hidden';
-
}
-
else { // IE 4
-
document.all.hideShow.style.visibility = 'hidden';
-
}
-
}
-
}
-
function showBank2() {
-
if (document.getElementById) { // DOM3 = IE5, NS6
-
document.getElementById('bank2').style.visibility = 'visible';
-
}
-
else {
-
if (document.layers) { // Netscape 4
-
document.hideShow.visibility = 'visible';
-
}
-
else { // IE 4
-
document.all.hideShow.style.visibility = 'visible';
-
}
-
}
-
}
-
This works for the second bank and I just added more of these functions for the remainder.
This will work the only thing I don't like about the way it works is that if say I have 3 of the "<div>" 's showing and hide the middle one the bottom one does not move up into the place of the hidden one. Is there an easy fix for this?
Thanks again.
acoder 16,027
Recognized Expert Moderator MVP
In place of style.visibility = 'visible', use style.display='block' and in place of style.visibility = 'hidden', use style.display = 'none'.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Wolfgang Kreuzer |
last post by:
Hello all,
I have two tables - Projects and ProjectStruct
Table Projects contains master records of the projects, ProjectStruct
allows to define a project herarchie and contains the fields...
|
by: AdamG |
last post by:
I am trying hard for days now to add and delete rows to a table. I
could really use some help...
Each row contains two buttons (images) - 'add row' and 'delete row'.
When the user clicks add...
|
by: Harag |
last post by:
Hi all
I've not used Access 2k for a few years and can't remember how to get
information from one table that is not in several other tables.
I have 4 Tables in my DB
tbl 1 - TblMaster -...
|
by: DotNetJunky |
last post by:
I have built a control that runs an on-line help system. Depending on the
category you selected via dropdownlist, it goes out and gets the child
subcategories, and if there are any, adds a new...
|
by: matt |
last post by:
I've seen several posts that begin to address this problem, but have
not found a simple, elegant solution that will accomplish this goal.
The important part of this solution is that it must be...
| | |
by: anirban.anirbanju |
last post by:
hi there,
i've some serious problem to add rows dynamically in a table.
my table contains 5 cell.
| check | from_value | to_value | color_text | color_value |...
|
by: TB |
last post by:
Hi All:
I have this page where a rows / cells are programmatically added to to
table by pushing a button.
The rows contain a textbox and a associated button. What I want to is
to be able to...
|
by: Lewis Holmes |
last post by:
Hi
I have the following situation in one of my asp.net pages.
The user can add multiple table rows to a form by selecting a button. These
rows can contain asp.net controls. When this button is...
|
by: semomaniz |
last post by:
I have a form where i have created the form dynamically. First i manually added a panel control to the web page. Then i added another panel dynamically and inside this panel i created tables. I have...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
