javascript - 使用 javascript 在表中创建子标题

标签 javascript html css

我想知道如何仅使用 javascript 创建子标题列。我的数据来自服务器,所以我只想创建列和副标题。

因此我已经创建了列,但是如何仅使用 javascript(css 可以存在)来创建子标题,而不是借助我无法获得的 html。 Like this

谁能帮我解决这个问题。 这是表格的一些演示 -

enter image description here

在顶部我需要添加两个 3 列的子标题

最佳答案

$(document).ready(function() {
  $('#addSubHeader').click(function() {
    var subHeader =  "<tr><th>3</th><th>4</th>><th>5</th><th>6</th></tr>";
    $(subHeader).appendTo("thead");
  });
 });
th {
  text-align:center;
}

td {
  width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
  <tr>
    <th colspan="2">1</th>
    <th colspan="2">2</th>
  </tr>
</thead>
<tbdody>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
    <tr>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
  </tr>
</tbdody>
</table>
<button id="addSubHeader">
add a subheader</button>
</button>

关于javascript - 使用 javascript 在表中创建子标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43013159/

相关文章:

php - 无法使用php向mysql插入数据

javascript - 在悬停时为列表中的 sibiling li 元素设置样式

css - 在容器内拆分两个 div 相等

javascript - 如何防止 PhoneGap 设备就绪功能被执行两次

javascript - Node 子进程生成 "TypeError: Bad argument TypeError"?

javascript - 将日期时间转换为 ISO 格式

html - 我们可以在 CSS 中使用嵌套的子选择器还是 ">"

javascript - Photoshop Javascript 获取选定的路径项目?

html - Div 不能像 inline-block 一样正确

html - 定义列表光盘未显示