Table structure within <span>

[Padrill]

I use the following code for adding more <INPUT> fields on a page when the user presses an Add button:

var iSubjects=1;

function addSubject() {
iSubjects += 1;
dyn.innerHTML += '<tr>' +
'<td>Subject:</td>' +
'<td><input type="text" size="28" name="txtSubject' + iSubjects + '"></td>' +
'<td>Grade obtained/ expected:</td>' +
'<td><input type="text" size="28" name="txtGrade' + iSubjects + '"></td>' +
'</tr>\n';
}

<table>
<tr>
<td>Subject:</td>
<td><input type="text" size="28" name="txtSubject1"></td>
<td>Grade obtained/ expected:</td>
<td><input type="text" size="28" name="txtSubGrade1"></td>
</tr>
<span id="dyn" style="position:relative;">
</span>
</table>

And this is how the page looks after several clicks of the Add Button:

Subject:[field] Grade obtained/ expected:[field]
Subject:[field] Grade obtained/ expected:[field] Subject:[Field] Grade obtained/ expected:[Field] Subject:[Field] Grade obtained/ expected: [Field]

The table structure and tags seem to be ignored. Does anyone know why this is happening?

[DrDaMour]

i would think that your span is not being interpreted as part of the table tags, but just within the table tags. You shoudl probably make the whole table the span, and do a:


innerHTML = "<table>.......</table>"

of course you'll have to figure out what the html was before you change it to add a new row

[gil davis]

Proper HTML structure does not allow for nesting a SPAN inside a TABLE or a TBODY. You could place the SPAN inside a TD or TH, but that would not be the same effect.

DrDaMour's suggestion of doing the whole table over is probably the easiest way to escape from your dilemma. Just make the TBODY tag the container rather than the SPAN:<table>
<tbody id="dyn">
<tr>
<td>Subject:</td>
<td><input type="text" size="28" name="txtSubject1"></td>
<td>Grade obtained/ expected:</td>
<td><input type="text" size="28" name="txtSubGrade1"></td>
</tr>
</tbody>
</table>The TBODY is implied whether you code it or not, so in this case, it is required.

You should change your fuction to this:function addSubject() {
iSubjects += 1; // or iSubjects++
document.getElementById("dyn").innerHTML += '<tr>' +
'<td>Subject:</td>' +
'<td><input type="text" size="28" name="txtSubject' + iSubjects + '"></td>' +
'<td>Grade obtained/ expected:</td>' +
'<td><input type="text" size="28" name="txtGrade' + iSubjects + '"></td>' +
'</tr>';
}to make it compatible with NS 6, Mozilla and Opera.

[Padrill]

With this implementation I get a runtime error:

an exception of type 'Object doesn't support this property or method' was not handled

and it highlights the document.getElementByID...line

I'm using MDE 6.0

[gil davis]

I'm using MDE 6.0I am not familiar with that. However, this mod should work for you:

function addSubject() {
iSubjects += 1; // or iSubjects++
tmp = '<tr>' +
'<td>Subject:</td>' +
'<td><input type="text" size="28" name="txtSubject' + iSubjects + '"></td>' +
'<td>Grade obtained/ expected:</td>' +
'<td><input type="text" size="28" name="txtGrade' + iSubjects + '"></td>' +
'</tr>';
if (document.getElementById)
{document.getElementById("dyn").innerHTML += tmp;}
else
{dyn.innerHTML += tmp;}
}unless that browser does not support TBODY tag.

[Padrill]

I think it's both getElementByID and TBODY as it doesn't work with any combination.

A few more questions: 1) Would it be possible to enter Javascript code into innerHTML and 2) Is it possible to have nested spans?

[gil davis]

I think it's bothOuch!
enter Javascript code into innerHTMLYes, just enclose it in a script tag.
have nested spansYes, but I can't imagine how that would help.

Try this:function addSubject() {
iSubjects += 1; // or iSubjects++
tmp = '<tr>' +
'<td>Subject:</td>' +
'<td><input type="text" size="28" name="txtSubject' + iSubjects + '"></td>' +
'<td>Grade obtained/ expected:</td>' +
'<td><input type="text" size="28" name="txtGrade' + iSubjects + '"></td>' +
'</tr>';
if (document.getElementById)
{tmp1 = document.getElementById("dyn").innerHTML;
document.getElementById("dyn").innerHTML = tmp1.substr(9, tmp1.length - 17) + tmp;}
else
{dyn.innerHTML += tmp;}
}
...
<table id="dyn">
<tr>
...
</tr>
</table>Notice the TBODY tag is gone.

[Padrill]

Brilliant thanx!

Regarding the javaScript into <span> I did enclose it in a <script> tag - it's a call to a function in an external .js file - but doesn't work.

Why am I doing this? I need loads of drop down menus for dates e.g. [Day][Month][Year] so instead of repeating the HTML code for <SELECT> I created a function which dynamically creates the drop down menus - saves lines of code. And when I do:

dyn.innerHTML += .... + '<script language="javascript">dropDownMenu();</scr' + 'ipt>';
it doesn't work.

Notice that I have to split </script> up otherwise it gets confused since the above line is within a script tag itself. Hope I'm explaining myself clear.

[Padrill]

I tried the simple:

<head>
<script>
function test() {
dyn.innerHTML = "<script>document.write('OK')</scr"+"ipt>";
}
</script>
</head>
<body>
<input type="button" value="Test" onMouseUp="test();">
<span id="dyn"></span>
</body>

Doesn't work.

[gil davis]

Doesn't work.I can't make it work, either. IE seems to ignore it.

[Padrill]

If only I could see the resulting page source (the one that get fed to the browser) things might be easier.

[gil davis]

function test() {
dyn.innerHTML = "<script>document.write('OK')</scr"+"ipt>";
alert(dyn.innerHTML);
}I was seeing nothing in the alert until I put some text in front of the script tag, but it still didn't perform the script.

[Padrill]

alert(dyn.innerHTML);

Duh...silly me!

HOWEVER:)... I can see the script tags as they're supposed to be but it doesn't execute. I suspect it either has to do with the order the HTML document is being executed or <script> within span is not supported.

I guess I have no luck in writing shorter pages:mad: I will have to repeat the code for the <SELECT> menus n times. (where n-> +inf):) :) :)