0

私はテーブルのHTMLに従っています。実際のテーブルが大きすぎます。参考までに、この大きな HTML テーブルから 2 行だけを示しました。

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

しかし、それは機能していません。誰でもこの点で私を助けてもらえますか? この問題についてさらに情報が必要な場合は、同じ情報を提供できます。

4

3 に答える 3

0

関数の呼び出しを確認すると便利です。

idに共通の問題を抱えている可能性があると思います。

コンソール ログを実行して、削除リベート内のフィールドの値を確認します。

このような短いタスクを 1 つだけ実行する関数を作成すると、速度が低下し、コードが乱雑になることに注意してください。

ELEMENT.remove();クリーンでシンプルに使用してください。

これが機能しない場合は、jquery EQ 関数を調べてください

于 2014-04-27T16:01:34.823 に答える
0

ボタンをクリックして関数を呼び出し、 を使用しますthis.id。ただし、このコンテキストでthisはボタンを指します。代わりに、テーブルの行を探す必要があります。また、イベント ハンドラーを HTML にハード コードしないで、次のように割り当てます。

$(".apnd-test button.close").click(function() {
  $(this).closest("tr").remove();
});
于 2014-04-27T16:35:46.503 に答える