Member 10484162 Ответов: 1

Динамическое добавление текстового поля и кнопки в datatable

у меня есть таблица, в которой уже есть текстовое поле и кнопка. я хочу, когда пользователь нажимает кнопку (Добавить), а затем автоматически добавляет новую строку с тем же текстовым полем и ту же кнопку с действием добавления.

Ниже приведен мой код.


пожалуйста, помогите мне, как я добавляю новую строку, и мой (
Product_name
) текстовое поле-это функция автоматического завершения.

пожалуйста помочь

Что я уже пробовал:

<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 );
  });

1 Ответов

Рейтинг:
10

omerkamran

Здесь я использовал простой Javascript вместо 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'>"
}

Member 10484162

Спасибо.