locked
how to read datatable by for loop and put int in another table html RRS feed

  • Question

  • User-1634604574 posted

    i have this code to read datatable data and put it in html table but all rows are show me by one row where is the error on my code?

    $('#referesh').click(function () {
    // $("#ModalPrint").modal("show")
    var content1 = "<table border='1'><tr>";
    var f
    for (var i = 3; i < $("#example tr").length; i++) {
    for (var j = 0; j < $("#example tr td").length; j++) {
    f = $("#example tr:eq('" + i + "') td:eq('" + j + "')").text()

    //alert(f)

    }
    content1 += '<td class="table_content_style">' + f + ' </td>'

    }
    content1 += "</tr></thead></table><br/>";

    $("#findingDiv_method_1").show()
    $('#findingDiv_method_1').append(content1);

    });

    Tuesday, April 2, 2019 7:09 PM

Answers

  • User-893317190 posted

    Hi zhyanadil.it@gmail.com,

    I find your code  only add tr at start of your loop var content1 = "<table border='1'><tr>"; and add tr at end of your loop content1 += "</tr></thead></table><br/>";

    In this way , this is only one tr in your final table, which causes all the td appears in one tr.

    Below is my code , you could refer to it.

     <script src="../Scripts/jquery-1.9.1.js"></script>
    </head>
    <body>
        <table id="example">
           
            <tbody>
                <tr>
                    <td>tr1 td1 &nbsp; &nbsp;    </td>
                    <td>tr1 td2    &nbsp;  &nbsp;  </td>
                    <td>tr1 td3 &nbsp;  &nbsp; </td>
                </tr>
    
                <tr>
                    <td>tr2 td1 &nbsp;  &nbsp; </td>
                    <td>tr2 td2 &nbsp;  &nbsp; </td>
                    <td>tr2 td3 &nbsp;  &nbsp; </td>
                </tr>
            </tbody>
        </table>
    
        <input  type="button" id="refresh" value="refresh"/>
        <div id="content">
    
        </div>
    
    
    </body>
    
    <script>
    
        $('#refresh').click(function () {
         
            var content1 = "<table border='1'>";
         
            for (var i = 0; i < $("#example tr").length; i++) {
                content1+="<tr>" // add tr's start tag in every loop
                for (var j = 0; j < $("#example tr:eq("+i+") td").length; j++) {
                    f = $("#example tr:eq('" + i + "') td:eq('" + j + "')").text()
    
                 
                    content1 += '<td class="table_content_style">' + f + ' </td>'
                }
                content1+="</tr>"// add tr's endtag in every loop
    
            }
            content1 += "</thead></table><br/>";
    
      
            $('#content').append(content1);
    
        });
    
    </script>

    This is the result after I client the refresh button.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 3:22 AM

All replies

  • User-893317190 posted

    Hi zhyanadil.it@gmail.com,

    I find your code  only add tr at start of your loop var content1 = "<table border='1'><tr>"; and add tr at end of your loop content1 += "</tr></thead></table><br/>";

    In this way , this is only one tr in your final table, which causes all the td appears in one tr.

    Below is my code , you could refer to it.

     <script src="../Scripts/jquery-1.9.1.js"></script>
    </head>
    <body>
        <table id="example">
           
            <tbody>
                <tr>
                    <td>tr1 td1 &nbsp; &nbsp;    </td>
                    <td>tr1 td2    &nbsp;  &nbsp;  </td>
                    <td>tr1 td3 &nbsp;  &nbsp; </td>
                </tr>
    
                <tr>
                    <td>tr2 td1 &nbsp;  &nbsp; </td>
                    <td>tr2 td2 &nbsp;  &nbsp; </td>
                    <td>tr2 td3 &nbsp;  &nbsp; </td>
                </tr>
            </tbody>
        </table>
    
        <input  type="button" id="refresh" value="refresh"/>
        <div id="content">
    
        </div>
    
    
    </body>
    
    <script>
    
        $('#refresh').click(function () {
         
            var content1 = "<table border='1'>";
         
            for (var i = 0; i < $("#example tr").length; i++) {
                content1+="<tr>" // add tr's start tag in every loop
                for (var j = 0; j < $("#example tr:eq("+i+") td").length; j++) {
                    f = $("#example tr:eq('" + i + "') td:eq('" + j + "')").text()
    
                 
                    content1 += '<td class="table_content_style">' + f + ' </td>'
                }
                content1+="</tr>"// add tr's endtag in every loop
    
            }
            content1 += "</thead></table><br/>";
    
      
            $('#content').append(content1);
    
        });
    
    </script>

    This is the result after I client the refresh button.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 3:22 AM
  • User-1634604574 posted

    if i want to th for that table i wrote this code but not correct

    for (var i = 0; i < $("#table_checkbox tr").length; i++) {
    // content1 += "<tr>"
    f2 = $("#table_checkbox tr:eq('" + i + "') td:eq(0)").text()
    content1 += '<tr><th>' + f2 + '</th>'
    }
    content1 += "</tr>"

    Wednesday, April 3, 2019 4:48 AM
  • User-893317190 posted

    Hi zhyanadil.it@gmail.com,

    th usually in thead and td usually in tbody.

    Assume the structure of the table is

     <table id="example">
           <thead>
               <tr>
                   <th>
                       col1
                   </th>
                   <th>
                       col2
                   </th>
                   <th>
                       col3
                   </th>
               </tr>
           </thead>
            <tbody>
                <tr>
                    <td>tr1 td1 &nbsp; &nbsp;    </td>
                    <td>tr1 td2    &nbsp;  &nbsp;  </td>
                    <td>tr1 td3 &nbsp;  &nbsp; </td>
                </tr>
    
                <tr>
                    <td>tr2 td1 &nbsp;  &nbsp; </td>
                    <td>tr2 td2 &nbsp;  &nbsp; </td>
                    <td>tr2 td3 &nbsp;  &nbsp; </td>
                </tr>
            </tbody>
        </table>
    

    Then you could  write as follows.

     $('#refresh').click(function () {
         
            var content1 = "<table border='1'>";
    
    
            content1 += "<thead>"
            content1 += "<tr>"
            for (var i = 0; i < $("#example thead th").length; i++) {
    
                    f = $("#example thead th:eq(" + i+ ")").text()
    
                    content1 += '<th class="table_content_style">' + f + ' </th>'
    
            }
    
            content1 += "</tr>"
            content1 += "</thead>"
              content1+="<tbody>"
            for (var i = 0; i < $("#example tbody tr").length; i++) {
                content1+="<tr>"
                for (var j = 0; j < $("#example tbody tr:eq("+i+") td").length; j++) {
                    f = $("#example tbody tr:eq('" + i + "') td:eq('" + j + "')").text()
    
                 
                    content1 += '<td class="table_content_style">' + f + ' </td>'
                }
                content1+="</tr>"
    
            }
            content1 += "</tbody>";
            content1 += "</table><br/>";
    
      
            $('#content').append(content1);
    
        });
    

    Best regards,

    Ackerly Xu

    Wednesday, April 3, 2019 5:23 AM