locked
how to convert html table row to column RRS feed

  • Question

  • User-1634604574 posted

    i have this table

    <table>
    <tr>
    <th>attach</th>
    </tr>
    
    <tr><td>a1</td></tr>
    <tr><td>a2</td></tr>
    <tr><td>a3</td></tr>
    <tr><td>a4</td></tr>
    <tr><td>a5</td></tr>
    
    </table>

    i want to convert to this shape

    a1  a2  a3  a4
    a5

    it mean convert to four column

    Friday, February 7, 2020 12:51 PM

All replies

  • User475983607 posted

    Use a loop, a counter (i), and i % 3 to make 4 columns. 

    Many of your posts are similar to this one where you give the community requirements without showing the code you've tried.  Rather than giving you the answer, I think it is best  you at least try to write the code.  

    I'm sure you'll be interested in JavaScript array functions.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

    Friday, February 7, 2020 1:05 PM
  • User283571144 posted

    Hi zhyanadil.it@gmail.com,

    Do you mean you want to convert your table to below format?

    <table>
    
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
        <td>a4</td>
    </tr>
    <tr>
        <td>a5</td>
    </tr>
    
    </table>


    If so, you can use javascript to manipulate the arrangement. I presume that the layout of the original table is always one-column-in-one-row.

    JS Code:

    <script type="text/javascript">
            function convertTable() {
                var oldTable = document.getElementsByTagName("table")[0];
                
                var length = oldTable.rows.length;
                
                var newTable = document.createElement("table");
    
                // set column number
                var columnNum = 4;
    
                var i = 0;
                while (i < length) {
                    var row = Math.floor(i / columnNum);
                    var column = Math.floor(i % columnNum);
    
                    // start new row
                    if (column == 0) {
                        newTable.insertRow(row);
                    }
    
                    // add new column
                    newTable.rows[row].insertCell(column);
                    newTable.rows[row].cells[column].innerHTML = oldTable.rows[i].cells[0].innerHTML;
                    i++;
                }
    
                // insert new table
                insertAfter(newTable, oldTable);
    
                // delete old table
                oldTable.parentNode.removeChild(oldTable);
                
            }
    
            function insertAfter(newElement, targetElement) {
                targetElement.parentNode.insertBefore(newElement, targetElement.nextSibling);
    
            }
        </script>

    HTML markup:

    <table>
                    <tr>
                        <td>a1</td>
                    </tr>
                    <tr>
                        <td>a2</td>
                    </tr>
                    <tr>
                        <td>a3</td>
                    </tr>
                    <tr>
                        <td>a4</td>
                    </tr>
                    <tr>
                        <td>a5</td>
                    </tr>
    </table>
    
    <input id="convertBtn" onclick="convertTable()" type="button" value="Click to convert" />

    Best Regards,

    Brando

    Tuesday, February 11, 2020 7:17 AM