td内容太长时如何显示？答案

【问题标题】：How to show td content when its too long?td内容太长时如何显示？
【发布时间】：2014-06-22 07:39:59
【问题描述】：

我有一个 html 表，其中一个字段太大，它是一个 JSON 文件。我想通过以下方式展示它： TD 内容将是一个按钮，当点击它时，JSON 内容会显示在一个新窗口中。

我想通过把JSON作为一个隐藏的div来做，当点击按钮时，我会显示那个div的内容，但是看起来很难看，我认为有一个更好的更多优雅的方式。

如果有帮助，我正在使用 rails。

最好的方法是什么？

【问题讨论】：

把它作为隐藏的 div 有什么问题？您可以使用 ajax 来调用按钮，获取您的 json 数据，然后将该数据放入 div
您的问题是技术还是布局设计？你在寻找什么行为？

标签： javascript html css ruby-on-rails

【解决方案1】：

这里的底线是你需要在按钮上使用Javascript来加载pop-up/modal；然后在该新元素中显示 JSON 文件的内容。您如何显示 JSON 应该使用 AJAX 或使用 hidden div

模态

模态元素只是divs 绝对定位在页面上（在您的其他内容之上）。它们可以包含任何你想要的“普通”HTML，基本上只是让你给人一种pop-up 的印象。

它们实际上只是在事件绑定之后出现的支持 JS 的 div 元素。我建议将其中之一与您的按钮一起使用 - 您需要绑定按钮的“点击”事件以触发模式加载：

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
   // Trigger modal
});

您可以使用许多模态 JS 插件：

Bootstrap Modal（大多数开发者的最爱）

LeanModal（我们用这个）

FancyBox（主要是图片）

JSON

处理隐藏文本的方法会稍微复杂一些。

有两种方法：

AJAX 2 隐藏分区

Ajax 方式是最有效的（避免将任何多余的数据添加到您的页面中）；但这是最棘手的。

这是我要做的：

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
    $.ajax({
        url: "your_json_url",
        dataType: "json",
        success: function(data){
            // Trigger Modal
        }
    });
});

这将允许您创建模型并处理任何 JSON 请求，如下所示：

#app/controllers/your_controller.rb
respond_to :json, only: :your_json_action

def your_json_action
    respond_with @your_code
end

这基本上将获取ajax 响应，并将其附加到您将能够显示的表单中。

另一种方法是使用hidden div：

#css
.hidden { display: none; }

#view
<table>
    <tr>
        <td>test</td>
        <td>test2</td>
        <td>
            test3
            <div class="hidden">
                your json content here
            </div>
        </td>
    </tr>
</table>

【讨论】：

【解决方案2】：

Here is a previous question 很好地解决了这个问题。

您可以添加一个 onClick 事件来删除裁剪，以显示整个内容，反之亦然。

【讨论】：

【解决方案3】：

我曾经处理过一个非常大的网格（167 列和 2000 行），其中一列的内容很长，我也是这样做的，我显示了大约前 200 个字符的内容，然后是“...”，并且当用户将鼠标悬停在该单元格上时，我只是在工具提示中显示了整个内容。所以基本上将整个内容放在单元格中，但首先通过隐藏溢出并放置一些标记，如“...”，然后在悬停时在工具提示中显示全部内容。

【讨论】：