实现表格多行展开：现有jQuery代码格式异常问题排查

嘿，我一眼就瞅出问题所在了——你那隐藏行的格式乱掉，根源是隐藏行里放了两个colspan=4的<td>，但整个表格总共只有4列，这直接让一行的列数翻倍到8列，浏览器只能强行撑大表格，格式自然就崩了。下面给你一步步捋清楚修复方案：

核心问题拆解 #

原隐藏行的代码是这样的：

<tr id="hidden_row1" class="hidden_row">
<td colspan=4>Ankit is 25 years old...</td>
<td colspan=4>and he like soccer...</td>
</tr>

两个<td>的colspan都是4，加起来占了8列，远超表格本身的4列宽度，浏览器没办法只能乱排版，这就是格式异常的罪魁祸首。

具体修复步骤 #

1. 修正隐藏行的HTML结构 #

把隐藏行的内容合并到一个colspan=4的<td>里，如果需要换行，用<br>或者内部<div>来实现，绝对不能多加一个<td>。比如：

<tr id="hidden_row1" class="hidden_row">
  <td colspan="4">
    Ankit is 25 years old and he is a computer programmer he earns 60000 per month<br>
    and he likes soccer, tennis and reading
  </td>
</tr>

2. 添加初始隐藏的CSS样式 #

你给隐藏行加了hidden_row类，但没写对应的CSS规则，浏览器根本不知道要默认隐藏这些行。补上这段CSS：

.hidden_row {
  display: none;
}

3. 可选：优化JS事件绑定（推荐） #

原代码用inline的onclick虽然能用，但现代前端更推荐用jQuery的事件绑定，代码更整洁，后续维护也方便：

$(document).ready(function() {
  // 给所有可点击的行绑定事件（给这些行加个class比如"toggle-row"）
  $('#table_detail tr.toggle-row').click(function() {
    // 直接选中当前行的下一个隐藏行，不用硬写ID
    $(this).next('.hidden_row').toggle();
  });
});

这样你就不用在每个行里重复写onclick="show_hide_row('xxx')"了，只需要给可点击的行加个toggle-row类就行。

完整修复后的代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden_row {
      display: none;
    }
    #table_detail {
      border-collapse: collapse; /* 可选：让表格边框更整齐紧凑 */
      width: 80%; /* 可选：给表格设置宽度，避免撑满整个页面 */
    }
    #table_detail th, #table_detail td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    .toggle-row {
      cursor: pointer; /* 可选：给可点击行加鼠标指针，提示用户可交互 */
      background-color: #f8f8f8;
    }
    .toggle-row:hover {
      background-color: #f0f0f0; /* 可选：鼠标悬停时变色，提升体验 */
    }
  </style>
</head>
<body>
<div id="wrapper">
  <table id="table_detail" align="center" cellpadding="10">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
      <th>Job</th>
    </tr>
    <tr class="toggle-row">
      <td>Ankit</td>
      <td>25</td>
      <td>60000</td>
      <td>Computer Programmer</td>
    </tr>
    <tr class="hidden_row">
      <td colspan="4">
        Ankit is 25 years old and he is a computer programmer he earns 60000 per month<br>
        and he likes soccer, tennis and reading
      </td>
    </tr>
    <tr class="toggle-row">
      <td>Aarti</td>
      <td>29</td>
      <td>40000</td>
      <td>Web Designer</td>
    </tr>
    <tr class="hidden_row">
      <td colspan="4">
        Aarti is 29 years old and she is a web designer she earns 40000 per month<br>
        and she likes trying different cuisines
      </td>
    </tr>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.toggle-row').click(function() {
    $(this).next('.hidden_row').toggle();
  });
});
</script>
</body>
</html>

额外优化说明 #

• 加了border-collapse: collapse让表格边框更美观，给表格设了宽度避免撑满页面
• 给可点击行加了鼠标悬停效果和指针样式，提升用户交互体验
• 修正了原文里的小语法错误（比如人称代词和动词形式）

内容的提问来源于stack exchange，提问作者Rick Kap