javascript - 如何获取动态表行值

Question

我有一个 HTML 表格，其行是在页面加载时创建的，在行的末尾有一个十字按钮，所以我想做的是，当我单击该按钮时，我想在当前行，我还有很多ItemName、I Code、Price，所以当我点击那个按钮时我想要一些字段值，我所有的单元格仅以输入字段的形式存在

我在做什么

function rowappend(tbody) {

  const markup =
    `<tr>
		  <td>
		    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
		  </td>
		  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
		  <td>
		    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
		  </td>
         			 
		  <td>
		    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
		  </td>
		  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td> 
		  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
		  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
		  
		</tr>`

  $(tbody).append(markup);

}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
  $.confirm({
    title: '',
    content: 'Do you want to clear ?',
    buttons: {
      Yes: () => {
        keys: ['enter', 'space']
        action: function() {
          var tr = $(this).closest('tr');
          var td = tr.find("td").eq(4);
          var input = td.find('input');
          alert(input.val())
          tr.remove();
        },
      },
      No: function() {

      },

    }
  })
}) $(document).keypress(function(event) {
  const row = event.target.parentElement.parentElement

  var keycode = event.keyCode || event.which;
  if (keycode == '13') {
    if (event.target.matches('[name=discPercentagetd]')) {

      if ($(row).parent().find('tr').length - $(row).index() === 1) {
        rowappend(event.target.parentElement.parentElement.parentElement)
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<div class="row tableGrn" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">I Code</th>
        <th id="mrpth" class="commanth">MRP</th>
        <th id="purRateth" class="commanth">Price</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="discPercentageth" class="commanth">Disc %</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">GST %</th>
        <th id="gstAmtth" class="commanth">GST Amt</th>
        <th id="totalAmtth" class="commanth">Total Amt</th>

      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</div>

Answer 1

$(this)在您的点击功能中，请引用 <i class="fas fa-times fa-2x remove-btn" ></i>所以$(this).find('td')什么都不会返回。您需要使用 $(this).closest('tr')首先获得该行。

function rowappend(tbody) {

  const markup =
    `<tr>
		  <td>
		    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
		  </td>
		  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
		  <td>
		    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
		  </td>
         			 
		  <td>
		    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
		  </td>
		  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td> 
		  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
		  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
		  
		</tr>`

  $(tbody).append(markup);

}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
  $.confirm({
    title: '',
    content: 'Do you want to clear ?',
    buttons: {
      Yes: {
        keys: ['enter', 'space'],  
        action: () => {
        var tr = $(this).closest('tr');
        var td = tr.find("td").eq(4);
        var input = td.find('input');
        alert(input.val())
        tr.remove();
        }
      },
      No: function() {

      },

    }
  })
})
$(document).keypress(function(event) {
  const row = event.target.parentElement.parentElement

  var keycode = event.keyCode || event.which;
  if (keycode == '13') {
    if (event.target.matches('[name=discPercentagetd]')) {

      if ($(row).parent().find('tr').length - $(row).index() === 1) {
        rowappend(event.target.parentElement.parentElement.parentElement)
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="row tableGrn" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">I Code</th>
        <th id="mrpth" class="commanth">MRP</th>
        <th id="purRateth" class="commanth">Price</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="discPercentageth" class="commanth">Disc %</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">GST %</th>
        <th id="gstAmtth" class="commanth">GST Amt</th>
        <th id="totalAmtth" class="commanth">Total Amt</th>

      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</div>