Runtime creation of tables in Javascript?
I my application "When a button is clicked it should create a new text开发者_如何学运维 field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.
<html>
<script type="text/javascript" language="javascript">
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"textfield\"";
newtd.innerHtml=output;
newtr.appendChild(newtd);
function create_row()
{
document.getElementById("table1").appendChild(newtr);
}
</script>
<body>
<table id="table1">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</table>
</body>
</html>
I am using IE7.
In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.
So you should modify your script to append TRs into the TBODY
Few remarks about your code:
- You need to properly close tags:
var output="<input type=\"textfield\""is not valid - There's no input
type="textfield"defined - The property to set the html of a given DOM element is called
innerHTMLand notinnerHtml - You need to create a new
trelement every time the button is clicked, so this should be inside thecreate_rowfunction - You have a typo in your HTML:
<input type-"textfield" name="tfield">. This should be changed to<input type="text" name="tfield" /> - You are missing a
headsection in your document
I've tried cleaning your code a bit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('table1').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</table>
</body>
</html>
UPDATE:
As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('tablebody').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tbody id="tablebody">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
- You are missing a head tag.
- The script should be in the head tag.
- The html code for the input element is missing a closing bracket.
- The type "textfield" does not exist.
- The code only works once as you create the elements outside the function.
- The method is innerHTML, not innerHtml.
- You have to add the row to the tbody element, not the table itself.
I have tested this in Firefox 3 and IE 8 and it works:
<html>
<head>
<script type="text/javascript">
function create_row() {
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"text\">";
newtd.innerHTML=output;
newtr.appendChild(newtd);
document.getElementById("table1body").appendChild(newtr);
}
</script>
</head>
<body>
<table>
<tbody id="table1body">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</tbody>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论