Adding Column structure to Div

Adding Column structure to Div

Hi,

If I need to display data inside the #Log div using a column structure.
What would be the best : Table or Div tags.

By using a column structure it would change the dynamics of the program.
Searching looping thru the log div ... etc.

Can someone please help.





  1. <script>
  2.    
  3.     $("document").ready(function()
  4.         {
  5.    
  6.             //Update Log div with selected items
  7.             function log(message) {
  8.             var matches = $('#log div').
  9.                   filter(function() { return $(this).text() == message; });
  10.             if (matches.length == 0) {
  11.                   $('#log').append($('<div/>').text(message)).scrollTop(0);
  12.             }
  13.       }   
  14.             //Read searchphp and pupulate Search Autocomplete
  15.             $( "#search" ).autocomplete(
  16.                 {
  17.                     source: "searchdb.php",
  18.                     minLength: 2,
  19.                     select: function( event, ui)
  20.                     {
  21.                         log( ui.item ?
  22.                            
  23.                             "<tr><td>" + ui.item.value + "</td><td>" + ui.item.Event + "</td></tr>"
  24.                        //    "Event ID : " + ui.item.value + " Event Name : " + ui.item.Event :
  25.                            "Nothing selected, input was " + this.value );
  26.                     }
  27.                 });
  28.     })
  29.    
  30.    
  31.     $(function ()
  32.             {
  33.                 // Function to read #log div
  34.                 function runupdate(personsIDval)
  35.                 {
  36.                     var events = [];
  37.                     var idRE = /^Event ID : (\d+).*$/;
  38.                     $('#log div').each(function ()
  39.                         {
  40.                             events.push(idRE.exec($(this).text())[1]);
  41.                         });
  42.                        // alert("Test Values - PersonsID : " + personsIDval + " EventsID :  " + events );
  43.                    
  44.                     jQuery.get('runupd.php',
  45.                         {
  46.                             personsID: personsIDval,
  47.                             eventsID: events
  48.                         }, function (data) {
  49.                            
  50.                             alert(data);
  51.                             });
  52.               
  53.               
  54.               
  55.                 }
  56.                 //Click button to run function - will loop thru the #log div
  57.                 $("input#runupdate2").click(function ()
  58.                     {
  59.                         $('#log div').each(function (i)
  60.                             {
  61.                                 var text = $(this).text();
  62.                                 // call and send variable to function
  63.                                 var personsIDnr = '007'
  64.                                 runupdate(personsIDnr);
  65.                             });
  66.                     });
  67.             });
  68. </script>
  69. </head>
  70. <body>
  71. <div class="demo">
  72. <div class="ui-widget">
  73.     <label for="search">Search Events: </label>
  74.     <input type="text" id="search" value="">
  75. </div>
  76. <div class="ui-widget" style="margin-top:2em; font-family:Arial">
  77.     Selected Events:
  78.     <div id="log" style="height: 200px; width: 500px; overflow: auto;" class="ui-widget-content">
  79.     <!--   <table width="200" border="1">
  80.        <tr>
  81.           <th>Event ID</th>
  82.           <th>Event Name</th>
  83.        </table>-->
  84.     </div>
  85.    
  86. </div>
  87. </div>