locked
Dynamically Build HTML Table Based Off Asp:Checboxlist Selections RRS feed

  • Question

  • User-812117547 posted

    I have a checkbox list that contains sales names.  A User can select a max of 4 of them.  Based off the selections to the checkbox list I need to build an html table that the first column Header, would be Item then the next columns would be the names of the selected items from the checkboxlist.  Then the rows would be strictly for user input.

    How can this be dynamically generated in html?

    Tuesday, January 30, 2018 7:17 PM

Answers

  • User-832373396 posted

    Hi RahidBalaba,

    I like it!  It is very close to what I need, with the header being dynamically generated - however, I need the same number of input boxes generated to match the headers.  

    Sir, I change a bit and I guess this is what you need:

    $(function(){
    //add the heads of table
      $('input[name=mycheckbox]').change(function(){
      
           var newrow= $('<tr>').append("<td>item</td>");
           
           $('input[name=mycheckbox]:checked').each(function(){
            //console.log("a")
              var newtd= $('<td>').html($(this).val())
              newrow.append(newtd);    
           })        
         $("table").empty().append(newrow);  
         AddRow();// then it will generate a line textbox after i change the checkboxlist;
      })
      

    Welcome to back if any question :)

    Bests,

    Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 1, 2018 5:47 AM

All replies

  • User-812117547 posted

    So my desired set-up would be like such - say for hypothetical that Bill, Jason, Stance were selected from the checkboxlist

    I want a table set-up that shows this as the header

    Item   Bill   Jason   Stance

    Ball     3        5    7

    Then the user could input an item, the number sold by each salesperson, and then a secondary item i fnecessary.

    Tuesday, January 30, 2018 10:07 PM
  • User-832373396 posted

    Hi RahidBalaba,

    a table set-up that shows this as the header

    Item   Bill   Jason   Stance

    Ball     3        5    7

    Then the user could input an item, the number sold by each salesperson, and then a secondary item <g class="gr_ gr_16 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="16" data-gr-id="16">i</g> <g class="gr_ gr_15 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="15" data-gr-id="15">fnecessary</g>.

    Sir, I do an working example for you.

    Generic code

     <input type="checkbox" value="id1" style="margin-right: 10px;" name="mycheckbox"> OA Number 
     <input type="checkbox" value="id2" style="margin-right: 10px;" name="mycheckbox">Customer 
     <input type="checkbox" value="id3" style="margin-right: 10px;" name="mycheckbox"> OA Date 
     <input type="checkbox" value="id4" style="margin-right: 10px;" name="mycheckbox">Product Code
    
    
    <table >
    
    </table>
    Row Number: <input type="text" name="number" />
    <button>
    add
    </button>
    

    js

    $(function(){
    //add the heads of table
      $('input[name=mycheckbox]').change(function(){
      
           var newrow= $('<tr>').append("<td>item</td>");
           
           $('input[name=mycheckbox]:checked').each(function(){
            //console.log("a")
              var newtd= $('<td>').html($(this).val())
              newrow.append(newtd);    
           })    
        //     newrow.append('<td style="background-color:coral;width:20px">edit </td>')
           
         $("table").empty().append(newrow);  
      })
      
     
      $('button').click(function(){ 
      //add new rows  
           var addRowsNumber=$('input[name="number"]').val();                    
            for (var i=0;i< addRowsNumber;i++){
               //console.log(i)
              AddRow();
            }                      
      })
    
      function AddRow(){    
         
         var newrow= $('<tr>');          
         var columsNumber=$('input[name=mycheckbox]:checked').length;
               //console.log(columsNumber);
          for (var i=0;i< columsNumber+1;i++){         
             newrow.append('<td><input type="text" /></td>');            
          }
        //  newrow.append('<td style="background-color:coral;width:20px"> edit</td>')
          $("table").append(newrow);       
      }
    })

    Then you could change it according to your real project :)

    2 and there are many 3rd js

    ep.

    https://editor.datatables.net/examples/inline-editing/simple 

    With regards, Angelina Jolie

    Wednesday, January 31, 2018 10:14 AM
  • User-812117547 posted

    @AngelinaJolie ->

    The datatables is a plug-in that I have looked at but it seems to permit a user to edit existing data.  I am wanting to solely perform data entry.

    As far as your syntax goes - I like it!  It is very close to what I need, with the header being dynamically generated - however, I need the same number of input boxes generated to match the headers.  

    A quick mock up of what it would look like is

    Item          Bill          Jason    Stance

    textbox   textbox   textbox   textbox

    Just an epty textbox so the user can input the value(s)

    Wednesday, January 31, 2018 2:12 PM
  • User-832373396 posted

    Hi RahidBalaba,

    I like it!  It is very close to what I need, with the header being dynamically generated - however, I need the same number of input boxes generated to match the headers.  

    Sir, I change a bit and I guess this is what you need:

    $(function(){
    //add the heads of table
      $('input[name=mycheckbox]').change(function(){
      
           var newrow= $('<tr>').append("<td>item</td>");
           
           $('input[name=mycheckbox]:checked').each(function(){
            //console.log("a")
              var newtd= $('<td>').html($(this).val())
              newrow.append(newtd);    
           })        
         $("table").empty().append(newrow);  
         AddRow();// then it will generate a line textbox after i change the checkboxlist;
      })
      

    Welcome to back if any question :)

    Bests,

    Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 1, 2018 5:47 AM