| The easiest way |
| Robbe Morris replied on Thursday, August 17, 2006 6:42 AM |
|
is to set the .innerHtml property of a DIV tag with the contents of your html. You just concatenate strings or stuff the strings in an array and then call the .Join() method.
You can rip that part of the code out of this sample:
http://www.eggheadcafe.com/articles/20020922.asp |
| Reply Reply Using Power Editor |
|
| Robbe has been a Microsoft MVP in C# since 2004. He is also the co-founder of EggHeadCafe.com which provides .NET articles, book reviews, software reviews, and software download and purchase advice. |
|
| |
Rank |
Winnings |
Points |
| November |
0 |
$0.00 |
0 |
| October |
0 |
$0.00 |
0 |
|
|
|
|
|
|
| Introduction to Dynamic HTML |
| J S replied on Thursday, August 17, 2006 6:58 AM |
|
Check the code and change it according to u needs:
http://www.dynamicdrive.com/forums/showthread.php?t=175
samples :
http://www.oreillynet.com/pub/a/javascript/2003/05/06/dannygoodman.html
http://msdn.microsoft.com/workshop/author/dhtml/dhtml.asp |
| Reply Reply Using Power Editor |
| |
| |
Rank |
Winnings |
Points |
| November |
0 |
$0.00 |
0 |
| October |
0 |
$0.00 |
0 |
|
|
|
|
|
|
| This is one of the best HTML DOM References |
| Peter Bromberg replied on Thursday, August 17, 2006 7:16 AM |
|
you can find. It has "just enough" info:
http://www.w3schools.com/htmldom/dom_reference.asp |
| Reply Reply Using Power Editor |
| Peter Bromberg is a C# MVP, MCP, and .NET expert who has worked in banking, financial and telephony for over 20 years. Pete focuses exclusively on the .NET Platform, and currently develops SOA and other .NET applications for a Fortune 500 clientele. Peter enjoys producing digital photo collage with Maya,playing jazz flute, the beach, and fine wines. You can view Peter's UnBlog and IttyUrl sites.
Please post questions at forums, not via email! |  |
|
| |
Rank |
Winnings |
Points |
| November |
0 |
$0.00 |
0 |
| October |
0 |
$0.00 |
0 |
|
|
|
|
|
|
| Creating Table Dynamically using Javascript |
Chad . provided a  rated reply on Thursday, August 17, 2006 11:53 AM |
|
Hi Jeccinta,
You can create the table dynamically using the methods exposed by the DOM model.
HTML Code along with the Javascript depicts the same.
Here we are using three Javascript methods to create the table dynamically.
1)CreateTable(rowCount, colCount, srcHolder)
This method is the base method and will trigger the creation of the table (for e.g. on the click event of a button etc).
Thie method expects three parameters
rowCount(No of Rows the table should have.),
colCount(No of cells each row of the table should have.)
srcHolder(Another HTML element like a DIV which should hold the Table)
First we clear the contents of the srcHolder by setting the innerHTML property to blank.
Then we dynamically create the table element using the document.createElement(<TAG_NAME>) method which returns a reference to the element created (here it will be a table element.)
Then we call the AppendRow method iterating rowCount times.
2)AppendRow(srcTable)
This is the method where we create the table row on the fly and add it to the newly created table as specified above.
This metod returns a reference to newly created table row.
Then we call the AppendCell method iterating colCount times.
3)AppendCell(srcRow)
This is the method where we create the table cell on the fly and add it to the newly created table row as specified above.
This metod returns a reference to newly created table cell.
Thiw is how the table will be created.
Also, the Javascript variables DEFAULT_WIDTH and DEFAULT_HEIGHT are used to specify the default height and width of the table.
You can tweak the code above by passing the Height and Width of the table as parameters to the CreateTable method.
In case the code below is not clear, let me know, I shall furthe clarify the same.
[CODE]
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Dynamic Table</title>
<meta name="Author" content="Chandra Vedantham">
<meta name="Description" content="Html Page">
<script>
var DEFAULT_WIDTH = 100;
var DEFAULT_HEIGHT = 100;
function CreateTable(rowCount, colCount, srcHolder)
{
if(IsValidNumber(rowCount) && IsValidNumber(colCount) && (srcHolder != null) && (srcHolder.canHaveChildren))
{
srcHolder.innerHTML = "";
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<rowCount; i++)
{
tmpRow = AppendRow(srcTable)
for(j=0; j<colCount; j++)
{
tmpCell = AppendCell(tmpRow);
tmpCell.innerText = j;
tmpCell = null;
}
tmpRow = null;
}
}
}
function AppendRow(srcTable)
{
if(srcTable != null)
{
return srcTable.insertRow();
}
else
{
alert("Error while creating table. Cause: Container Table is null!");
}
}
function AppendCell(srcRow)
{
if(srcRow != null)
{
return srcRow.insertCell();
}
else
{
alert("Error while creating table. Cause: Container row is null!");
}
}
function IsValidNumber(ipNum)
{
if(isNaN(ipNum))
{
alert("Invalid Number!");
return false;
}
else if(ipNum < 1)
{
alert("Number should be greater than 0!");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>No. Of Rows: </td>
<td><input type=text name=txtRows value=1 /></td>
</tr>
<tr>
<td>No. Of Columns: </td>
<td><input type=text name=txtCols value=1 /> </td>
</tr>
<tr>
<td colspan=2 align=right><input type=button name=cmdCreate value="Create Table" onClick="CreateTable(txtRows.value, txtCols.value, divHolder)" /></td>
</tr>
</table>
<div id=divHolder>
</div>
</body>
</html>
[/CODE] |
| Reply Reply Using Power Editor |
| |
| |
Rank |
Winnings |
Points |
| November |
0 |
$0.00 |
0 |
| October |
0 |
$0.00 |
0 |
|
|
|
|
|
|
| How to write my own text into the cells |
| jeccinta jeccinta replied on Friday, August 18, 2006 12:59 AM |
|
Hi,
The code u have sent is very useful.BUt in that we get the numbers as 0,1,2,inside the cells.But in my application user will write his own values inside the cells...How to do this??
Very very urgent..Thanx in advance... |
| Reply Reply Using Power Editor |
| |
| |
Rank |
Winnings |
Points |
| November |
0 |
$0.00 |
0 |
| October |
0 |
$0.00 |
0 |
|
|
|
|
|
|
| user text in dynamic table cells |
| mv ark provided a rated reply on Friday, August 18, 2006 4:46 AM |
|
Here is the code to add a text boxes to the dynamic table cells, where the user can enter his own values,
<script>
function start() {
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
// creating all cells
for(var j = 0; j < 2; j++) {
// creates a <tr> element
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// creates a <td> element
mycurrent_cell = document.createElement("td");
// creates a text node
mycurrent_txtbox = document.createElement("input");
mycurrent_txtbox.setAttribute('type',"text");
//currenttext = document.createTextNode("cell is row "+j+", column "+i);
// appends the text node we created into the cell <td>
//mycurrent_cell.appendChild(currenttext);
mycurrent_cell.appendChild(mycurrent_txtbox);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "2");
}
</script>
</head>
<body onload="start()">
</body>
Also check these links -
http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ |
| Reply Reply Using Power Editor |
| M.V. 'Anil' Radhakrishna is a seasoned developer and a Microsoft MVP (ASP/ASP.NET). He blogs his little discoveries and Web development tips, tricks and trivia quite regularly. You can find some of his unusual code samples & snippets at his Code Gallery. |
| |
Rank |
Winnings |
Points |
| November |
6 |
$48.00 |
119 |
| October |
4 |
$66.00 |
225 |
|
|
|
|
|
|
|