在datatable中动态添加textfield和button [英] Add dynamically textfield and button in datatable

问题描述

我有一张已经有文本框和按钮的桌子。我想当用户点击（添加）按钮然后自动添加具有相同文本框和相同按钮的新行与添加操作。



以下是我的代码。





请帮帮我怎么样我添加新行，我的（

 Product_name 

）文本框是自动完成功能。



请帮助



我尝试过：

< pre> ;< table id =product_tableclass =displaycellspacing =0width =50％> 
< thead> 
< tr> 
< th align =Center>产品名称< / th> 
< th align =Center> Quantity< / th> 
< th align =Center>点击我< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>< input class =product_texttype =textplaceholder =Type Product Namename =Product_nameid =Product_namerequired => 
< / td> 
< span id =product_list>< / span> 
< td>< input class =product_texttype =textplaceholder =Quantityname =Quantityrequired =>< / td> 
< td>< input class =product_texttype =buttonid =addRowname =addRowvalue =Add>< / td> 
< / tr> 
< / tbody> 
< / table> 

 $（＃addRow）。click（function（）{
 table。 row.add（[
]）。draw（false）; 
}）; 
 

解决方案

（＃addRow）。click（function（）{
table.row.add （[
]）。draw（false）;
}）;

这里我使用了简单的Javascript而不是Jquery

< input class =product_textonClick =AddNewRow（）type =buttonid =addRowname =addRowvalue =Add> 

 功能 AddNewRow（）
 {
  var  table =  document  .getElementById（  product_table）; 
  var  row = table.insertRow（table.rows.length）; 
  var  cell1 = row.insertCell（ 0 ）; 
  var  cell2 = row.insertCell（ 1 ）; 
  var  cell3 = row.insertCell（ 2 ）; 
 
 cell1.innerHTML =  < input type ='text'class ='product_text' placeholder ='Type product Name'/> 
 cell2.innerHTML =  < input type ='text'class ='product_text'placeholder ='Quantity'/> 
 cell3.innerHTML =  < input class ='product_text'type ='button'onClick ='AddNewRow（）'name ='addRow'value ='Add'> 
} 

i Have a table which is already have textbox and button. i want when user click (Add) button then automatically add new row with same textbox and same button with add action.

Below is my code.


please help me how to i add new row, and my (

Product_name

)textbox is auto complete feature.

please Help

What I have tried:

<pre><table id="product_table" class="display" cellspacing="0" width="50%">
        <thead>
            <tr>
                <th align="Center">Product Name</th>
                <th align="Center">Quantity</th>
                <th align="Center">Click Me</th>
            </tr>
        </thead>		
         <tbody>
            <tr>
                <td><input class="product_text" type="text" placeholder="Type Product Name" name="Product_name" id="Product_name" required="">
                </td>
                <span id="product_list"></span> 
                <td><input class="product_text" type="text" placeholder="Quantity" name="Quantity" required=""></td>
                <td><input class="product_text" type="button" id="addRow" name="addRow" value="Add"></td>
            </tr>
            </tbody>
            </table>

$("#addRow").click(function(){
      table.row.add( [
      ] ).draw( false );
  });

解决方案

("#addRow").click(function(){ table.row.add( [ ] ).draw( false ); });

Here I have used Simple Javascript instead of Jquery

<input class="product_text" onClick="AddNewRow()" type="button" id="addRow" name="addRow" value="Add">

function AddNewRow()
{
  var table = document.getElementById("product_table");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = "<input type='text' class='product_text' placeholder ='Type product Name' />"
  cell2.innerHTML = "<input type='text' class='product_text'  placeholder ='Quantity' />"
  cell3.innerHTML = "<input class='product_text' type='button' onClick='AddNewRow()' name='addRow' value='Add'>"
}

这篇关于在datatable中动态添加textfield和button的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！