发表新帖
发表新帖

How do I create HTML table using jQuery dynamically?

后端 未结
关注
5 2063
梦如初夏
梦如初夏 2020-12-08 20:10

I am trying to create a HTML table like the following dynamically using jQuery: 



        
                      

              相关标签:
       

      
      
      

        

          5条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  猫巷女王i        
                
              
    
                            
    
                2020-12-08 20:12
              
    
            
    
            
    
                                                                       

    An example with a little less stringified html:
    


    var container = $('#my-container'),
  table = $('<table>');

users.forEach(function(user) {
  var tr = $('<tr>');
  ['ID', 'Name', 'Address'].forEach(function(attr) {
    tr.append('<td>' + user[attr] + '</td>');
  });
  table.append(tr);
});

container.append(table);

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  情话喂你        
                
              
    
                            
    
                2020-12-08 20:27
              
    
            
    
            
    
                                                                       

    You may use two options:
    


      

    1. createElement
      2. 

    2. InnerHTML
      3. 

    


    Create Element is the fastest way (check here.):
    


    $(document.createElement('table'));

    


    InnerHTML is another popular approach:
    


    $("#foo").append("<div>hello world</div>"); // 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 = '<tr>' ;
         // create a new textInputBox  
           var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';  
        // create a new Label Text
            tr += '<td>' + labelText  + '</td>';
            tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  长发绾君心        
                
              
    
                            
    
                2020-12-08 20:27
              
    
            
    
            
    
                                                                       

    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>

    


    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  傲寒        
                
              
    
                            
    
                2020-12-08 20:32
              
    
            
    
            
    
                                                                       

    FOR EXAMPLE YOU HAVE RECIEVED JASON DATA FROM SERVER. 
    


                    var obj = JSON.parse(msg);
                var tableString ="<table id='tbla'>";
                tableString +="<th><td>Name<td>City<td>Birthday</th>";


                for (var i=0; i<obj.length; i++){
                    //alert(obj[i].name);
                    tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
                }
                tableString +="</table>";
                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 < argcount; i++) {
    string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;

    


    }
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  傲寒        
                
              
    
                            
    
                2020-12-08 20:36
              
    
            
    
            
    
                                                                       

    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:
    


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

    


    JS :
    


    createFormElement("Nickname","nickname")

function createFormElement(labelText, id) {

$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}

    


    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.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

       
      
    
    

          
 
     
 

        
热议问题