Как добавить поле ввода в tr на основе выбранной опции Jquery - PullRequest
Новая
       1

Как добавить поле ввода в tr на основе выбранной опции Jquery

0 голосов
/ 13 марта 2020

Я пытаюсь добавить поле ввода в таблицу на основе того, что они выбирают из моего списка выбора, но я просто не могу заставить его работать.

Я могу удалить строку таблицы, и это здорово, но я не могу ее добавить. Я попытался проверить некоторые ресурсы, но безрезультатно

Вот мой код: 

$(document).ready(function() {    
  $('#tabSearch').hide();

  $('.addBtn').on('click',function(){
      var trObj = $(this).closest("tr");
      });

  $('.removeBtn').on('click',function(){
      var trObj = $(this).closest("tr");
      $(this).closest("tr").remove();        
  });
});
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<tr>
    <td colspan="9">
        <label for="searchByFilter"><strong>Select Search Terms</strong></label>
        <br />
        <div>
            <select id="searchByFilter" name="searchByFilter" style="width: 155px;">
                <option value=""></option>
                <option value="1">Name</option>
                <option value="2">Email</option>

            </select>
            <input type="button" style="margin-top: -5px;" class="ui-button ui-widget ui-corner-all ui-state-default addBtn" value="Add Filter" id="addBtn" name="addBtn" />
        </div>
        <br />
        <br />

        <div id="tabSearch" style="display: inline !important;">
            <table id="SearchFilters" style="width: 500px; display: inline-table; margin-bottom: 5px;" class='table'>
                <thead>
                    <tr>
                        <td style="width: 100px;" class='tablecell'>Filter</td>
                        <td class='tablecell' style="width: 50px !important;">Action</td>
                    </tr>
                </thead>
                <tr id="trPersonName">
                    <td>
                        <input id="searchSPersonName" name="searchSPersonName" type="text" maxlength="12" size='15' style="width: 150px;" placeholder="Name" value='' />
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-sm btn-default removeBtn" style="float: none;">Remove Filter</button>
                        </div>
                    </td>
                </tr>
                <tr id="trPersonEmail">
                    <td>
                        <input id="searchSEmail" name="searchSEmail" type="text" maxlength="10" size='11' style="width: 150px;" placeholder="Email" value='' />
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-sm btn-default removeBtn" style="float: none;">Remove Filter</button>
                        </div>
                    </td>
                </tr>
          </table>
      </div>
  </td>
</tr>

1 Ответ

0 голосов
/ 13 марта 2020

здесь есть пример, чтобы проверить, что вы хотели сделать 

$(document).ready(function(){
        //when you wante to add
        $('#add').on('click', function(){
            $('#tags').append(`<li class='added'>${$('#mySelect').val()}</li>`);
            $('#mySelect').val()
        });	
   
 });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
    
<div>
    <h3>choose your tag</h3>
    <select id="mySelect">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
      <option>Option 6</option>
      <option>Option 7</option>
      <option>Option 8</option>
    </select>
    <button id="add">add</button>
  </div>
  
  <h3>Tags click tag to remove it</h3>
  <ul id="tags"></ul>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...