关于table.append()后td高度在不同浏览器的问题的问题

2013-07-03 10:54:12 438 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue Element UI el-table合计行深度定制：单元格合并与样式优化在前端开发中，表格组件是数据展示的核心模块，其定制化能力直接影响用户体验。Element UI的el-table组件通过内置的合计行功能，为数值统计提供了基础支持。然而，当需求涉及复杂的单元格合并、样式深度定制或与固定列布局兼容时，原生API往往力不从心。深入理解表格的渲染原理和DOM结构，成为实现高级定制的前提。通过自定义append插槽，开发者可以完全掌控合计行的HTML结构和样式，实现跨列合并（colspan）等原生不支持的功能，从而满足产品对数据可视化美观度和交互一致性的高要求。这种方案尤其适用于需阅读详情

IE9下的图

Chrome下的图

目的是实现如果table下面的tr少的时候固定高度在上面
Chrome就是想要的效果，但是在IE9下面就不一样了

这是动态添加tr的JS



$.each(json, function (i, n) {

  var trs = "<tr style=\"height:14px;\" title=\"" + n.Id + "\" id=\"" + n.Id+ "\" align=\"center\">";

  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Name+ "</td>";

  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Num+ "</td>";

  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Agent+ "</td>";

  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Name + "</td>";

  trs += "</tr>";

  $("#LeftView tbody").append(trs);

  //$(trs).appendTo("#LeftView");

});

var lFoot = $("#LeftFoot");

lFoot.remove();

$("#LeftView tbody").append("<tr style=\"background:#f1f1f1;\" id=\"LeftFoot\"><td colspan=\"4\"></td></tr>");

table固定高度，上网搜了下对append跟innerHtml的区别
但是在F12下面还是能看到属性的，为什么就是不起作用?

...全文

Element UI el-table 合计行深度定制：从单元格合并到复杂场景实战在前端开发中，表格组件是数据展示与交互的核心。Element UI 的 el-table 以其丰富的功能和良好的扩展性，成为构建后台管理系统和数据报表的常用选择。其内置的合计行功能通过 show-summary 属性和 summary-method 方法，为数据汇总提供了基础支持。然而，在实际工程实践中，面对复杂的业务需求，如单元格合并、样式深度定制、与固定列或动态数据的兼容等，默认机制往往力不从心。理解表格的 DOM 渲染原理和 CSS 布局是解决这些问题的关键。通过巧用 summary-method 结阅读详情

不想成为茶叶蛋的鸡蛋

.NET社区 62,273 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

不想成为茶叶蛋的鸡蛋 2013-07-04

打赏
举报

昨天弄好了加了个div在外面进行控制，table取消固定高度这样的话样式也能写在CSS文件了，页面干净很多只是这样div的背景需要设置成table的背景才能使页面背景看起来一致谢谢楼上几位的回答结贴

不想成为茶叶蛋的鸡蛋 2013-07-03

打赏
举报

引用 2 楼 starfd 的回复:

这个是样式问题，不是js问题。。。。。。虽然我知道是这个问题，但我不是专业的前台。。。。。

没有对外层设置样式，而且我拼接的字符串里面td样式的优先级应该是算高的

娃都会打酱油了 2013-07-03

打赏
举报

这个是样式问题，不是js问题。。。。。。虽然我知道是这个问题，但我不是专业的前台。。。。。

不想成为茶叶蛋的鸡蛋 2013-07-03

打赏
举报

有没人能给点提示的?

掌握永恒需控制现在 2013-07-03

打赏
举报

引用 6 楼 no200830740203 的回复:

[quote=引用 4 楼 liang_show 的回复:] 别用append 用html $("#LeftView tbody").html(trs);这句换了试试

试了不行[/quote] 用html是替换tbody里面的html 用append是在tbody里面的最后部分加上添加的html

喂大的程序员 2013-07-03

打赏
举报

table 别用固定高度，不行楼主给出前台源文件

不想成为茶叶蛋的鸡蛋 2013-07-03

打赏
举报

引用 5 楼 blue_apple2006 的回复:

这代码写的。。请把css分离成class吧，看的受不了，全是转义符。另外添加一个tr能不能封装个方法。也便于查找bug.

分出CSS之后chrome那里也会变成ie9那个情况，我也不想用转义符的这个不是BUG，只是想知道哪里导致两个浏览器不同显示在ie9下是能看到td的高度的，就是没起到作用

不想成为茶叶蛋的鸡蛋 2013-07-03

打赏
举报

引用 4 楼 liang_show 的回复:

别用append 用html $("#LeftView tbody").html(trs);这句换了试试

试了不行

blue_apple2006 2013-07-03

打赏
举报

这代码写的。。请把css分离成class吧，看的受不了，全是转义符。另外添加一个tr能不能封装个方法。也便于查找bug.

掌握永恒需控制现在 2013-07-03

打赏
举报

引用楼主 no200830740203 的回复:

IE9下的图 Chrome下的图目的是实现如果table下面的tr少的时候固定高度在上面 Chrome就是想要的效果，但是在IE9下面就不一样了这是动态添加tr的JS
$.each(json, function (i, n) {
  var trs = "<tr style=\"height:14px;\" title=\"" + n.Id + "\" id=\"" + n.Id+ "\" align=\"center\">";
  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Name+ "</td>";
  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Num+ "</td>";
  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Agent+ "</td>";
  trs += "<td style=\"height:14px; line-height:14px; \">" + n.Name + "</td>";
  trs += "</tr>";
  $("#LeftView tbody").append(trs);
  //$(trs).appendTo("#LeftView");
});
var lFoot = $("#LeftFoot");
lFoot.remove();
$("#LeftView tbody").append("<tr style=\"background:#f1f1f1;\" id=\"LeftFoot\"><td colspan=\"4\"></td></tr>");
table固定高度，上网搜了下对append跟innerHtml的区别但是在F12下面还是能看到属性的，为什么就是不起作用?

别用append 用html $("#LeftView tbody").html(trs);这句换了试试

关于table.append()后td高度在不同浏览器的问题的问题

相关推荐