Динамическая печать данных

Question

Печать динамически сгенерированных данных при нажатии кнопки печати. ​​Таблица имеет идентификатор, но данные таблицы (td и tr) генерируются динамически.

Я могу получить данные в таблице, и я попытался распечатать все, используя window.print java-скрипт.

HTML код -

 <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>

Ajax вызывает для создания отчета в таблице -

 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);
  }
 },

Здесь я добавляю все td и tr в таблицу

И я хочу печатать только некоторые столбцы таблицы предполагают (Дата, Имя доктора и Имя химика) при нажатии кнопки печати.

Я могу использовать Onclick = "Window.print", но это печатает всю страницу или всю таблицу.

Любая помощь будет по достоинству оценена.

Answer 1

Вы можете использовать CSS для этого. Просто определите столбец, который вы хотите скрыть. Вот образец. Я скрываю второй и последний столбец. Надеюсь на помощь и с новым годом, мой друг :))

<style>
     @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}
    } 
</style>


<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>