如何在JQuery数据表中的表格单元格内输入文本字段 [英] How to Make input text field inside table cell in JQuery DataTables

问题描述

我想要从数据库中提取的每条记录的行中都有一个文本框。目前，我有一个表jquery datatables从数据库中获取记录并显示它们。我想介绍一个文本字段说收据列，其中可以输入文本并提交保存。我在设计文本字段时遇到了一些挑战，就是沿着数据库中每条记录的行。我尝试了这个方法，但是没有显示列或文本字段。帮助，任何一个？谢谢。

 < div class =container> < form method ='post'action ='send.php'>< table id =employee-gridcellpadding =0cellspacing =0border =0class =displaywidth = 100％> < thead> < tr> < th> ID< / th> < th>客户名称< / th> < th>已付款金额< / th> < th>事务ID< / th> < th>移动号码< th> < th>支付日期< / th> < th>帐户< / th> < / tr> < / thead> < tr> < td>收据：< input type =textname =text1placeholder =receipt> < / td> < td>< input type =submitvalue =Submit> < / td> < / table> < / tr> < / table> < / form> < / div>  

解决方案

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

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  table {text-align：center;}  

 < div class =container> < table id =employee-gridcellpadding =2cellspacing =2border =1class =displaywidth =100％> < thead> < th>收据< / th> < th> ID< / th> < th>客户名称< / th> < th>已付款金额< / th> < th>事务ID< / th> < th>移动号码< th> < th>支付日期< / th> < th>帐户< / th> < / thead> <？php foreach（$ result_from_db_query as $ row）：？> < form method ='post'action ='send.php'> < tr> < td class =fields> < input type =textname =text1placeholder =receiptstyle =width：70％> < input type =submitvalue =Submitstyle =width：20％> < / td> < td> ...< / td> < td> ...< / td> < td> ...< / td> < td> ...< / td> < td> ...< / td> < td> ...< / td> < td> ...< / td> < / tr> < / form> <？php endforeach; ？> < / table>< / div>  

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>

解决方案

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>

这篇关于如何在JQuery数据表中的表格单元格内输入文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！