php产品比较表

Question

I'm working on a product comparison table. I want to add a td in every last child in all tr. I want to display all products in vertical in a table. The product comparison table is made using php.

This is the code:

      <thead id="table_row">
            <tr id="h_td">

                <th></th>
                <th>product 2</th>
                <th>product 3</th>
                <th>product 2</th>
                <th><a href="#" id="add_table">add</a></th>
            </tr>

      </thead>
      <tbody id="pro_table">    
            <tr class="visible-xs " aria-hidden="true" id="collapse" >                   
              <td colspan="5" >Fature 1</td>
            </tr>
              <tr  id="h_td">
                <td>Fature 1</td>
              </tr>
            <tr class="visible-xs" aria-hidden="true" id="collapse">
              <td colspan="5">Fature 2</td>
            </tr>
              <tr id="h_td">
                <td>Fature 2</td>
              </tr>
            <tr class="visible-xs" aria-hidden="true" id="collapse">                    
              <td colspan="5">Fature 3</td>
            </tr>  
              <tr id="h_td">
                <td>Fature 3</td>
              </tr>
            <tr class="visible-xs" aria-hidden="true" id="collapse">

              <td colspan="5">Fature 4</td>
            </tr>  
              <tr id="h_td">
                <td>Fature 4</td>
              </tr>

      </tbody>


    <?php 
            $con = mysqli_connect("localhost","root","","COMPARES");
            $b_title = array();
            $sql="SELECT * from brands";
            $run=mysqli_query($con,$sql);
            $num_row=mysqli_num_rows($run);
            while($row=mysqli_fetch_assoc($run)){
            $rows[] = $row;
                foreach($rows as $row){
                    $b_title =$row['brand_id'];
                    $b_title =$row['brand_title'];

                $data =' '.$b_title.' ';

                }
            }

    ?>


    <script type="text/javascript">
                var tables = document.getElementsByTagName('tbody');
                var table = tables[tables.length - 1];
                var rows = table.rows;
                for(var i = 0, td; i < rows.length; i++ ){                      
                    td = document.createElement('td');
                    td.appendChild(document.createTextNode("<?php echo data ?>"));
                    rows[i].insertBefore(td, rows[i].lastChild);
                }
    </script>

This is the result:

Answer 1

Why write you own table when much better options out there already exist?

Using jQuery @ http://jquery.com/ and DataTables @ https://datatables.net/, you can easily have dynamic column adding capability -- Check out this fiddle for an example: http://jsfiddle.net/4nil/zq7j97c4/10/--

var data_table, row_num, col_num, row_cell, col_cell, iter=0;
var cols = [
    { "mDataProp": "Field1"},
    { "mDataProp": "Field2" },
    { "mDataProp": "Field3" },
    { "mDataProp": "Field4" }
];

var colDef = [{aTargets: [0], sTitle: "Date"},
              {aTargets: [1], sTitle: "Number"},
              {aTargets: [2], sTitle: "FName"},
              {aTargets: [3], sTitle: "LName"},
             ];

//Get stored data from HTML table element
var results = [{
       Field1: "2011/04/23",
       Field2: 8,
       Field3: "Adam",
       Field4: "Den"},
      {
       Field1: "2011/03/25",
       Field2: 6,
       Field3: "Honey",
       Field4: "Singh"}
    ];

function initDT(){
    //Construct the measurement table
    data_table = $('#example').dataTable({
        "bJQueryUI": true,
        //"sPaginationType": "full_numbers",
        //"bProcessing": true,
        "bDeferRender": true,
        "bInfo" : false,
        "bDestroy" : true,
        "bFilter" : false,
        "bPagination" : false,
        "aaData": results,
        "aoColumns": cols,
        "aoColumnDefs": colDef
    });
    attachTableClickEventHandlers();
}

initDT();

function attachTableClickEventHandlers(){
  //row/column indexing is zero based
  $("#example thead tr th").click(function() {     
            col_num = parseInt( $(this).index() );
            console.log("column_num ="+ col_num );   
    });
    $("#example tbody tr td").click(function() {     
            col_cell = parseInt( $(this).index() );
            row_cell = parseInt( $(this).parent().index() );    
            console.log("Row_num =" + row_cell + "  ,  column_num ="+ col_cell );
    });  
};

$("#btnAddRow").click(function(){
    //adding/removing row from datatable datasource
    var record = {
       "Field1": "2011/04/23",
       "Field2": '8',
        "Field3": "tom",
        "Field4": "jerry"};
    data_table.fnDestroy();
    results.push(record);
    //results.pop();
    initDT();  
    $('#example').dataTable().makeEditable({
            sUpdateURL: function(value, settings) {
                               console.log(value);
    }});
});

$('#btnAddCol').click(function () {
        var oSettings = data_table.fnSettings();
        $("#example thead tr th").eq(col_num).after('<th></th>');
        cols.push( {"mDataProp": "Field5"} );
        colDef.push({aTargets: [4], sTitle: "Message"});
        results[0].Field5 = "Msg1";
        results[1].Field5 = "Msg2";
        data_table.fnDestroy();
        data_table.oApi._fnAddColumn(oSettings,null);
        initDT();
});

EDIT:

If your content is going to be static, there are plenty of "comparison table" examples, using Bootstrap found here: https://bootsnipp.com/tags/table