How to Make input text field inside table cell in

问题:

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 them. I want to introduce a text field say "Receipt" column where one can type text and submit to save. I'm having challenges designing the text field to be along the row of every record from database. I tried this and a number of ways but does not display the column or the text field. Help, any one? Thanks.

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

    </tr>
            </thead>
     <tr> <td>Receipt: <input type="text" name="text1" placeholder="receipt"> </td>
   <td><input type="submit" value="Submit"> </td> </table> </tr>
     </table>

     </form>
        </div>

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

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