Question

我有一个基本的HTML页面，其中包含一个包含2列和2列的表格。 2排。我想将这两列作为标签进行转换，点击每一行时，它还应显示一个段落或一个带有1行和1的基本表格。列。

一切都应该在第一张表中发生。

我该怎么做？我应该使用jQuery吗？任何小提琴链接都会非常棒。

<table width="100%" id="table" class="table" border="1" cellpadding="0" cellspacing="0">
<tr>
    <td><div contenteditable>tab1</div></td>
    <td><div contenteditable>tab2</div></td>
        </tr>
<tr>
    <td><div contenteditable>tab1 info</div></td>
    <td><div contenteditable>tab2 info</div></td>
</tr>

Answer 1

我不确定这是不是您想要达到的目标，但这里有一个简短的--> fiddle <--

您需要使用javascript。

HTML：

<table>
  <tr>
    <td class="tab"><div contenteditable>tab1</div></td>
    <td class="tab not-active"><div contenteditable>tab2</div></td>
  </tr>
  <tr>
    <td>
      <div contenteditable class="tab-content">tab1 info</div>
      <div contenteditable class="tab-content not-active">tab2 info</div>
    </td>
  </tr>
</table>

CSS：

.tab-content.not-active {
  display: none;
}

jQuery的：

$('.tab').on('click', function () {
    $('.tab').toggleClass('not-active');
    $('.tab-content').toggleClass('not-active');
});

如何获取动态HTML标签

1 个答案: