草庐IT

javascript - 将 HTML 表格转换为 Bootstrap 列 - 响应式设计

coder 2023-08-01 原文

我一直在研究我们现有的旧产品，该产品目前使用 HTML 表格来显示其内容。在这个响应性的世界里，我想让它响应。在线阅读后，我相信重新设计整个网站可能需要大量工作，但是，我正在尝试找到一种解决方案，可以将任何表格转换为基于包含 Bootstrap 列的 div 的列。这里给出了登录页面的一个很好的例子:JsFiddle

我无权访问字段的源，但是，我可以使用 jQuery 添加元素(追加/前置)。我还可以添加 CSS 样式。

有人可以帮我解决这个问题吗？

<table></table>
.
.
.
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>

干杯。

最佳答案

可能很难将任何给定的表完美地转换为 Bootstrap 列。考虑到 bootstrap 列最多只允许 12 列，而一个表可能有更多。

此函数会将表格转换为 BS 行/列，但它假设表格行数可以被 12 整除(如果不能，您必须根据自己的需要进行调整)。

/**
 * Convert a table to bootstrap columns
 * @param table DOMElement
 */
function makeBSCols(table){
    var html = ["<div class='container'>"];
    $(table).find('tr').each(function(){
        var $td = $(this).find('td').length ? $(this).find('td') : $(this).find('th');
        // get the column width
        if($td.length > 12) return alert("too many columns");
        var cls = Math.floor(12/$td.length);
        if(cls!==(12/$td.length)) return alert("invalid column count");
        html.push("<div class='row'>");
        $td.each(function(){
            html.push('<div class="col-sm-'+cls+'">'+$(this).html()+'</div>');
        });
        html.push('</div>');
    });
    html.push('</div>');
    $(table).replaceWith(html.join(''));
}

示例:makeBSCols(document.getElementById('myTable')) ( Fiddle )

对于更灵活的解决方案，(假设您实际上正在显示表格数据)您可能会考虑只使用 BS 表格而不是 BS cols/rows。这只会将 BS 样式添加到您的表格并将其放在 .table-responsive div 中，这有助于提高响应能力。

/**
 * Convert a regular table to bootstrap table
 * @param table DOMElement
 */
function makeBSTable(otable){
    var table = $(otable).clone(); console.log(table);
    table.addClass("table-hover table-bordered table-striped table");
    var div = $('<div class="table-responsive" />');
    $(otable).replaceWith(div);
    div.append(table);
}

示例:makeBSTable(document.getElementById('myTable')) ( Fiddle )

关于javascript - 将 HTML 表格转换为 Bootstrap 列 - 响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40993532/

javascriptBootstraptablediv39jqueryhtmlcsstwitter-bootstrap

有关javascript - 将 HTML 表格转换为 Bootstrap 列 - 响应式设计的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  5. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  6. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  10. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

随机推荐