bugfix> javascript > 投稿

ボタンをクリックして、テーブル内の製品ごとの数量値をインクリメントしようとしています。私は追加を得ました button テーブル内の各製品の最後にあるので、最初の製品の最初の数量値をインクリメントする場合は、最初の行の最初のボタンをクリックします。 2番目の製品の数量を増やしたい場合は、2行目のボタンをクリックするだけです。

これが table 私のHTMLファイルで(削除を無視してください button ):

   <tbody>
      {%for stock in stocks%}
      <tr>
        <th scope="row">{{stock.stockId}}</th>
        <td>{{stock.name}}</td>
        <td>{{store.name}}</td>
        <td class="mystore-quantity">{{stock.quantity}}</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>

これはJSファイルです(無視してください updateStock コール):

const actionBtns = document.getElementsByClassName('action-btn');
const quantity = document.getElementsByClassName('mystore-quantity');
console.log(quantity[0])
for (let i = 0; i < actionBtns.length; i++)
{
    actionBtns[i].addEventListener('click', function(){
      
        const productId = this.dataset.product;
        const action = this.dataset.action;
        console.log('productId:', productId, 'Action:', action )
        if(user == 'AnonymousUser'){
            console.log('User not logged in')
        } else {
            console.log(quantity.textContent)
            updateStock(productId,action)
 
        }
    })
}

回答 1 件
  • 使用できます this クリックしたボタンをターゲットにして使用するキーワード closest() 親をターゲットにするtr。それからtrあなたがそれぞれを得ることができる要素td使用する要素 querySelector()

    デモ:

    const actionBtns = document.getElementsByClassName('action-btn');
    //const quantity = document.getElementsByClassName('mystore-quantity');
    //console.log(quantity[0])
    for (let i = 0; i < actionBtns.length; i++){
      actionBtns[i].addEventListener('click', function(){
        const el = this.closest('tr').querySelector('.mystore-quantity');
        el.textContent = Number(el.textContent) + 1;
      });
    }
    
    
    <table>
    <tbody>
          <tr>
            <th scope="row">11</th>
            <td>abc</td>
            <td>xyz</td>
            <td class="mystore-quantity">1</td>
            <td>
              <button
                type="button"
                data-action="add"
                data-product="{{stock.id}}"
                class="btn btn-primary ml-2 mb-1 action-btn"
              >
                Add
              </button>
              <button
                type="button"
                data-product="{{stock.id}}"
                class="btn btn-danger ml-2 mb-1 action-btn"
                data-action="remove"
              >
                Sell
              </button>
            </td>
          </tr>
          <tr>
            <th scope="row">22</th>
            <td>mnl</td>
            <td>asd</td>
            <td class="mystore-quantity">2</td>
            <td>
              <button
                type="button"
                data-action="add"
                data-product="{{stock.id}}"
                class="btn btn-primary ml-2 mb-1 action-btn"
              >
                Add
              </button>
              <button
                type="button"
                data-product="{{stock.id}}"
                class="btn btn-danger ml-2 mb-1 action-btn"
                data-action="remove"
              >
                Sell
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    
    

あなたの答え