How to add object as table..

Question

4.00/5 (1 vote)

See more:

Hi to all,

I have adding objects dynamically but now i change the code and want to add same fields as my table have but when i am going to create it create 7 objects with same type. like 7 text box.
i have changes lots of time but could not able to get exact all objects as my table( textbox, checkbox, dropdown, textarea )

Here is my code..

If any of you find any solution then pls let me know.

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script>
        var names = ["sl[]","in_terval[]","date[]","cities_visited[]","reimbursement_type[]","remarks[]","cities_visited[]","bills[]"];
        function add(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;

            for (var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                var newentry = document.createElement('textarea');
                newentry.name = names[i];
                newentry.type = "text";
                newcell.appendChild(newentry);
            }
        }
    </script>
</head>
<body>
    <form method="post" action="add-dynamic8-send.php">
    <table id="table">
    <tr><th>Sl.No.</th><th>In Travel</th><th>Date</th><th>Cities Visited</th><th>Reimbursement Type</th><th>Remarks</th><th>Bills</th></tr>
    <tr>
    <td><input type="text" name="sl[]" id="sl" /> </td>
    <td><input type="checkbox" name="in_terval[]" value="in_terval" /></td>
    <td><input id="date" name="date[]" type="text" style=" width:100px;"/></td>
    <td><input id="cities_visited" name="cities_visited[]" type="text" style="width:80;"/></td>
    <td><select id="reimbursement_type" name="reimbursement_type[]" >
               <option selected="selected" value="">--None--</option>
               <option value="DA">DA</option>
               <option value="Ticket">Ticket</option>
               <option value="Misc">Misc </option>
               </select></td>
    <td><textarea id="remarks" name="remarks[]" type="text" style="width:220px; height:40px; "></textarea></td>
    <td><input type="checkbox" name="bills[]" value="bills" /></td>

<!--
    <td><textarea name = "job[]"></textarea></td>
    <td><textarea name = "comment[]"></textarea></td>-->
    <tr>
    </table>
    <input type ="button" value="add entry" onclick="add('table')"/>
    <input type ="submit" id="submit" name="submit" value="submit"/>
</form>

</body>
</html>

Thanks to all..

Posted 28-Aug-12 2:03am

Rajeshkrathor

Updated 29-Aug-12 19:14pm

v2

Add a Solution

Comments

enhzflep 28-Aug-12 13:17pm

Just looking in the for loop - I've never heard of a 'text' element type before. I have a feeling you may not quite understand the way to add a text node to an element. It wouldn't surprise me if this (and other potential oversights like it) is the source of your problems.

Take the following html -
<a id='someId' href='someLink'>Some Text</a>

Then the way to do it would be to create an anchor element, set it's two attributes, attach it's child (the text it displays) This would be done like so:

var anchor = document.createElement('a');
anchor.setAttribute('href', 'someLink');
anchor.setAttribute('id', 'someId');
mTxt = document.createTextNode('Some Text');
anchor.appendChild(mTxt);

[no name] 29-Aug-12 0:21am

Thanks enhzflep..
But did you get what my requirement is?
Will your code help me to get that..
i didnot seem it will..

Thanks

Darkness_07 29-Aug-12 6:20am

Is this "text"; is name of textbox or a an id?
(newentry.type = "text";) where did you get this "text"?

[no name] 30-Aug-12 0:20am

Hi darkness_07
name of text taken as array.
thanks

2 solutions

Solution 1

You can make use of cloneNode property to avoid extra efforts. For example -

JavaScript

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
// "Clone" the tr element i.e. save a copy all of its attributes and values
// parameter value TRUE means copy all child nodes and its attributes recursively
// parameter value FALSE means just copy the current object and all of its attributes and values
var row = table.rows[rowCount-1].cloneNode(true);
table.appendChild(row);

Haven't tested this piece of code but I have used this before.

Hope this will help you out..

Regards,
Niral Soni

Posted 28-Aug-12 7:52am

Niral Soni

Updated 28-Aug-12 21:30pm

v2

Comments

[no name] 29-Aug-12 1:29am

Thanks Niral Soni,

But this also not working..

Niral Soni 29-Aug-12 3:30am

I have updated the solution, rather then clone the actual property is cloneNode.

[no name] 30-Aug-12 1:18am

Doing Nothing Niral Soni.
thanks

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)

Rajeshkrathor · Accepted Answer · 2012-08-29T20:33:00

C#

var RowCount = 1;
var stat = false;
function AddRow() {
      var LastRow="<TR><TD align=center><INPUT TYPE='text' name='Slno_"+RowCount+"' id='Slno_"+RowCount+"' size=1></TD><TD align=center><INPUT type='checkbox' name='in_travel_"+RowCount+"' ID='in_travel_"+RowCount+"' value='in_terval'  size=10></TD><TD align=center><INPUT style='text-align:right' type='TEXT' name='date_"+RowCount+"' ID='date_"+RowCount+"' size=10></TD><TD align=center><textArea name='cities_visit_"+RowCount+"' ID='cities_visit_"+RowCount+"' cols=10></textArea></TD><td align=center><select id='reimbursement_"+RowCount+"' name='reimbursement_"+RowCount+"'><option selected='selected' value='None'>--None--</option><option value='DA'>DA</option><option value='Ticket'>Ticket</option><option value='Misc'>Misc</option></select></td><TD align=center><textArea name='Remark_"+RowCount+"' ID='Remark_"+RowCount+"' cols=10></textArea></TD><TD align=center><INPUT style='text-align:right' type='checkbox' name='bills_"+RowCount+"' ID='bills_"+RowCount+"' size=10></TD><TD align=center><INPUT style='text-align:right' type='submit' name='submit_"+RowCount+"' ID='submit_"+RowCount+"' value='Submit' size=10></TD><TD align=center></TR>";
      $(LastRow).find(':submit').click(getvalue).end().appendTo('#SaleTable');
      RowCount++;
}

function getvalue() {
    var row = $(this).closest('tr');
    var sl = $('input:text[name^="Slno_"]', row).val();
    alert(sl);
    var in_tra = $('input[name^="in_travel_"]:checked', row).val();
    alert(in_tra);
    var slect = $('select[name^="reimbursement_"]', row).val();
    alert(slect);
}