Javascript : 오른쪽 인덱스 행 테이블에 삽입하지 않음

버튼을 클릭 한 행 아래에 특정 수의 행을 추가하려고했습니다 (텍스트 상자에 입력 된 숫자에 따라 다름). 그것은 첫 번째 행에 잘 작동하지만 그것은 두 번째 행 버튼 (첫 번째 행 아래에 삽입 유지)에 그것을 할 때 작동하지 않습니다. 여기 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

버튼을 눌렀을 때 삽입 할 때 ... –

는 아래 기존 행에 대한 ID가 더 이상 곳으로 관련이 없습니다 'num_boxcodes _...'같은 ID로 아무것도 때문에 바이올린이 전혀 작동하지 않습니다 –

그리고 문제는 rownumber이고, 인자는'insertRow'에 전달됩니다. 행을 더 추가하면 마지막 행이 푸시 다운되고 테이블의 행 수를 기반으로 새 인덱스가 생성됩니다. 그런 다음 새 행의 rownumber로'2'를 전달하면 마지막 행 앞에있는 행에 삽입됩니다. 즉, 스크립트에 심각한 논리적 결함이 있습니다. – adeneo

.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

이미 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

추가 할 하위 행 수는 상위 행의 텍스트 상자 값에 따라 다릅니다. 그래서 당신의 솔루션은 효과가 없을 것입니다. 어쨌든 고마워. :) – Ronald

당신 말이 맞아요 - 나는 그것을 놓쳤습니다, 대답을 편집했습니다 - 지금 그것이 당신이 원하는 것입니다 –

는 I 입력 제어 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

고마워요. 그것은 작동합니다! 내 코드와 행 인덱스의 차이점은 다릅니다. – Ronald

I을 당신이 하나를 선택했다 할지라도, 당신이 원한 것처럼이 답변들 중 어느 것도 작동하지 않을 것입니다. 이것을 확인하십시오 : 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

감사합니다. 그러나 여기에 나온 답변 중 하나는 내가 필요한 것에 완벽하게 작동했습니다. :) – Ronald

Javascript : 오른쪽 인덱스 행 테이블에 삽입하지 않음

답변

관련 문제