Question

我正在尝试自动获取具有单元格ID的每行表格单元格

我执行以下代码：

        function insert_datarow(id,name,price){
            self.opener.document.getElementById('productCode_1').value=id;
        self.opener.document.getElementById('productName_1').value=name;
            self.opener.document.getElementById('price_1').value=price;
            window.close();
        }


<table class="table table-bordered table-hover" id="invoiceItem"> 
        <tr>
          <th width="2%"><input id="checkAll" class="formcontrol" type="checkbox"></th>
          <th width="15%">Item No</th>
          <th width="38%">Item Name</th>
          <th width="15%">Quantity</th>
          <th width="15%">Price</th>                
          <th width="15%">Total</th>
        </tr>             
        <tr>
          <td><input class="itemRow" type="checkbox"></td>
          <td><span class="input-group"><input type="text" name="productCode[]" id="productCode_1" class="form-control input-sm" autocomplete="off"><span class="input-group-btn">
          <a href='javascript:void(0)' onClick='open_win2()'><button class="btn btn-default btn-sm" type="button">Go!</button></a>
          </span></span></td>
          <td><input type="text" name="productName[]" id="productName_1" class="form-control input-sm" autocomplete="off"></td>      
          <td><input type="number" name="quantity[]" id="quantity_1" class="form-control input-sm quantity" autocomplete="off"></td>
          <td><input type="number" name="price[]" id="price_1" class="form-control input-sm" autocomplete="off"></td>
          <td><input type="number" name="total[]" id="total_1" class="form-control input-sm total" autocomplete="off" readonly=""></td>
        </tr>           
      </table>


var count = $(".itemRow").length;
$(document).on('click', '#addRows', function() { 
    count++;
    var htmlRows = '';
    htmlRows += '<tr>';
    htmlRows += '<td><input class="itemRow" type="checkbox"></td>';          
    htmlRows += '<td><span class="input-group"><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"><span class="input-group-btn"><a href=\'javascript:void(0)\' onClick=\'open_win2()\'><button class="btn btn-default" type="button">Go!</button></a></span></span></td>';          
    htmlRows += '<td><input type="text" name="productName[]" id="productName_'+count+'" class="form-control" autocomplete="off"></td>'; 
    htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';        
    htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control " autocomplete="off"></td>';       
    htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off" readonly=""></td>';          
    htmlRows += '</tr>';
    $('#invoiceItem').append(htmlRows);
});

当我单击go时，在第一行中可以正确地放置右单元格，但是当我添加行并在第二行中单击go时，它们会填充第一行，为什么不填充第二行或同一行。 / p>

Answer 1

问题在于，您正在使用HTML元素ID“ addRows”作为js代码中onClick处理程序的选择器，但根本没有HTML标记中对该ID的引用。要解决问题，您应该替换以下HTML：

<a href='javascript:void(0)' onClick='open_win2()'>

使用如下代码：

<a href='#' id='addRows'>

，对于具有动态/引用HTML的HTML也是如此：

htmlRows += '<td><span class="input-group"><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"><span class="input-group-btn"><a href=\'javascript:void(0)\' onClick=\'open_win2()\'><button class="btn btn-default" type="button">Go!</button></a></span></span></td>';

具有这样的内容：

htmlRows += '<td><span class="input-group"><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"><span class="input-group-btn"><a href=\'#\' id=\'addRows\'><button class="btn btn-default" type="button">Go!</button></a></span></span></td>';

但是在这种情况下，您将有几个具有相同ID的按钮，这些按钮将起作用，但不是一个好主意。最好为类选择器（如“ .addNewRowBtn”）使用单个事件处理程序，然后将此类添加到现有和生成的按钮中：

<a href='#' class='addNewRowBtn'>

请帮助我这段代码self.opener.document.getElementById

1 个答案: