1. 首页
  2. 问答
  3. Javascript：不插入右侧索引行表

Javascript：不插入右侧索引行表

2016-09-28 42 views
0

我试图在点击按钮的行下添加一定数量的行（取决于文本框中输入的数字）。它在第一行工作正常，但在第二行按钮时它不工作（它一直插在第一行下面）。Javascript：不插入右侧索引行表

这里的小提琴： 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 = '------'; 
    } 
});

来源

2016-09-28 Ronald

+0

因为没有与像“num_boxcodes _...'ID没有 –

+0

一旦你插入的行，下面的任何现有行的ID将不再相关，因为到你的小提琴不会在所有的工作在按下按钮时插入... –

+0

问题是传递给'insertRow'的参数rownumber。一旦添加了更多行，最后一行将被下推，并根据表中的行数得到新的索引。然后，当您将新行的“r”作为rownumber传递给它时，它们将插入到最后一行之前的行中。换句话说，您的脚本中存在严重的逻辑缺陷。 – adeneo

回答

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>

来源

2016-09-28 06:10:02 Justinas

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) 
    } 
});

}）

来源

2016-09-28 06:10:07

+0

要添加的子行数取决于父行的文本框的值。所以你的解决方案将无法工作。不管怎么说，多谢拉。 :) – Ronald

+0

你是对的 - 我错过了，编辑答案 - 现在这就是你想要的 –

1

我改变了输入控件的ID是num_boxcodes_和功能添加行，现在它的工作：

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

 
\t \t for (i = 0; i < $num_rows; i++) { 
 
\t \t \t var row = table.insertRow($bx_id); 
 
\t \t \t var cell1 = row.insertCell(0); 
 
\t \t \t var cell2 = row.insertCell(1); 
 
\t \t \t var cell3 = row.insertCell(2); 
 
\t \t \t var cell4 = row.insertCell(3); 
 
\t \t \t var cell5 = row.insertCell(4); 
 
\t \t \t var cell6 = row.insertCell(5); 
 
\t \t \t var cell7 = row.insertCell(6); 
 
\t \t \t var cell8 = row.insertCell(7); 
 
\t \t \t cell1.innerHTML = '------'; 
 
\t \t \t cell2.innerHTML = '------'; 
 
\t \t \t cell3.innerHTML = '------'; 
 
\t \t \t cell4.innerHTML = '------'; 
 
\t \t \t cell5.innerHTML = '------'; 
 
\t \t \t cell6.innerHTML = '------'; 
 
\t \t \t cell7.innerHTML = '------'; 
 
\t \t \t cell8.innerHTML = '------'; 
 
\t \t } 
 
\t }); 
 
})
<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"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr class="success"> 
 
\t \t \t \t \t <th>Column 1</th> 
 
\t \t \t \t \t <th>Column 2</th> 
 
\t \t \t \t \t <th>Column 3</th> 
 
\t \t \t \t \t <th>Column 4</th> 
 
\t \t \t \t \t <th>Column 5</th> 
 
\t \t \t \t \t <th>Column 6</th> 
 
\t \t \t \t \t <th>Column 7</th> 
 
\t \t \t \t \t <th>Column 8</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" size="10" id="num_boxcodes_2" /> 
 
\t \t \t \t \t \t <button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" size="10" id="num_boxcodes_3" /> 
 
\t \t \t \t <button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

来源

2016-09-28 06:19:55 mbadeveloper

+0

感谢你。有用！您的代码与我的区别在于计算行索引。 – Ronald

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(); 
});

来源

2016-09-28 07:46:42 PHPglue

+0

谢谢。但其中一个答案在我所需要的情况下工作得很好。 :) – Ronald

相关问题

 相关问题