javascript - 如何从 foreach 打印单独的行？

Question

我在 php 中有一个 foreach 数组，其中显示有很多行的记录，我的 View 文件如下，

         <?php
          $count = 1;
          foreach ($resultlist as $student) {
            ?>
            <div class="slide-row" id="printableArea" style="padding:30px;border:2px solid #999;">
              <div class="row">
                <div class="col-md-10">
                  <div class="row">
                    <div class="col-md-4">
                      <label> Name: </label>
                      <?php echo $student['firstname']; ?>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-5">
                      <label> Standard: </label>
                      <?php echo $student['class']; ?>
                    </div>
                    <div class="col-md-5">
                      <label> Section: </label>
                      <?php echo $student['section']; ?>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-5">
                      <label> Admission No: </label>
                      <?php echo $student['admission_no']; ?>
                    </div>
                    <div class="col-md-5">
                      <label> House: </label>
                      <!-- <?php echo $student['section']; ?> -->
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-5">
                      <label> Religion: </label>
                      <?php echo $student['religion']; ?>
                    </div>
                    <div class="col-md-5">
                      <label> Caste: </label>
                      <?php echo $student['cast']; ?>
                    </div>
                  </div>
                </div>
                <div class="col-md-2">
                  <img class="img-responsive img-thumbnail width150" alt="Cinque Terre" src="<?php echo base_url(); ?>backend/dist/img/jeevaschool.png" alt="Image">
                </div>
              </div>
              <br>
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>Community</th>
                    <th>DOB</th>
                    <th>Age</th>
                    <th>Blood Group</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><?php echo $student['community']; ?></td>
                    <td><?php echo $student['dob']; ?></td>
                    <td></td>
                    <td><?php echo $student['blood_group']; ?></td>
                  </tr>
                </tbody>
              </table>
              <div class="row">
                <div class="col-md-4">
                  <label> Name of the Father: </label>
                  <?php echo $student['father_name']; ?>
                </div>
                <div class="col-md-4">
                  <label> Occupation: </label>
                  <?php echo $student['father_occupation']; ?>
                </div>
                <div class="col-md-4">
                  <label> Name of the Mother: </label>
                  <?php echo $student['mother_name']; ?>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <label> Occupation: </label>
                  <?php echo $student['mother_occupation']; ?>
                </div>
                <div class="col-md-4">
                  <label> Mobile Number: </label>
                  <?php echo $student['mobileno']; ?>
                </div>
                <div class="col-md-4">
                  <label> Email ID: </label>
                  <?php echo $student['email']; ?>
                </div>
              </div><br><br>
            </div>
            <button class="btn btn-primary" onclick="printDiv('printableArea');">Print</button>
            <br><br><br>
              <?php
            }
            $count++;
          }
          ?>
      </div>

记录逐一显示，我需要通过单击相应行上的打印按钮来单独打印每一行。

我有带 id 的 html

<div class="slide-row" id="printableArea" style="padding:30px;border:2px solid #999;">

和打印按钮

<button class="btn btn-primary" onclick="printDiv('printableArea');">Print</button>

JS

  function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

我尝试了上面的方法，它只会打印第一行记录，但我需要获取每一行的相应打印结果。

Answer 1

Id 在页面中应该是唯一的。根据您的代码，页面中将有许多 id printableArea 的元素。相反，您可以添加动态 ID。

例如，将计数变量添加到 Ids

<div class="slide-row" id="printableArea_<?php echo $count; ?>" style="padding:30px;border:2px solid #999;">

在你的按钮

<button class="btn btn-primary" onclick="printDiv('printableArea_<?php echo $count; ?>');">Print</button>