Javascript：不插入右索引行表

时间：2016-09-28 05:58:39

标签： javascript jquery

我尝试在单击按钮的行下添加一定数量的行（取决于文本框中输入的数字）。它在第一行工作正常，但是当我在第二行按钮上执行时它不起作用（它继续在第一行下插入）。

这是小提琴： https://jsfiddle.net/L4zffok1/ 

$('.add-rows').click(function(){

    var $bx_id;
    var $num_rows;
    var table = document.getElementById("myTable");
    $bx_id = this.id;
    $num_rows = $('#num_boxcodes_'+$bx_id).val();

    for (i = 0; i < $num_rows; i++) {
        var row = table.insertRow($bx_id);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        cell1.innerHTML = '------';
        cell2.innerHTML = '------';
        cell3.innerHTML = '------';
        cell4.innerHTML = '------';
        cell5.innerHTML = '------';
        cell6.innerHTML = '------';
        cell7.innerHTML = '------';
        cell8.innerHTML = '------';
    }
});

4 个答案:

答案 0 :(得分：1)

.insertRow希望您通过传递索引来放置新行，但您只需传递2或3（即ID， ID名称不应该以编号）。请尝试计算新职位。

$(document).ready(function() {
  $('.add-rows').click(function() {

    var $bx_id;
    var $num_rows;
    var table = document.getElementById("myTable");
    $bx_id = this.id;
    $num_rows = $('#num_rows_' + $bx_id).val();
    var rowIndex = $(this).closest('tr').index() + 2;
    var k = "00" + Math.floor(Math.random() * 100);
    k = k.substr(k.length - 2);

    for (i = 0; i < $num_rows; i++) {
      var row = table.insertRow(rowIndex);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      var cell7 = row.insertCell(6);
      var cell8 = row.insertCell(7);
      cell1.innerHTML = '----' + k;
      cell2.innerHTML = '----' + k;
      cell3.innerHTML = '----' + k;
      cell4.innerHTML = '----' + k;
      cell5.innerHTML = '----' + k;
      cell6.innerHTML = '----' + k;
      cell7.innerHTML = '----' + k;
      cell8.innerHTML = '----' + k;
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="myTable">
  <thead>
    <tr class="success">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>
        <input type="text" size="10" id="num_rows_2" />
        <button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button>
      </td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
      <td>
        <input type="text" size="10" id="num_rows_3" />
        <button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button>
      </td>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：1)

我将输入控件的id更改为num_boxcodes_以及现在添加行及其工作的函数：

$(document).ready(function () {
	$('.add-rows').click(function(){
		var $bx_id;
		var $num_rows;
		var table = document.getElementById("myTable");		
      	$num_rows = $('#num_boxcodes_'+this.id).val();
        $bx_id = $(this).closest('tr').index() + 2;

		for (i = 0; i < $num_rows; i++) {
			var row = table.insertRow($bx_id);
			var cell1 = row.insertCell(0);
			var cell2 = row.insertCell(1);
			var cell3 = row.insertCell(2);
			var cell4 = row.insertCell(3);
			var cell5 = row.insertCell(4);
			var cell6 = row.insertCell(5);
			var cell7 = row.insertCell(6);
			var cell8 = row.insertCell(7);
			cell1.innerHTML = '------';
			cell2.innerHTML = '------';
			cell3.innerHTML = '------';
			cell4.innerHTML = '------';
			cell5.innerHTML = '------';
			cell6.innerHTML = '------';
			cell7.innerHTML = '------';
			cell8.innerHTML = '------';
		}
	});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="myTable">
			<thead>
				<tr class="success">
					<th>Column 1</th>
					<th>Column 2</th>
					<th>Column 3</th>
					<th>Column 4</th>
					<th>Column 5</th>
					<th>Column 6</th>
					<th>Column 7</th>
					<th>Column 8</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
					<td>
						<input type="text" size="10" id="num_boxcodes_2" />
						<button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button>
					</td>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
				<tr>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>
						<input type="text" size="10" id="num_boxcodes_3" />
				<button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button>
					</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
				</tr>
			</tbody>
		</table>

答案 2 :(得分：0)

既然你已经在使用jQuery了，为什么不用它来创建基于最后一行的新行呢？

$(document).ready(function () {
$('.add-rows').click(function(){
   var $bx_id;
   var $num_rows;
   var $table = $("#myTable");
   $num_rows = $(this).parent().find('input').val();
   for(i = 0; i < $num_rows; i++){
       var $newRow = $('<tr>');
       $newRow.html('<td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td>');
       $table.append($newRow)
   }
});

}）

答案 3 :(得分：0)

我愿意打赌这些答案都不会像你想要的那样有效，即使你选择了一个。看看这个：https://jsfiddle.net/L4zffok1/4/

您需要将事件委托给新元素，并关闭之前附加的任何事件。递归是最佳解决方案。

function retardedAddRow(){
  var table = document.getElementById('myTable');
  $('.add-rows').each(function(c, e){
    var t = $(e);
    t.off('click');
    t.click(function(){
      var val = t.prev().val(), row, cell;
      for(var n=0; n<val; n++){
        row = table.insertRow(c+2+n);
        for(var i=0,l=8; i<l; i++){
          cell = row.insertCell(i);
          cell.innerHTML = '------'; // bad technique
          if(i === 4){
            cell.innerHTML = "<input type='text' size='10' /><button type='button' class='btn btn-success btn-inline add-rows'>OK</button>";
          }
        }
      }
      retardedAddRow();
    });
  });
}
$(function(){
  retardedAddRow();
});
相关问题
最新问题