Добавьте новую строку динамически после нажатия кнопки в jquery

Мне нужно создать форму, которая может динамически добавлять строки после нажатия кнопки, ниже приведен код. Поэтому в основном я хочу клонировать строку с id="ADD" после нажатия кнопки btAdd в следующей строке.Добавьте новую строку динамически после нажатия кнопки в jquery

Я не знаю, что добавить внутри функции добавления? Я пробовал несколько вещей, но не работал. Заранее спасибо.

$(document).ready(function(){ 
    $("#btAdd").click(function(){ 
     $("#ADD").append(" "); 
    }); 
});

</script> 
</head> 
<body> 
    <h1></h1> 
    <div id = "myDiv"> 
     <form name="form1"> 
      <table border='1' width='700' align="center" cellpadding='5' cellspacing='10'> 
       <tr> 
        <th>Place configuration here</th> 
       </tr> 
       <tr> 
        <td>Server Url: <input type="text" name="surl" id="surl"></td> 
       </tr> 
       <tr> 
        <td>    
         Filter Name: <input type="text" name="fname"id="fname"> 
         Filter Type 
         <select name="operation"> 
          <option value="text">Text</option> 
          <option value = "List">List</option> 
         </select> 
        </td> 
       </tr> 
       <tr id="ADD"> 
        <td> 
         Filter Options: <input type="text" name="foptions"id="foptions"> 
         <input type="button" name="ADDb" value="+" id="btAdd"> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();"> 
        </td> 
       </tr> 
       <tr> 
        <td><input type="button" name="submitb" id="submitb" value="Submit"></td> 
       </tr> 
      </table> 
     </form> 
    </div> 
</body> 
</html>

источник

2014-10-09 edward

Попробуйте

$("#btAdd").click(function(){ 
    $("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD"); 
});

где table1 является идентификатор таблицы.

источник

2014-10-09 06:50:43

спасибо, что это работает. – edward

Просто укажите: '$ (" # table1 tbody "). Children (" tr ")' может просто быть '$ (" # table1 tbody tr ")' – Regent

попробовать:

$("#btAdd").click(function(){ 
    $("#ADD").clone().removeAttr("id").insertAfter("#ADD"); 
});

источник

2014-10-09 06:44:01

+1, хотя вам может понадобиться использовать 'clone (true)', чтобы также клонировать события, связанные с кнопками. –

Все еще есть проблема с дублированием идентификаторов ids 'foptions',' btAdd' – Anujith

извините, что он не работает, добавил клон (правда), но не работал. – edward

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
    #myDiv { margin: 0 auto; width: 800px; } 
    .tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; } 
    .tr .label { float: left; width: 115px; } 
    .tr .inputs { float: left; width: 230px; } 
    .tr .btns { float: left; width: 100px; } 
    .tr ul { margin: 0; padding: 0; } 
    .tr li { list-style: none; } 
    </style> 
</head> 
<body> 
<div id = "myDiv"> 
    <form name="form1"> 
     <div class="tr"> 
      Place configuration here 
     </div> 
     <div class="tr"> 
      Server Url: 
      <input type="text" name="surl" id="surl"> 
     </div> 
     <div class="tr"> 
      Filter Name: 
      <input type="text" name="fname" id="fname"> 
      Filter Type 
      <select name="operation"> 
       <option value="text">Text</option> 
       <option value = "List">List</option> 
      </select> 
     </div> 
     <div class="tr" id="ADD"> 
      <div class="label">Filter Options:</div> 
      <ul class="inputs"> 
       <li> 
        <input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd"> 
       </li> 
      </ul> 
     </div> 
     <div class="tr"> 
      Filter Label: 
      <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();"> 
     </div> 
     <div class="tr"> 
      <input type="button" name="submitb" id="submitb" value="Submit"> 
     </div> 
    </form> 
</div> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(function(){ 
    var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>', 
     $ul = $('#ADD ul'), $add = $('#ADD'); 
    $add.on('click.add', '#btAdd', function() { 
     $ul.append(S); 
    }); 
    $add.on('click.rm', '[name=rm]', function() { 
     $(this).closest('li').remove(); 
    }); 
}); 
</script> 
</body> 
</html>

источник

2014-10-09 07:17:47 jingyinggong

Добавьте новую строку динамически после нажатия кнопки в jquery

ответ

Смежные вопросы