Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dyanmic Table Creation

Status
Not open for further replies.
manishblr1

manishblr1

Programmer
Joined
Dec 20, 2010
Messages
20
Location
US
Hi All,
My requirements are
1. Screen where user enters the no of rows(no of columns:4 Sl no , Start Date(SD), End Date(ED), Label)
2. user clicks on button to create the table (dynamic)
4. Si No should be done through function .
5. SD/ED/Label should be free text.
6. Validate StartDate/ EndDate .(only Date or time should be entered.
7. no validation for label column.

Should be done using dhtml/javascript

Thanks in Advance.
 
Sort by date Sort by votes
Hi

You say you are programmer. Then certainly you already put together some code for that. Show it, then we will correct it.

Please note that we will not do your job. We are here to help each other, not to work for free.


Feherke.
 
Upvote 0 Downvote
I am sorry for not posting my code..

Here is my code.
////code starts
function createTable(rowCount, colCount, srcHolder)
{
document.getElementById('dynamic_tp_table_heading').style.display = "block";
document.getElementById('dynamic_tp_table').style.display = "block";
if(document.getElementById('time_period').value!="Shift"&& document.getElementById('time_period').value!="Select Time Period")
rowCount=1;
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 = 320;
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.innerHTML = "<input type='text' value='' id='test' size='16' >";
tmpCell = null;
}
tmpRow = null;
}
}
}

//code ends

Thanks in advance.
 
Upvote 0 Downvote
Hi

Better. But incomplete.
[ul]
[li]We not know what elements are those with dynamic_tp_table_heading, dynamic_tp_table and time_period [tt]id[/tt][/li]
[li]We not know what IsValidNumber() function does[/li]
[li]canHaveChildren is Explorer-only, so your code will not work in standard-compliant browsers[/li]
[li]We not know what the AppendRow() function does[/li]
[li]We not know what the AppendCell() function does[/li]
[/ul]
Reducing your function to what we know, this works for me :
Code: 
[b]function[/b] [COLOR=darkgoldenrod]createTable[/color][teal]([/teal]rowCount[teal],[/teal] colCount[teal],[/teal] srcHolder[teal])[/teal]
[teal]{[/teal]
  srcHolder[teal].[/teal]innerHTML [teal]=[/teal] [green][i]""[/i][/green][teal];[/teal]
  [b]var[/b] srcTable [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]"table"[/i][/green][teal]);[/teal]
  srcTable[teal].[/teal]border [teal]=[/teal] [purple]1[/purple][teal];[/teal]
  srcTable[teal].[/teal]borderColor [teal]=[/teal] [green][i]"Black"[/i][/green][teal];[/teal]
  srcTable[teal].[/teal]width [teal]=[/teal] [purple]320[/purple][teal];[/teal]
  [b]var[/b] tmpRow [teal]=[/teal] [b]null[/b][teal];[/teal]
  [b]var[/b] tmpCell [teal]=[/teal] [b]null[/b][teal];[/teal]
  srcHolder[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]srcTable[teal]);[/teal]
  [b]for[/b] [teal]([/teal]i[teal]=[/teal][purple]0[/purple][teal];[/teal] i[teal]<[/teal]rowCount[teal];[/teal] i[teal]++)[/teal] [teal]{[/teal]
    tmpRow [teal]=[/teal] srcTable[teal].[/teal][COLOR=darkgoldenrod]insertRow[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
    [b]for[/b] [teal]([/teal]j[teal]=[/teal][purple]0[/purple][teal];[/teal] j[teal]<[/teal]colCount[teal];[/teal] j[teal]++)[/teal] [teal]{[/teal]
      tmpCell [teal]=[/teal] tmpRow[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
      tmpCell[teal].[/teal]innerHTML [teal]=[/teal] [green][i]"<input type='text' value='' id='test' size='16' >"[/i][/green][teal];[/teal]
      tmpCell [teal]=[/teal] [b]null[/b][teal];[/teal]
    [teal]}[/teal]
    tmpRow [teal]=[/teal] [b]null[/b][teal];[/teal]
  [teal]}[/teal]
[teal]}[/teal]
Regarding your 4 column requirement, I would change my above function like this :
Code: 
[b]function[/b] [COLOR=darkgoldenrod]createTable[/color][teal]([/teal]rowCount[teal],[/teal] srcHolder[teal])[/teal]
[teal]{[/teal]
  srcHolder[teal].[/teal]innerHTML [teal]=[/teal] [green][i]""[/i][/green][teal];[/teal]
  [b]var[/b] srcTable [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]"table"[/i][/green][teal]);[/teal]
  srcTable[teal].[/teal]border [teal]=[/teal] [purple]1[/purple][teal];[/teal]
  srcTable[teal].[/teal]borderColor [teal]=[/teal] [green][i]"Black"[/i][/green][teal];[/teal]
  srcTable[teal].[/teal]width [teal]=[/teal] [purple]320[/purple][teal];[/teal]
  [b]var[/b] tmpRow [teal]=[/teal] [b]null[/b][teal];[/teal]
  [b]var[/b] tmpCell [teal]=[/teal] [b]null[/b][teal];[/teal]
  srcHolder[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]srcTable[teal]);[/teal]
  [b]for[/b] [teal]([/teal]i[teal]=[/teal][purple]0[/purple][teal];[/teal] i[teal]<[/teal]rowCount[teal];[/teal] i[teal]++)[/teal] [teal]{[/teal]
    tmpRow [teal]=[/teal] srcTable[teal].[/teal][COLOR=darkgoldenrod]insertRow[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
    [b]for[/b] [teal]([/teal]j[teal]=[/teal][purple]0[/purple][teal];[/teal] j[teal]<[/teal][purple]4[/purple][teal];[/teal] j[teal]++)[/teal] [teal]{[/teal]
      tmpCell [teal]=[/teal] tmpRow[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
      [b]switch[/b] [teal]([/teal]j[teal])[/teal] [teal]{[/teal]
        [b]case[/b] [purple]0[/purple][teal]:[/teal] tmpCell[teal].[/teal]innerHTML [teal]=[/teal] i[teal];[/teal] [b]break[/b]
        [b]case[/b] [purple]1[/purple][teal]:[/teal] tmpCell[teal].[/teal]innerHTML [teal]=[/teal] [green][i]"<input type='text' name='SD["[/i][/green][teal]+[/teal]i[teal]+[/teal][green][i]"]' >"[/i][/green][teal];[/teal] [b]break[/b]
        [b]case[/b] [purple]2[/purple][teal]:[/teal] tmpCell[teal].[/teal]innerHTML [teal]=[/teal] [green][i]"<input type='text' name='ED["[/i][/green][teal]+[/teal]i[teal]+[/teal][green][i]"]' >"[/i][/green][teal];[/teal] [b]break[/b]
        [b]case[/b] [purple]3[/purple][teal]:[/teal] tmpCell[teal].[/teal]innerHTML [teal]=[/teal] [green][i]"<input type='text' name='label["[/i][/green][teal]+[/teal]i[teal]+[/teal][green][i]"]' >"[/i][/green][teal];[/teal] [b]break[/b]
      [teal]}[/teal]
    [teal]}[/teal]
  [teal]}[/teal]
[teal]}[/teal]
Regarding the validation, tell us when you want the validation to happen.

By the way, personally I hate this approach. The user has to know from the beginning the number of rows. Is easier for the user to get a table with one row and a button to add one more row. The he can press the button when needed, as many times needed.


Feherke.
 
Upvote 0 Downvote
Hi Feherke,

I need to validate the start date / end date fields on click of submit button.

Here is my complete code.

//code start
<HTML>
<HEAD>
<link href="C:/Documents and Settings/admin/Desktop/Content.css" rel="stylesheet" type="text/css">
<script language="javascript" src="/XMII/CM/Testing_AA/Dashboard/JS/UtilityFunctions.js" ></script>
</HEAD>
<script language="JavaScript">

//function to allow only number in No of Periods Field
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;
}

//function to display No of Periods based on Time Period Selected from Drop Down
function NoOfPeriods()
{
if(document.getElementById('time_period').value =="Shift")
{
document.getElementById('no_of_periods').value= 3;
document.getElementById('no_of_periods').disabled=false;
}
else if(document.getElementById('time_period').value =="Day")
{
document.getElementById('no_of_periods').value= 24;
document.getElementById('no_of_periods').disabled=true;
}
else if(document.getElementById('time_period').value =="Week")
{
document.getElementById('no_of_periods').value= 7;
document.getElementById('no_of_periods').disabled=true;
}
else if(document.getElementById('time_period').value =="Month")
{
document.getElementById('no_of_periods').value= 1;
document.getElementById('no_of_periods').disabled=true;
}
else if(document.getElementById('time_period').value =="Year")
{
document.getElementById('no_of_periods').value= 1;
document.getElementById('no_of_periods').disabled=true;
}
else if(document.getElementById('time_period').value =="Select Time Period")
{
document.getElementById('no_of_periods').value= "";
document.getElementById('no_of_periods').disabled=false;
document.getElementById('no_time_period_label').style.display = "none";
}
document.getElementById('dynamic_tp_table_heading').style.display = "none";
document.getElementById('dynamic_tp_table').style.display = "none";
}

function addNewTP()
{
if(document.getElementById('time_period').value=="Select Time Period")
alert("Please select a Time Period.");
else
{
document.getElementById('btn_tp_Edit').disabled="true";
document.getElementById('btn_tp_Delete').disabled="true";
document.getElementById('no_time_period_label').style.display = "block";
}

}

function editSubmit()
{
alert("this is edit section");
}

// dynamic table function

//var DEFAULT_HEIGHT = 100;
function createTable(rowCount, colCount, srcHolder)
{
document.getElementById('edit_submit_reset_btns_label').style.display = "block";
document.getElementById('dynamic_tp_table_heading').style.display = "block";
document.getElementById('dynamic_tp_table').style.display = "block";
if(document.getElementById('time_period').value!="Shift"&& document.getElementById('time_period').value!="Select Time Period")
rowCount=1;
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 = 320;
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.innerHTML = "<input type='text' value='' id='test' size='16' >";
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;
}
}
// end of dynamic table function

</script>

<!-- To avoid scrollbar at the right side: style="overflow: hidden" -->
<BODY style="overflow: hidden">
<!-- Row Definition -->
<form name="FilterPage">
<TABLE cellpadding="0" cellspacing="0" width="792px" height="100%">
<!-- ========================================================================-->
<!-- Sub-Title -->
<!-- ========================================================================-->

<TR><TD class="ContentSubTitleBar">
<SPAN class="ContentSubTitle">Production Calendar Configuration Screen</SPAN>
</TD></TR>

<TR id="Section_2" style="display: inline">
<TD class="ContentHeaderSection" valign="top" align="left">
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td>
<TABLE class="Content" WIDTH="780px" cellspacing="0" cellpadding="5" bordercolor="#FFFFFF" border="1">


<TR id="time_period_label" >
<TD WIDTH="170px" ><label>Time Period</label><font color="red">*</font></TD>
<TD WIDTH="170px">
<select id="time_period" style="width:136px" onchange="NoOfPeriods();">
<option value="Select Time Period"> Select Time Period </option>
<option value="Shift"> Shift </option>
<option value="Day"> Day </option>
<option value="Week"> Week </option>
<option value="Month"> Month </option>
<option value="Year"> Year </option>
</select>
</TD>
<TD colspan="2">
<TABLE border="0">
<TR>
<TD >
<a class="boldbuttons" id="btn_tp_Add" onclick="javascript:addNewTP();"><span> Add </span></a>
</TD>
<TD >
<a class="boldbuttons" id="btn_tp_Edit" onclick="javascript:editTP();"><span> Edit </span></a>
</TD>
<TD>
<a class="boldbuttons" id="btn_tp_Delete" onclick="javascript:deleteTP();" ><span> Delete </span></a>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR id="no_time_period_label" style="display:none">
<TD WIDTH="170px"><label>No Of Periods</label><font color="red">*</font></TD>
<TD WIDTH="170px">
<TABLE border="0">
<TR>
<TD>
<input type="text" id="no_of_periods" value="" onkeypress="return onlyNumbers();"> </TD>
<TD>
<a class="boldbuttons" id="btn_tp_Edit" onclick="javascript:createTable(no_of_periods.value,3,tpTable);"><span>Table </span></a></TD>
</TR>
</TABLE>
</TD>


</TR>
<TR id="dynamic_tp_table_heading" style="display:none">
<TD colspan="2" align="center">
<TABLE border= "0">
</TR>
<TD width="100" align="center" bgcolor="#BAD2E8" ><label>Start Date</label><font color="red">*</font></TD>
<TD width="100" align="center" bgcolor="#BAD2E8" ><label>End Date</label><font color="red">*</font></TD>
<TD width="100" align="center" bgcolor="#BAD2E8" ><label>Label</label><font color="red">*</font></TD>
</TR>
<TR id="dynamic_tp_table" style="display:none"><TD colspan="3"><div id="tpTable"></div>
</TD></TR>
</TABLE>
</TD>
</TR>


<TR id="edit_submit_reset_btns_label" style="display:none">
<TD ><a class="boldbuttons" id="btn_edit_Submit" onclick="javascript:editSubmit();"><span>Submit</span></a>
</TD>
<TD colspan="3"><font color="red">*</font> Mandatory Fields. </TD>
</TR>
</TABLE>
</td>
</tr>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>

//code ends

Thanks for the replies.
 
Upvote 0 Downvote
Hi

Next time please post your code between [tt][ignore]
Code: 
[/ignore][/tt] and [tt][ignore]
[/ignore][/tt] TGML tags.

For validation you need a function like this :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]validate[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] ok[teal]=[/teal][b]true[/b]
  [b]for[/b] [teal]([/teal]i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]elements[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]what[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]name[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal][fuchsia]/^[ES]D\[\d+\]/[/fuchsia][teal]))[/teal]
      [b]if[/b] [teal](![/teal]what[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]value[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal][fuchsia]/^\d{4}-\d{2}-\d{2}$/[/fuchsia][teal]))[/teal]
        ok[teal]=[/teal][b]false[/b]

  [b]return[/b] ok
[teal]}[/teal]
and call it like this :
HTML: 
[b]<form[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"FilterPage"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"return validate(this)"[/i][/green][b]>[/b]
That works for me together with the modified createTable() function I posted yesterday.

Note that you not specified what kind of validation you want, so my function just tests if the text in the [tt]input[/tt] is in ISO date format : 2010-12-22.


Feherke.
 
Upvote 0 Downvote
validation :

Start date/end date field will have time with am/pm when shift is selected.

Start date/end date field will have date with dd/mm/yyyy when day/week/month/year is selected.

Thanks for replying.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
902
coldbohemia
coldbohemia
mulawa1
  • Locked
  • Question Question
JavaScript game creation for beginners
Replies
3
Views
455
marcosuve
marcosuve
TheLazyPig
  • Locked
  • Question Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
316
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top