Question

我希望在从数据库中提取的每条记录的行上都有一个文本框。目前我有一个表＆＃34; jquery datatables＆＃34; 从数据库中提取记录并显示它们。我想介绍一个文字字段说＆＃34;收据＆＃34;列可以键入文本并提交保存。我在将文本字段设置为沿着数据库中每条记录的行时遇到了挑战。我试过这个和很多方法，但没有显示列或文本字段。帮忙，任何人？谢谢。

＆＃13;

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

＆＃13;

Answer 1

不确定这是否是您想要寻找的？

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

Answer 2

您可以在下面的代码中添加另一个名为“收据”的列。此外，您实际上并不需要<tr>内<thead>，因为您将为表中的每一行提供一个提交按钮，为每行创建<form>并打印查询结果，如图所示。 / p>

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>

如何在JQuery DataTables中的表格单元格内输入文本字段

2 个答案: