如何删除<a> tag while printing in HTML?

Question

How to remove the link a tag when giving a print command?

.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank">Anu Bohra</a> <span class="p">Hi</span></td>
      <td>30</td>
    </tr>
  </tbody>
</table>

I tried to add class (np) in a tag, but then it is only showing Hi, (which is after tag)in the second column.

But I want to show the content between opening and closing tags as well as Hi.

But for my code it is showing content + link + Hi

Answer 1

你必须隐藏显示打印链接的a[href]:after，所以你可以说：

＆＃13;

＆＃13;

.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
  a[href]:after {
    display: none;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>


    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank">Anu Bohra</a> <span class="p">Hi</span></td>
      <td>30</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在包含相同内容的锚标记后添加一个元素。现在，您可以在打印时通过向其添加类p来有条件地显示此内容：

 <span class="p">Anu Bohra</span>

.p {
  display: none;
}

@media print {
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-large btn-success np" onClick="window.print()">Print</button>
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Sr.</th>
      <th>Student</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <a href="http://jainvidhya.co.in/result.php?arn=CB2017AS11Z89010" target="_blank" class="np">Anu Bohra</a>
        <span class="p">Anu Bohra</span>
        <span class="p">Hi</span>
      </td>
      <td>30</td>
    </tr>
  </tbody>
</table>