Dynamic data print

Print dynamically generated data when print button clicked- Table has an ID but table data (td and tr) data's are dynamically generated one.

I am able to get the data in the table and I have tried printing everything using window. Print JavaScript.

HTML code -

for (element in data) {
  var productsArray = data[element].products.split(',');
  var quantityArray = data[element].quantity.split(',');
  var chemistArray = data[element].Retailername.split(',');
  var pobArray = data[element].Pob.split(',');

  // find the largest row number
  var maxRows = Math.max(productsArray.length, quantityArray.length, chemistArray.length, pobArray.length);

  var content = '';
  var date = '<td rowspan="' + maxRows + '">' + data[element].date + '</td>';
  var doctorName = '<td rowspan="' + maxRows + '">' + data[element].doctor_name + '</td>';
  var locations = '<td rowspan="' + maxRows + '">' + data[element].locations + '</td>';
  var area = '<td rowspan="' + maxRows + '">' + data[element].area + '</td>';

  content += '<tr>' + date + doctorName;

  for (var row = 0; row < maxRows; row++) {
    if (row !== 0) {
      content += '<tr>';
    }

    // the ternary operator is used to check whether there is items in the array
    // if yes, insert the value between the <td></td> tag
    // if not, just add an empty <td></td> to the content as a placeholder
    content += '<td>' + (productsArray[row] ? productsArray[row] : '') + '</td>';
    content += '<td>' + (quantityArray[row] ? quantityArray[row] : '') + '</td>';
    content += '<td>' + (chemistArray[row] ? chemistArray[row] : '') + '</td>';
    content += '<td>' + (pobArray[row] ? pobArray[row] : '') + '</td>';

    if (row === 0) {
      content += locations + area + '</tr>';
    } else {
      content += '</tr>';
    }
  }

  $('#tbody').append(content);
}
}

<div class="panel-body">
  <table class="table table-hover" id="TableData">
    <caption>Representative Report</caption>
    <thead>
      <th>Date</th>
      <th>Doctor's Name </th>
      <th>Sampling Tablets </th>
      <th>Samling Quantity</th>
      <th>Chemists</th>
      <th>POB</th>
      <th>Location</th>
      <th>Area</th>
    </thead>
    <tbody id="tbody"></tbody>
  </table>
</div>

Here I am appending all the td's and tr's to table

And I want to print only Some columns of the table assume (Date, Doctorname and chemistname) when print Button is clicked.

I can use Onclick="Window.print" But this prints whole page either whole table.

Any help would really be appreciated.

Solution

You can use css for this. Just define the column that you want to hide. Here is a sample. I hide the second and last column. Hope to help and Happy new year, my friend :))

@media print {
  table td:last-child {
    display: none
  }

  table th:last-child {
    display: none
  }

  table td:nth-child(2) {
    display: none
  }

  table th:nth-child(2) {
    display: none
  }
}

<div class="panel-body">
  <table class="table table-hover" id="TableData">
    <caption>Representative Report</caption>
    <thead>
      <th>Doctor's Name</th>
      <th>Chemists</th>
      <th>POB</th>
      <th>Location</th>
      <th>Area</th>
    </thead>
    <tbody id="tbody">
      <tr>
        <td>Iron Man</td>
        <td>ABC</td>
        <td></td>
        <td>China</td>
        <td>Asia</td>
      </tr>
      <tr>
        <td>Captain</td>
        <td>XYZ</td>
        <td></td>
        <td>England</td>
        <td>Europe</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="btnPrin" onclick="window.print();">Print</button>