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

时间:2012-10-12 13:53:31

标签: javascript html css

[陈旧与不正确:停止下行]

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

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

我正在开发一个快速响应的网站(我除了使用表格之外别无选择)。

1 个答案:

答案 0 :(得分:1)

你不应该进行这种转换。

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

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

它们是不同的概念。

一定要使用<table>作为表格数据。使用CSS为屏幕和/或打印介质设置样式。

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