jquery - 如何使用 jQuery 将 转换为 HTML 表格？

Question

<div> Hii,this is just an example  </div>

更改为

<td>Hii, only tag will be change  </td> 

Answer 1

HTML div 结构到表格

var div2table = $('.tr').map(function () {
                var issue = $(this);
                var tdline = issue.find('.td').map(function () {
                    return '<td>' + $(this).text();
                }).get().join('</td>');
                return '<tr>'  + tdline + '</td>';
            }).get().join('</tr>');
            
div2table = '<table border="1">' + div2table + '</tr></table>';
$('#table-container').html(div2table);
console.log(div2table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Div structure</p>
<div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
</div>
<p>After js execution, it will convert to Table</p>
<div id="table-container">

</div>

使用 div2table 变量打印结果

输出

<table>
    <tbody>
        <tr>
            <td>this will be 1st TD</td>
            <td>this will be 2nd TD</td>
            <td>this will be 3rd TD</td>
        </tr>
        <tr>
            <td>this will be 1st TD</td>
            <td>this will be 2nd TD</td>
            <td>this will be 3rd TD</td>
        </tr>
        <tr>
            <td>this will be 1st TD</td>
            <td>this will be 2nd TD</td>
            <td>this will be 3rd TD</td>
        </tr>
    </tbody>
</table>