How To Make Input Text Field Inside Table Cell In JQuery DataTables

I want to have a text box along the row of every record fetched from a database. Currently I have a table 'jquery datatables' that fetches records from a database and displays th

Solution 1:

Not sure if this is what you meant to look for?

.receipt[type=text] {
  width: calc(100% - 50px);
}
.submit[type=submit] {
  width: 50px;
}

<div class="container">
  <form method='post' action='send.php'>

    <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Customer Name</th>
          <th>Amount Paid</th>
          <th>Transaction ID</th>
          <th>Mobile Number</th>
          <th>Payment Date</th>
          <th>Account</th>
          <th>Receipt</th>
        </tr>
      </thead>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="white-space: nowrap">
          <input type="text" class="receipt" name="text1" placeholder="receipt">
          <input type="submit" class="submit" value="Submit">
        </td>
    </table>
    </tr>
    </table>

  </form>
</div>

Solution 2:

You could add another column called receipts like in the code snipped below. Also you dont actually need the <tr> inside <thead> and since you will have a submit button for each row in the table make the <form> for each row and print the query results as shown.

table{
  text-align: center;
}

<div class="container">
    <table id="employee-grid" cellpadding="2" cellspacing="2" border="1" class="display" width="100%">
      <thead>
          <th>Receipt</th>
          <th>ID</th>
          <th>Customer Name</th>
          <th>Amount Paid</th>
          <th>Transaction ID</th>
          <th>Mobile Number</th>
          <th>Payment Date</th>
          <th>Account</th>
      </thead>
      <?php foreach($result_from_db_query as $row): ?>
      <form method='post' action='send.php'>
      <tr>
        <td class="fields">
          <input type="text" name="text1" placeholder="receipt" style="width:70%">
          <input type="submit" value="Submit" style="width:20%">
        </td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
      </form>
      <?php endforeach; ?>
    </table>
</div>