how to programatically create table from arrays

Question

3.67/5 (3 votes)

See more:

i have two arrays named arrRoll[] and arrNames[]
say arrRoll={8001,8002} and arrNames={"AAAA","BBBB"}
which contain rollnumber and name of students in a school
now i want to generate folowing table in asp.net
inside of a div tag

<div id="tblCont">
    <table id="tbl1">
        <tr>
            <td>Checkbox</td>
            <td>Name</span></td>
        <tr>
            <td><input type="checkbox" name="cbRoll" value="8001" id="cbRoll8001" /></td>
            <td>AAAA</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbRoll" value="8002" id="cbRoll8002"/></td>
            <td>BBBB</td>
        </tr>
    </table>
</div>

on my aspx page i have

<div id="tblCont" runat="server">
</div>

now how do i insert the above table inside of this div tag programatically?
setting the value and id of the checkbox from the arrRoll and the innerText of table cell from arrNames

Posted 30-May-11 18:45pm

tihcra

Add a Solution

Comments

tihcra 31-May-11 0:49am

my main problem is how to insert table inside of a div programatically when it wasnt there in the original aspx page?
the second question is how to set the value,name, id attributes of checkbox?

Sergey Alexandrovich Kryukov 31-May-11 1:17am

I cannot understand this "how"? Just generate this HTML code and insert values. Use string format to do it... What's the problem?
--SA

tihcra 31-May-11 1:25am

u mean i have to generate this tables' html in a string and set it inside div by setting is innerHtml property? is this the only way? is there no other way to create tables in asp.net?

Sergey Alexandrovich Kryukov 31-May-11 18:33pm

Yes, in this case. Simplest way, in my opinion, good performance, too. Did you get the other ways in the other answers?
--SA

tihcra 31-May-11 23:10pm

ya the easiest way is to use HtmlTable control

3 solutions

Solution 3

now suppose i want to execute a js function whenever user changes the checkbox (either ticks or unticks it)
where should i add this function in asp.net page or the codebehind

Posted 30-May-11 19:36pm

tihcra

Comments

Kiran Sonawane 31-May-11 1:40am

U can use jquery for instance $("input:checkbox").click(function(){ alert(this.val();})

saxenaabhi6 31-May-11 1:45am

You can add event handler dynamically... See my updated answer above.

saxenaabhi6 31-May-11 1:51am

argg! my bad...
you asked for js function... add an 'onclick' attribute on server side if you want
though you can also add any server side event...

tihcra 31-May-11 1:55am

how do i add onclick attribute on server side. i want to do this only but dont know how

tihcra 31-May-11 1:49am

where will i add this jquery statement on my aspx page?

saxenaabhi6 31-May-11 1:54am

see my updated answer where i added attribute to call a js function.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

saxenaabhi6 · Accepted Answer · 2011-05-30T19:29:00

If you want to do it on server side i would suggest you to use -

1) asp:Table control, where you can loop thru your arrays at serverside and insert new tableRow and TableCell elements with whatever controls you want to place in your TableCell

<asp:Table runat="server" ID="asptable">

for(int i =0; i < ar1.Length; i++)
       {
           TableRow tr = new TableRow();
           TableCell c = new TableCell();
           CheckBox cb = new CheckBox();
           cb.Attributes.Add("onclick", "alert(\"added\")");
           cb.AutoPostBack = true;
           cb.CheckedChanged+=new EventHandler(cb_CheckedChanged);
           cb.ID = "cbRoll" + ar1[i];
           c.Controls.Add(cb);
           tr.Cells.Add(c);

           TableCell c2 = new TableCell();
           c2.Text = ar2[i];
           tr.Cells.Add(c2);

           asptable.Rows.Add(tr);
       }
   }

   protected void cb_CheckedChanged(object sender, EventArgs e)
   {
       CheckBox cb = (CheckBox)sender;
       // do what ever you want to do...
   }

2) or you can use HtmlTextWriterTag at server side to write your own html ( like write your own table tags and all other child elements in it)

if you doing it on client side

1) you can use jquery or normal java to append html elements in your div tag or table rows in your table etc...

Kiran Sonawane · Accepted Answer · 2011-05-30T19:33:00

You can add placeholder in div tag and then add table in placeholder. Check if the div/placeholder exist or not

private void CreateDynamicTable()
    {
        PlaceHolder1.Controls.Clear();
 
        int tblRows = arrNames.Length;
        int tblCols = 2;
        
        Table tbl = new Table();
        
        PlaceHolder1.Controls.Add(tbl);
        for (int i = 0; i < tblRows; i++)
        {
            TableRow tr = new TableRow();
            for (int j = 0; j< tblCols; j++)
            {
                TableCell tc = new TableCell();
                if( j ==0){
           CheckBox chk = new CheckBox();
       chk.id = "cbroll_" + arrRole[i]
tc.Controls.Add(chk);
}
else
{
Lable lbl = new Lable();
lbl.text = arrNames[i];
tc.Controls.Add(lbl);
}
                
              
                tc.Controls.Add(txtBox);
                // Add the TableCell to the TableRow
                tr.Cells.Add(tc);
            }
            // Add the TableRow to the Table
            tbl.Rows.Add(tr);
        }
 
    }

how to programatically create table from arrays

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0