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

<divclass="container"><formmethod='post'action='send.php'><tableid="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><tdstyle="white-space: nowrap"><inputtype="text"class="receipt"name="text1"placeholder="receipt"><inputtype="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;
}

<divclass="container"><tableid="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): ?>
      <formmethod='post'action='send.php'><tr><tdclass="fields"><inputtype="text"name="text1"placeholder="receipt"style="width:70%"><inputtype="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>