How do I create HTML table using jQuery dynamically

Question

I am trying to create a HTML table like the following dynamically using jQuery     lt table id  providersFormElementsTable  gt       lt tr gt           lt td gt Nickname lt  td gt           lt td gt  lt input type  text  id  nickname  name  nickname  gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt CA Number lt  td gt           lt td gt  lt input type  text  id  account  name  account  gt  lt  td gt       lt  tr gt   lt  table gt    This is my actual table      lt table border  0  cellpadding  0  width  100   id  providersFormElementsTable  gt   lt  table gt    This is the method which will create tr and td elements taking id and labelText    function createFormElement id  labelText           create a new textInputBox button using supplied parameters     var textInputBox       lt input   gt    attr           type   text   id  id  name  id                create a new textInputBox using supplied parameters     var inputTypeLable       lt label   gt    append textInputBox  append labelText           append the new radio button and label         providersFormElementsTable   append inputTypeLable  append   lt br   gt         I also have a value which will be shown as tool tip   Please help me to create a table dynamically with tool tip and tr td   EDIT   I have almost done with the following code    function createProviderFormFields id  labelText tooltip regex        var tr     lt tr gt            create a new textInputBox       var textInputBox       lt input   gt    attr           type   text           id  id  name  id          title  tooltip                   create a new Label Text     tr      lt td gt     labelText      lt  td gt        tr      lt td gt     textInputBox     lt  td gt          tr     lt  tr gt        return tr      Here label is coming properly and the input box is not coming and it shows  object Object  where the text box has to come     When I printed the textInputBox using console log  I get the following    input nickname  constructor  function  init  function  selector      jquery   1 7 2   size  function      What could be the issue   Thanks to  theghostofc who showed me path

User · Answer

Here is a full example of what you are looking for:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='nickname' name='nickname'></td></tr><tr><td>CA Number</td><td><input type='text' id='account' name='account'></td></tr>");
        });
    </script>
</head>

<body>
    <table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
</body>

User · Answer

You may use two options    createElement InnerHTML   Create Element is the fastest way  check here       document createElement  table       InnerHTML is another popular approach       foo   append   lt div gt hello world lt  div gt        Check similar for table too    Check a real example on How to create a new table with rows using jQuery and wrap it inside div      There may be other approaches as well  Please use this as a starting point and not as a copy-paste solution    Edit   Check Dynamic creation of table with DOM  Edit 2   IMHO  you are mixing object and inner HTML  Let s try with a pure inner html approach   function createProviderFormFields id  labelText  tooltip  regex        var tr     lt tr gt                 create a new textInputBox              var textInputBox     lt input type  text  id      id      name      id      title      tooltip        gt                 create a new Label Text             tr      lt td gt     labelText      lt  td gt                tr      lt td gt     textInputBox     lt  td gt          tr     lt  tr gt        return tr

User · Answer

An example with a little less stringified html   var container       my-container      table       lt table gt      users forEach function user      var tr       lt tr gt         ID    Name    Address   forEach function attr        tr append   lt td gt     user attr      lt  td gt             table append tr        container append table

User · Answer

FOR EXAMPLE YOU HAVE RECIEVED JASON DATA FROM SERVER                    var obj   JSON parse msg                   var tableString    lt table id  tbla  gt                    tableString     lt th gt  lt td gt Name lt td gt City lt td gt Birthday lt  th gt                      for  var i 0  i lt obj length  i                           alert obj i  name                       tableString   gg stringformat   lt tr gt  lt td gt  0  lt td gt  1  lt td gt  2  lt  tr gt   obj i  name  obj i  age  obj i  birthday                                     tableString     lt  table gt                    alert tableString                       divb   html tableString     HERE IS THE CODE FOR gg stringformat  function gg stringformat     var argcount   arguments length      string      i   if   argcount        return       if  argcount     1        return arguments 0     string   arguments 0   for  i   1  i  lt  argcount  i          string   string replace new RegExp          i - 1          gi    arguments i      return string

User · Answer

I understand you want to create stuff dynamically  That does not mean you have to actually construct DOM elements to do it  You can just make use of html to achieve what you want    Look at the code below    HTML    lt table border  0  cellpadding  0  width  100   id  providersFormElementsTable  gt  lt  table gt    JS    createFormElement  Nickname   nickname    function createFormElement labelText  id         providersFormElementsTable   html   lt tr gt  lt td gt Nickname lt  td gt  lt td gt  lt input type  text  id    id    name  nickname  gt  lt  td gt  lt lable id    labelText    gt  lt  lable gt  lt  td gt  lt  tr gt         providersFormElementsTable   append   lt br   gt         This one does what you want dynamically  it just needs the id and labelText to make it work  which actually must be the only dynamic variables as only they will be changing  Your DOM structure will always remain the same    WORKING DEMO   Moreover  when you use the process you mentioned in your post you get only  object Object   That is because when you call createProviderFormFields   it is a function call and hence it s returning an object for you  You will not be seeing the text box  as it needs to be added   For that you need to strip individual content form the object  then construct the html from it    It s much easier to construct just the html and change the id s of the label and input according to your needs

[javascript] How do I create HTML table using jQuery dynamically?

Examples related to javascript

Examples related to jquery

Examples related to html-table