Question

问题：我想获得只有存在“AC”按钮的行的行索引。为什么？因为我需要动态添加的评论输入来匹配我在POST中收到的索引。

这是我的代码：

<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<table id="items" class="table table-bordered table-hover">
    <thead>
    <tr>
        <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
        <th width="2%">AC</th>
        <th width="15%">Codigo</th>
        <th width="38%">Articulo</th>
        <th width="15%">Precio</th>
        <th width="15%">Cantidad</th>
        <th width="15%">Total</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input class="case" type="checkbox"/></td>
        <td><button class="btn btn-success addrow" type="button">AC</button></td>
        <td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
        <td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
        <td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
        <td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
        <td><input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>

    </tr>
    </tbody>
</table>
</div>
</div>
<div class='row'>
<button class="btn btn-danger delete" type="button">-  eliminar</button>
<button class="btn btn-success addmore" type="button">+ Agregar</button>

    </div>

以下是剧本：

var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success addrow" type="button" id="addrow_'+i+'">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text"  name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text"  name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text"  name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '</tr>';
$('#items').append(html);
i++;
});


$(document).on("click", '.addrow', function (){
var count =  $(this).parent().parent().index();
newrow = '<tr><td><input class="case" type="checkbox"/></td><td colspan="7"><input type="text" name="items[comment]['+count+']" class="form-control"></td></tr>';
$(this).parent().parent().after(newrow); 
});

这是jsfiddle：https://jsfiddle.net/1ejw1h68/

我的问题在这里我相信：var count = $（this）.parent（）。parent（）。index（）;

如果我添加新项目并且“那么”添加“AC”一切正常，我在POST请求中获得相同的索引，但是如果我添加项目然后注释等等，则索引将不匹配评论。

我该如何解决这个问题？

编辑：澄清：当我提交表单时，我得到一个包含项目数组的发布请求，每个数组都有一个与表索引匹配的索引，我的问题是某些项目可能有也可能没有注释。

如果我按顺序添加项目和评论，如果我先添加4项，然后再添加第二项，我会在我的POST中添加评论，这是有效的：

[comment] => Array
            (
                [1] => this is a comment, and it should be index 1
            )

但是，如果我例如，添加一个项目，然后添加注释，然后添加注释，然后添加项目，依此类推，对于第二个项目的注释，这就是我得到的：

[comment] => Array
            (
                [0] => 
                [2] => this is a comment, and it should be index 1
                [4] => 
            )

正如你所看到的，第二次，当我添加注释var count = $（this）.parent（）。parent（）。index（）;将评论行计入总指数计数，我该如何防止这种情况？还是有更好的方法来实现这个目标？

Answer 1

以下是我的示例，可以帮助您了解您的问题

//To add Dynamic Row for product    
$("#add").click(function() {

  var row = $("#consumptionTable tbody>tr:last").last().clone();	    
  var oldId = Number(row.attr('id').slice(-1));	    
  var id = 1 + oldId;

  row.attr('id', 'rowformat_' + id );
  row.find('#product_' + oldId).attr('id', 'product_' + id);
  row.find('#quantity_' + oldId).attr('id', 'quantity_' + id);
  row.find('#unit_' + oldId).attr('id', 'unit_' + id);
  row.find('#errText_' + oldId).attr('id', 'errText_' + id);
  $('#consumptionTable').append(row);
  $('#quantity_' + id).val("");	//To clear value from cloned input

});
	
//To Remove the Dynamic Row
$("#remove").click(function() {	
  var rowCount = $('#consumptionTable tbody tr').length;		
  if(rowCount >1){
    $( "#consumptionTable tbody> tr:last" ).remove();
  }else{
    alert("Cannot Remove anymore Row")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-8">
  <div class="form-group">
    <label for="Consumption_Detail">Consumption Detail:  
      <input type="button"  class="dynamicBtn" id="add" value="Add Row" /> 
      <input type="button"  class="dynamicBtn" id="remove" value="Remove Row" />
    </label>   
    <div class="table-responsive" >
      <table class="table table-condensed table-bordered table-hover" id="consumptionTable">
        <thead>
          <tr>										
            <th>Product <sup>*</sup></th>
            <th>Quantity <sup>*</sup></th>
            <th>Unit</th>
          </tr>
        </thead>
        <tbody id="addTbody">

          <tr id="rowformat_0">
            <td width="16%">
              <select id="product_0">
                <option value="">Select</option>
              </select>
            </td>

            <td width="4%">
              <input type="text" class="form-control"  id="quantity_0" />
            </td>

            <td width="4%">
              <select  id="unit_0" class="form-control">
                <option value="">Select</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

我回答我的问题因为我意识到在我的情况下，我想做的事情不是正确的方法。

为什么？.-因为我手动添加了我的评论输入的索引，并在该步骤中创建了另一个问题。如果用户删除评论上方的一行项目，会发生什么？评论将不再匹配项目。

这就是我所做的：我创建了沿项目动态装箱的评论输入，并使用同一行中的“模态框”隐藏它们，这样我就可以一步解决所有问题。

代码：

<table id="items" class="table table-bordered table-hover">
<thead>
<tr>
    <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
    <th width="2%" style="text-align: center">AC</th>
    <th width="15%">Codigo</th>
    <th width="38%">Articulo</th>
    <th width="15%">Precio</th>
    <th width="15%">Cantidad</th>
    <th width="15%">Total</th>

</tr>
</thead>
<tbody>
<tr>
    <td><input class="case" type="checkbox"/></td>
    <td><button class="btn btn-success" data-toggle="modal" data-target="#myModal" type="button">AC</button></td>
    <td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
    <td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
    <td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
    <td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
    <td>
        <input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Agregar comentario</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="items[comment][]" class="form-control">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>
</tbody>
</table>
<button class="btn btn-danger delete" type="button">- Eliminar</button>
<button class="btn btn-success addmore" type="button">+ Agregar</button>

脚本：

var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success" data-toggle="modal" data-target="#myModal_'+i+'" type="button">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text"  name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text"  name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td>';
html += '<input type="text"  name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<div id="myModal_'+i+'" class="modal fade" role="dialog">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
html += '<h4 class="modal-title">Agregar comentario</h4>';
html += '</div>';
html += '<div class="modal-body">';
html += '<input type="text" name="items[comment][]" class="form-control">';
html += '</div>';
html += '<div class="modal-footer">';
html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
html += '</div></div></div></div>';
html += '</td>';
html += '</tr>';
$('#items').append(html);
i++;
});

这里是jsfiddle：https://jsfiddle.net/fu39najg/

我希望这可以帮助那些和我一样的人。

jquery，如何获得行索引只考虑某些，而不是全部

2 个答案: