JQuery DataTablesのテーブルセル内に入力テキストフィールドを作成する方法

Question

データベースからフェッチされたすべてのレコードの行に沿ってテキストボックスを作成したいとします。現在私はデータベースからレコードを取り出して表示するテーブル"jquery datatables"を持っています。私はテキストフィールドを紹介したいと思います。私はデータベースからのすべてのレコードの行に沿ってテキストフィールドを設計するという課題を抱えています。私はこれとさまざまな方法を試みましたが、列またはテキストフィールドを表示しません。ヘルプ、いずれか？ありがとう。

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

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

あなたは以下の切り取らコードのように別の列と呼ばれる領収書を追加することができます。また、実際にが<thead>の内部にある必要はありません。また、テーブルの各行に送信ボタンがあるので、各行に<form>を作成し、表示されているようにクエリ結果を出力します。

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>