Firebase Realtime Database表格打印按钮与对应行数据匹配问题求助

我看了你的代码，问题主要出在HTML结构错误和没有给打印按钮绑定对应行的数据这两点上，导致点击任何按钮都只会操作同一个iframe且没有更新对应行的内容。下面一步步给你修正：

第一步：修正HTML结构 #

原来的<iframe>放在<thead>里是错误的，而且你把数据行加到了<thead>里，这不符合表格规范（<thead>用于表头，<tbody>才是存放数据行的地方）。修改后的HTML：

<table class="table">
  <thead>
    <tr>
      <th>No</th>
      <th>nama</th>
      <th>tempatlahir</th>
      <th>tanggallahir</th>
      <th>alamat</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
</table>
<!-- 把iframe移到表格外面，避免破坏表格结构 -->
<iframe src="suratsktm.html" name="printFrame" style="display: none;"></iframe>

第二步：修改Firebase数据加载的JS代码 #

原来的代码只是生成了打印按钮，但没有把当前行的数据传递给打印页面。现在我们要给每个按钮绑定点击事件，把对应行的用户数据传递到iframe页面后再触发打印：

var firebaseConfig = { /* 你的Firebase配置 */ };
firebase.initializeApp(firebaseConfig);
var firebaseRef = firebase.database().ref("FormSktm");

firebaseRef.once("value", function(snapshot){
  var stdNo = 0;
  var tbody = document.getElementById('table-body');
  snapshot.forEach(function(element){
    stdNo++;
    // 提取当前行的用户数据
    var userData = element.val();
    // 创建表格行元素
    var row = document.createElement('tr');
    row.innerHTML = `
      <td>${stdNo}</td>
      <td>${userData.nama}</td>
      <td>${userData.tempatlahir}</td>
      <td>${userData.tanggallahir}</td>
      <td>${userData.alamat}</td>
      <td><button class="print-btn">Print</button></td>
    `;
    // 给当前行的打印按钮绑定点击事件
    var printBtn = row.querySelector('.print-btn');
    printBtn.addEventListener('click', function(){
      // 获取iframe的window对象
      var printFrame = window.frames['printFrame'];
      // 调用打印页面的函数，传递当前行数据
      printFrame.setSuratData(userData);
      // 等待DOM更新完成后触发打印
      setTimeout(function(){
        printFrame.print();
      }, 100);
    });
    // 将行添加到tbody中
    tbody.appendChild(row);
  });
});

第三步：修改打印页面（suratsktm.html） #

我们需要在这个页面中添加一个接收数据的函数，用来更新页面上的用户信息：

<ul>
  <div id="logo_surat">logo </div>
  <div id="nomer_surat">
    <div class="nama_surat">Surat Keterangan Tidak Mampu</div>
    <div>Nomor : </div>
  </div>
  <div id="surat_pembuka">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yang bertanda tangan dibawah ini , Kepala Desa , Kecamatan, Kabupaten menerangkan dengan sebenarnya bahwa orang tersebut dibawah ini :
  </div>
  <div class="content_surat">
    <div>
      <label>Nama </label>
      <label id="namaSktm" class="isian_surat"></label>
    </div>
    <div>
      <label>Tempat lahir </label>
      <span id="ttlSktm" class="isian_surat"></span>
    </div>
    <div>
      <label>Tanggal lahir </label>
      <label id="tglSktm" class="isian_surat"></label>
    </div>
    <div>
      <label>Alamat </label>
      <label id="alamatSktm" class="isian_surat"></label>
    </div>
  </div>
  <div id="surat_penutup">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Demikian Surat Keterangan ini diberikan, untuk dapat digunakan sebagaimana mestinya.</div>
  <div id="tanda_tangannya">ttd disini</div>
</ul>

<script>
// 定义接收数据的函数，供父页面调用
function setSuratData(data){
  document.getElementById('namaSktm').textContent = data.nama;
  document.getElementById('ttlSktm').textContent = data.tempatlahir;
  document.getElementById('tglSktm').textContent = data.tanggallahir;
  document.getElementById('alamatSktm').textContent = data.alamat;
}
</script>

改动说明 #

1. 规范表格结构：将数据行放到<tbody>中，iframe移到表格外，避免破坏HTML结构的合理性。
2. 绑定对应行数据：每个打印按钮点击时，都会把当前行的用户数据传递给打印页面，更新页面内容后再触发打印，彻底解决了所有按钮打印同一行的问题。
3. 使用事件监听替代内联onclick：内联事件不利于维护，addEventListener能更清晰地绑定当前行的上下文，确保数据传递准确。

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