SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>存放同业款项 列表原型</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#28a745',
            greenBtn: '#36b37e',
            sideBg: '#f0f7f4'
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .table-header-bg { background-color: #e9ecef; }
      .row-yellow { background-color: #fff200; }
    }
  </style>
</head>
<body class="p-4 bg-white">
  <div class="border border-gray-300 rounded">
    <!-- 标题行 -->
    <div class="flex items-center justify-between p-2 border-b border-gray-300">
      <h1 class="text-2xl font-bold text-gray-800 flex-1 text-center">存放同业款项（示例）</h1>
      <div class="flex gap-2">
        <button id="toggleColBtn" class="bg-gray-200 px-2 py-1 rounded hover:bg-gray-300">展开隐藏列</button>
        <button class="bg-greenBtn text-white px-3 py-1 font-bold rounded hover:bg-primary">导出</button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="overflow-x-auto">
      <table class="w-full border-collapse">
        <thead>
          <tr class="table-header-bg">
            <th class="border border-gray-400 px-2 py-2 text-center">序号</th>
            <th class="border border-gray-400 px-2 py-2 text-center">一级报表项目</th>
            <th class="border border-gray-400 px-2 py-2 text-center">数据来源</th>
            <th class="border border-gray-400 px-2 py-2 text-center">科目代码</th>
            <th class="border border-gray-400 px-2 py-2 text-center">筛选字段</th>
            <th class="border border-gray-400 px-2 py-2 text-center">取值</th>
            <th id="col-other-filter" class="border border-gray-400 px-2 py-2 text-center hidden">其他筛选字段</th>
            <th id="col-measure" class="border border-gray-400 px-2 py-2 text-center hidden">度量字段</th>
            <th class="border border-gray-400 px-2 py-2 text-center">操作</th>
          </tr>
        </thead>
        <tbody id="tableBody">
          <tr data-rowkey="item1">
            <td class="border border-gray-400 px-2 py-2 text-center">1</td>
            <td class="border border-gray-400 px-2 py-2 text-center">存放境内同业</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">123456</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
          <tr data-rowkey="item2">
            <td class="border border-gray-400 px-2 py-2 text-center">2</td>
            <td class="border border-gray-400 px-2 py-2 text-center">存放境内其他金融机构</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">……</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
          <tr data-rowkey="item3">
            <td class="border border-gray-400 px-2 py-2 text-center">3</td>
            <td class="border border-gray-400 px-2 py-2 text-center">存放境外同业</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">……</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
          <tr data-rowkey="item4">
            <td class="border border-gray-400 px-2 py-2 text-center">4</td>
            <td class="border border-gray-400 px-2 py-2 text-center">总额</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">……</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
          <tr data-rowkey="item5">
            <td class="border border-gray-400 px-2 py-2 text-center">5</td>
            <td class="border border-gray-400 px-2 py-2 text-center">减值准备</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">……</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
          <tr data-rowkey="item6">
            <td class="border border-gray-400 px-2 py-2 text-center">6</td>
            <td class="border border-gray-400 px-2 py-2 text-center">账面价值</td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">……</td>
            <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
            <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
            <td class="border border-gray-400 px-2 py-2 text-center">
              <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
                <i class="fa fa-angle-down"></i>
                <span>展开明细</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    const detailTemplate = {
      item1: `
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="8">1</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="8">存放境内同业</td>
  <td class="border border-gray-400 px-2 py-2">科目余额表</td>
  <td class="border border-gray-400 px-2 py-2">10110100201</td>
  <td class="border border-gray-400 px-2 py-2">（1）存放同业款项-存放境内银行款项-他行存款-成本</td>
  <td class="border border-gray-400 px-2 py-2 text-center">1000</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row">币种、机构等</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row">期末借方</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="8">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2">科目余额表</td>
  <td class="border border-gray-400 px-2 py-2">10110100202</td>
  <td class="border border-gray-400 px-2 py-2">（2）存放同业款项-存放境内银行款项-他行存款-应计利息</td>
  <td class="border border-gray-400 px-2 py-2 text-center">2000</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row">币种、机构等</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row">期末借方</td>
</tr>
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2">资产负债明细表YB01</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">（3）项目号=1108000425……存放境内银行业存款类金融机构</td>
  <td class="border border-gray-400 px-2 py-2 text-center">3000</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row">币种、机构等</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row">年累计借方-本年累计贷方</td>
</tr>
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2">资产负债明细表YB01</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">（4）项目号=1108000425……存放境内银行业非存款类金融机构</td>
  <td class="border border-gray-400 px-2 py-2 text-center">4000</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row">币种、机构等</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row">年累计借方-本年累计贷方</td>
</tr>
<tr data-detail-row="item1" class="row-yellow">
  <td class="border border-gray-400 px-2 py-2 font-bold">基础数据小计</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">（1）+（2）+（3）+（4）+常数</td>
  <td class="border border-gray-400 px-2 py-2 text-center">10000</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
</tr>
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2 font-bold">管理层调整</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">存放同业外币存在未及时记账-1</td>
  <td class="border border-gray-400 px-2 py-2 text-center">1800</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
</tr>
<tr data-detail-row="item1">
  <td class="border border-gray-400 px-2 py-2 font-bold">披露口径调整</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">对应【数据调整说明】</td>
  <td class="border border-gray-400 px-2 py-2 text-center">【数据调整金额】</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
</tr>
<tr data-detail-row="item1" class="row-yellow">
  <td class="border border-gray-400 px-2 py-2 font-bold">报表项目小计</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2">（1）+（2）+（3）+（4）+常数+管理层调整数+披露口径调整数</td>
  <td class="border border-gray-400 px-2 py-2 text-center">123456</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
</tr>`,
      item2: `
<tr data-detail-row="item2">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">2</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">存放境内其他金融机构</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">……</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>`,
      item3: `
<tr data-detail-row="item3">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">3</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">存放境外同业</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">……</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>`,
      item4: `
<tr data-detail-row="item4">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">4</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">总额</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">……</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>`,
      item5: `
<tr data-detail-row="item5">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">5</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">减值准备</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">……</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>`,
      item6: `
<tr data-detail-row="item6">
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">6</td>
  <td class="border border-gray-400 px-2 py-2 text-center" rowspan="1">账面价值</td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">……</td>
  <td class="border border-gray-400 px-2 py-2 hidden col-other-filter-row"></td>
  <td class="border border-gray-400 px-2 py-2 hidden col-measure-row"></td>
  <td class="border border-gray-400 px-2 py-2 text-center">
    <button class="toggleBtn inline-flex items-center gap-1.5 bg-greenBtn text-white px-2.5 py-1 rounded-md text-sm hover:bg-primary transition-all shadow-sm">
      <i class="fa fa-angle-up"></i>
      <span>收起明细</span>
    </button>
  </td>
</tr>`
    };
    const originHtml = {};
    const tbody = document.getElementById('tableBody');
    function bindBtn() {
      document.querySelectorAll('.toggleBtn').forEach(btn => {
        btn.onclick = function () {
          const txt = this.innerText.trim();
          const tr = this.closest('tr');
          let key;
          if(tr.hasAttribute('data-rowkey')){
            key = tr.dataset.rowkey;
          }else if(tr.hasAttribute('data-detail-row')){
            key = tr.dataset.detailRow;
          }
          if(!key) return;
          if(txt === "展开明细"){
            originHtml[key] = tr.outerHTML;
            tr.outerHTML = detailTemplate[key];
          }else if(txt === "收起明细"){
            document.querySelectorAll(`tr[data-detail-row="${key}"]`).forEach(row=> row.remove());
            tbody.insertAdjacentHTML('afterbegin', originHtml[key]);
          }
          bindBtn();
        }
      })
    }
    bindBtn();
    const toggleColBtn = document.getElementById('toggleColBtn');
    const otherFilterTh = document.getElementById('col-other-filter');
    const measureTh = document.getElementById('col-measure');
    function refreshColStatus() {
      const otherFilterTds = document.querySelectorAll('.col-other-filter-row');
      const measureTds = document.querySelectorAll('.col-measure-row');
      const isShowCol = toggleColBtn.innerText === "收起隐藏列";
      otherFilterTds.forEach(td => td.classList.toggle('hidden', !isShowCol));
      measureTds.forEach(td => td.classList.toggle('hidden', !isShowCol));
    }
    toggleColBtn.addEventListener('click', () => {
      if (toggleColBtn.innerText === "展开隐藏列") {
        toggleColBtn.innerText = "收起隐藏列";
        otherFilterTh.classList.remove('hidden');
        measureTh.classList.remove('hidden');
      } else {
        toggleColBtn.innerText = "展开隐藏列";
        otherFilterTh.classList.add('hidden');
        measureTh.classList.add('hidden');
      }
      refreshColStatus();
    })
  </script>
</body>
</html>
<!-- （注：内容由AI生成） -->