Javascript 当td内容太长时，如何显示td内容？

我有一个html表，其中一个字段太大，它是一个JSON文件。 我想用以下方式来说明： TD内容将是一个按钮，单击它时，JSON内容将显示在一个新窗口中

我想通过将JSON作为一个隐藏的div来实现这一点，当点击按钮时，我会显示该div的内容，但它看起来很难看，我认为有一种更好、更优雅的方式来实现

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

这样做的最佳方法是什么？

这对这个问题有很好的答案

---

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

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

这里的底线是，您需要使用按钮上的Javascript加载

弹出窗口

/

模式

；然后在新元素中显示JSON文件的内容。如何使用

AJAX

或使用

隐藏div

--

模态

模态元素只是

div

绝对位于页面上（位于其他内容之上）。它们可以包含您想要的任何“普通”HTML，基本上只允许您给人一种弹出式

的印象

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

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

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


（大多数开发者的最爱）
（我们用这个）
（主要用于图像）

--

JSON

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

有两种方法可以做到这一点：

阿贾克斯
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
响应，并将其附加到一个表单中，然后可以显示该表单

-

另一种方法是使用：

#css
.hidden{显示：无；}
#看法
测验
测试2
测试3
这里是您的json内容
将其作为隐藏div有什么不对？您可以使用ajax调用按钮，获取json数据，然后将这些数据放入divIs中，您的问题是技术还是布局设计？你在寻找什么样的行为？
#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>