How do i add input fields (textbox) to a table dynamically created with jQuery

Question

I have been playing with Javascript to find out how i can dynamically create textboxes and a dynamic table. I figured out how to create the textboxes and the table, but i dont know how to merge theese together, so that the dynamically created table holds the textboxes with my preferred parameters.

I have this jQuery script which dynamically adds rows and cells to a table. I specify how many rows the table should have in an input field called "element"

The HTML:

<input type="text" name="element" id="element" />
    <input type="button" value="Tilføj" id="add" />
    <br />

    <span id="MCQ-textbox">&nbsp;
        <table id="tbl" border="1">
            <tbody>
            </tbody>
        </table>
    </span>

The scripts:

<scripts language="javascript">

function createDynamicTable() 
{
    var tbody = $("#tbl");
    var rows = $('#element').val();
    var number_of_columns = 3;

    if (tbody == null || tbody.length < 1) return;

    var tfirstrow = $("<tr>");
    $("<th>")
                .addClass("tableCell")
                .text("#")
    //               .data("col")
                .appendTo(tfirstrow);
    $("<th>")
                .addClass("tableCell")
                .text("Svarmulighed")
    //               .data("col")
                .appendTo(tfirstrow);
    $("<th>")
                .addClass("tableCell")
                .text("Hjælpetekst")
    //               .data("col")
                .appendTo(tfirstrow);

    tfirstrow.appendTo(tbody);

    for (var i = 0; i < rows; i++) {

        var trow = $("<tr>");
        for (var c = 0; c < number_of_columns; c++) 
        {
            var cellText = "Cell"
            $("<td>")
                    .addClass("tableCell")
                    .text(cellText)
                    .data("col", c)
                    .appendTo(trow);
        }
        trow.appendTo(tbody);
    }

}


$(document).ready(function () {
    $('#add').click(function () {
        createDynamicTable();
    });
});

</SCRIPT>

Instead of adding the text "cell" to each column, i would like to add textboxes.

The first column should have the following attributes:

var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_number");
    element.setAttribute("name", "MCQ["+i+"].choice_number");

the second column should have the following attributes:

 var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__choice_wording");
    element.setAttribute("name", "MCQ["+i+"].choice_wording");

and the third column should have the following attributes:

    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("id", "MCQ_"+i+"__help_text");
    element.setAttribute("name", "MCQ["+i+"].help_text");

How do i merge this, so that my table holds the textboxes with the parameters above?

Thanks!

dcastro · Accepted Answer · 2011-08-03 12:52:12Z

0

This will work: http://jsfiddle.net/RrhT9/

Also, you could have added content to the cell your way, but you'd have to replace .text("<input.../>") with .html("<input.../>)

answered Aug 3, 2011 at 12:52

dcastro

69.1k22 gold badges150 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heretic Monkey Over a year ago

This answer is stuck on another site.

lamelas · Accepted Answer · 2011-08-03 12:26:07Z

0

You can do the following:

var cellText = "<input type="text" id=\"MCQ_"+i+"__choice_number\" name=\"MCQ["+i+"].choice_wording\"/>";

And then change accordingly for each of the input boxes you're creating.

answered Aug 3, 2011 at 12:26

lamelas

8726 silver badges15 bronze badges

2 Comments

Nanek Over a year ago

Are you sure it is correctly formatted at: "<input type="text" - it says theres missing a ; - If i remove the "" it displays the text and not the HTML

lamelas Over a year ago

Try it like this: var cellText = '<input type="text" id="MCQ_'+i+'__choice_number" name="MCQ['+i+'].choice_wording" />';

Collectives™ on Stack Overflow

How do i add input fields (textbox) to a table dynamically created with jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related