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  3209  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.visibilit y = 'visible', use style.display=' block' and in place of style.visibilit y = '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
PrjStructId, ProjectId, PrjStructName, ..., ParentId
PrjStructParent contains a reference to the parent or to itselves if
record is top-level-record for a project.
|
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 row within a specific cell/row, the index of
that row should be passed to a function that creates a new row using
that index (the new row should be added directly below the row where
the user clicked. The new row should contain all of the cells and...
|
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 - 220k rows <<< note size
tbl 2 - tblA - 10k rows
tbl 3 - tblB - 8k rows
|
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 dropdownlist to the screen
for selection. This continues until there are no children, and then it
checks for a help article list based on that last selection and displays
actual articles for display.
Adding the controls and getting everything...
|
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 completely
dynamic - I have over 40 different categories of devices, each with
different fields, and each search will return only one category. I
have no knowledge of the number or datatype of these field names
beforehand and must use the sp to...
| | |
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 add the content of any textbox to a global variable (and
a related session variable) when pushing the associate button.
However whenever I push the button(s) apparently the session variable
|
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 selected, the row is
added using JavaScript. The script uses cloneNode to clone a hidden template
row and all of its children and then adds the new row to the table, updates
all of the child control Ids and sets visibility etc.
The hidden...
|
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 set text boxes and labels inside the table rows. I then added a button. All of these are done through code.
The problem that i am having is i can get the value from a text box with resides inside the first panel (out side of panel that is...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
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 we have to send another system
|
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
