将表更改为div然后再返回表

Question

[老和不正确：停止下行]

我在stackoverflow上找到了一种简单的方法来将表转换为div。我在每个标签示例上都有类

<table class="table">

所以当div替换它时它仍然会有类表。同样适用于tbody，tr和td。

当浏览器达到一定宽度时，我用以下内容更改HTML。

function checkSize(){
if ($(window).width() < 768) {
    tableChanger();
}else{
    console.log("higher");
}
}

var tableChanger = function(){

$('table').each(function (){
    $(this).replaceWith( $(this).html()
        .replace(/<tbody/gi, "<div ")
        .replace(/<tr/gi, "<div ")
        .replace(/<\/tr>/gi, "</div>")
        .replace(/<td/gi, "<div")
        .replace(/<\/td>/gi, "</div>")
        .replace(/<\/tbody/gi, "<\/div")
    );
});
}

我想知道是否有办法扭转函数来创建div中的表格？我发现这非常困难，显然结束标签都是

</div> 

所以简单的替换不起作用。

我正在开发一个响应式网站（我除了使用表格之外别无选择）。

Answer 1

你不应该做这个转换。

表格用于表格数据。像电子表格一样。即内容

div用于布局。即使它在屏幕和/或印刷媒体上看起来很漂亮

它们是不同的概念。

无论如何使用<table>作为表格数据。使用CSS为屏幕和/或打印介质设计样式。

除了一些人/公司关闭Javascript。