Почему строка таблицы не удаляется с помощью следующего кода в jQuery?

Question

Почему строка таблицы не удаляется с помощью следующего кода в jQuery?

0

Я следую за HTML таблицы. Фактическая таблица слишком велика. Для вашей справки я показал только две строки из этой большой таблицы HTML:

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr  id="Row1">
      <th style="vertical-align:middle" >Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1">
      <td><input type="text" name="pack[1]" id="pack_1" value="100" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[1]" id="quantity_1" value="10" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[1]" id="volume_1" value="1000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_1" name="units[1]" class="form-control">
            <option value="" >Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10" >L</option>
            <option value="12"  selected="selected">gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[1]" id="amount_1" value="3.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
    <tr id="reb2">
      <td><input type="text" name="pack[2]" id="pack_2" value="200" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[2]" id="quantity_2" value="20" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[2]" id="volume_2" value="2000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_2" name="units[2]" class="form-control">
            <option value="" >Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10"  selected="selected">L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[2]" id="amount_2" value="6.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
  </tbody>
</table>

Функция jQuery, которую я написал, выглядит следующим образом:

function delete_rebate(field) {
  $('#'+field).remove();    
}

Но это не работает. Может ли кто-нибудь помочь мне в этом отношении? Если вы хотите получить более подробную информацию о проблеме, я могу предоставить вам то же самое.

PHPLover 27 апр. 2014, в 18:35

Источник

0

добавить предупреждение (поле); к этой функции .. так что вы можете увидеть, каково значение поля. возможно, вы не передаете правильный идентификатор функции delete_rebate
lagbox 27 апр. 2014, в 15:56

Теги:

jquery

html-table

3 ответа

Ещё вопросы

добавить предупреждение (поле); к этой функции .. так что вы можете увидеть, каково значение поля. возможно, вы не передаете правильный идентификатор функции delete_rebate

Nicole Flokos · Answer 1 · 2014-04-27T14-46-00.000Z

Обязательно ли вы вызываете функцию delete_rebate()? Если это так, вы можете попытаться вызвать функцию до того, как документ будет полностью загружен. Я пробовал это с tr (id = "reb2"), и он работал:

    $(document).ready(function(){
        delete_rebate('reb2');
    });

    function delete_rebate(field) {
       $('#'+field).remove();    
    }

JSFiddle: http://jsfiddle.net/cAS9v/3/

Ramulis · Answer 2 · 2014-04-27T14-39-00.000Z

Было бы полезно увидеть вызов функции.

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

Сделайте консольный журнал, чтобы узнать, какое значение поля находится в вашей скидке на удаление.

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

Просто используйте ELEMENT.remove(); его чистый и простой.

если это не работает, посмотрите на функцию EQ jQuery

RoToRa · Answer 3 · 2014-04-27T13-42-00.000Z

Вы вызываете свою функцию одним нажатием кнопки и используете this.id Однако в этом контексте this относится к кнопке. Вместо этого вам нужно искать строку таблицы. Кроме того, не сложно скопировать обработчики событий в HTML, назначьте их:

$(".apnd-test button.close").click(function() {
  $(this).closest("tr").remove();
});