Remove From My Forums

how to convert table row to column

Question
0

Sign in to vote

User-1634604574 posted

i have this table

<table border="1">
<tbody>
<tr>
<td>01</td>
</tr>
<tr>
<td>02</td>
</tr>
<tr>
<td>03</td>
</tr>
<tr>
<td>04</td>
</tr>

</tbody>
</table>

i want to display like this

<table border="1">
<tbody>
<tr>
<td>01</td>

<td>02</td>

<td>03</td>

<td>04</td>
</tr>

</tbody>
</table>

Sunday, April 28, 2019 6:45 PM

Answers

User839733648 posted

Hi zhyanadil.it@gmail.com,

According to your description, I suggest that you could traverse the value and remove the extra td.

Here is a working demo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#testid").click(function () {
                $("table").each(function () {
                    var $this = $(this);
                    var newrows = [];
                    $this.find("tr").each(function () {
                        var i = 0;
                        $(this).find("td").each(function () {
                            i++;
                            if (newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                            newrows[i].append($(this));
                        });
                    });
                    $this.find("tr").remove();
                    $.each(newrows, function () {
                        $this.append(this);
                    });
                });

                return false;
            });
        })
    </script>
</head>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td>01</td>
            </tr>
            <tr>
                <td>02</td>
            </tr>
            <tr>
                <td>03</td>
            </tr>
            <tr>
                <td>04</td>
            </tr>

        </tbody>
    </table>
    <br/>
    <input id="testid" type="button" value="convert table" />
</body>
</html>

result:

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, April 29, 2019 3:35 AM

Answered by:

how to convert table row to column

Question

Answers