javascript 如何创建显示在表行下方的div

z9smfwbn  于 2022-12-25  发布在  Java
关注(0)|答案(9)|浏览(204)

就像这个演示
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
除了在这个演示中,它被添加为一个额外的行.(点击其中一个“〉”的东西,并检查页面源,它添加了一个新的行到表).如果我使用这个策略,这将是很难排序,使用一个标准的Jquery插件,如表排序.
想法?

bjg7j2ky

bjg7j2ky1#

我离开后思考了一下我的评论,关于查找行高和覆盖div ..它是如此接近,但我不是jQuery高手,所以也许有人可以帮助整理一下
如果div/行在下一行打开之前关闭,我让它在正确的位置显示/隐藏div。但是如果在div 1打开时单击按钮2,则不会获得正确的top位置(它获取行在展开后的位置,而不是原始行位置),我确信一定有一种方法可以在行未展开时获取该位置并存储它??
我知道这是非常冗长的,变量的智慧,因为我只能应用CSS逻辑-我不知道足够的关于js或jquery函数和存储..而且我想如果我解释我如何得到我的变量,哪些是需要的,它可能会帮助那些谁知道如何使这更好;)

  • 输入/按钮没有文本,但它们是单击触发器
  • position()可能不适合使用,它需要div能够找到相关行的原始位置(在table-wrap div内部?)

∮ ∮ ∮ ∮

z9zf31ra

z9zf31ra2#

不能。<div>不是<table><tbody>的有效子级。您需要使用<tr>
我不知道该插件是如何工作的,但也许它支持对多个<tbody>元素进行排序,这将允许您对行集进行分组。

xqk2d5yq

xqk2d5yq3#

div位于td内,在单击>之前,td是隐藏的
下面是一个演示:http://jsfiddle.net/maniator/7RLhL/1/

u0njafvf

u0njafvf4#

我不知道你能不能做到。把一个标签像放在一个表里面不是有效的(X)HTML,所以可能不会给予你想要的效果

a7qyws3x

a7qyws3x5#

如果您看一下该演示,您会发现他们使用的是第一列下面的第二列,其中的跨越了大部分列。

jum4pzuy

jum4pzuy6#

您可以在每个描述单元格下的表格单元格中嵌入一个明细表,该单元格将不可见,并在单击时使其可见:http://jsfiddle.net/bouillard/QmK4Z/

jq6vz3qz

jq6vz3qz7#

正如在其他答案中提到的,如果div不在TD中,我们就不能将其添加到表中。但是,可以将div放置在行上。为了使div显示在行中,我们可以在显示div的同时增加行的高度。下面是非常基本的demo。由于div实际上并不在表中,如果表碰巧要排序,你可能会想隐藏div或者把它重新定位到新的TR位置。2这会带来它自己的挑战,但是你可以尝试一下,看看它是否适合你。

kupeojn6

kupeojn68#

我有一个想法。它真的很难看。我唯一能想到的是在对行排序之前,分离额外的行(使用div),并使用JQuery以某种方式存储它。然后在排序完成后,在正确的位置重新附加行(使用div)。
那可能,不,我应该说会,变得丑陋真的很快,特别是与分页和过滤...

tp5buhyn

tp5buhyn9#

你可以使用getBoundingClientRect来获取元素的位置,然后将这些值设置为div css位置lefttop。还必须考虑窗口滚动,因为getBoundingClientRect将返回相对于窗口视口的位置。
下面的例子将在任何tr行下定位一个名为#tooltipdiv。我使用jQuery是为了方便,但是您可以很容易地将其转换为普通的JS。

<script>
$("tr").hover(
  function () {
    const row = this;
    const bounds = row.getBoundingClientRect();
    tooltip.css({
      left: bounds.left + window.scrollX,
      top: bounds.bottom + window.scrollY
    });
  },
  function () {}
);
</script>

<table> ... </table>
<div id="#tooltip"> ... </div>

确保div定位absolute,并跳过指针事件,否则div将阻止悬停事件到达表元素。

<style>
  #tooltip {
    position: absolute;
    pointer-events: none;
  }
</style>

祝你好运!

相关问题