我如何使用 jQuery 来转换 <div>转换成 HTML 表格? [英] How can I use jQuery to convert <div> into HTML table?

问题描述

这只是一个例子 </div>

改为

只有标签会改变</td>

解决方案

html div 结构到表格

html

 
<div class='td'>这将是第一个 TD</div><div class='td'>这将是第二个 TD</div><div class='td'>这将是第三个 TD</div>
<div class='td'>这将是第一个 TD</div><div class='td'>这将是第二个 TD</div><div class='td'>这将是第三个 TD</div>
<div class='td'>这将是第一个 TD</div><div class='td'>这将是第二个 TD</div><div class='td'>这将是第三个 TD</div>

脚本

使用 div2table 变量打印结果

输出

<tr><td>这将是第一个 TD</td><td>这将是第二个TD</td><td>这将是第三个TD</td></tr><tr><td>这将是第一个 TD</td><td>这将是第二个TD</td><td>这将是第三个TD</td></tr><tr><td>这将是第一个 TD</td><td>这将是第二个TD</td><td>这将是第三个TD</td></tr></tbody>

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

change to

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

解决方案

html div structure to table

html

    <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>

script

<script>
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>' + div2table + '</tr></table>';

console.log(div2table);
</script>

use div2table variable to print your result

Output

<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>

这篇关于我如何使用 jQuery 来转换 <div>转换成 HTML 表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！