jQuery 증가 순서가있는 테이블에 행 추가

나는 table입니다. 그 안에는 single row for form input elements이 있습니다. 나는 add line이라는 이름의 button을 넣었다. 단지 below that table이다. 사용자가 clicks on the button add line 인 경우 add another row in that table이됩니다. 하지만 여기에 사용자가 버튼을 클릭하면 라인이 추가 될 것이므로 add another row with increment id이 필요합니다. 지금 내가 row_1 id is visible을 가지고 있다고 가정 해보십시오. 사용자가 add line button을 클릭하면 newly added row's id will be row_2이지만 다른 행이 표시됩니다. 여기에 내가 아직 한 코드가jQuery 증가 순서가있는 테이블에 행 추가

<!DOCTYPE HTML> 
<html lang="en-IN"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<script type="text/javascript" src="jquery1.7.2.js"></script> 
<body> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery("#add-line").click(function() { 
     var row = jQuery('.prototype tr').clone(true); 
     row.find("input:text").val(""); 
     row.appendTo('.form-fields table'); 
     return false; 
    }); 
}); 
</script> 
    <div id="form"> 
    <table id="form-headings"> 
    <tr> 
     <td width="15%">Id</td> 
     <td width="16%">Name</td> 
     <td width="13%">Col3</td> 
     <td width="14%">Col4</td> 
     <td width="12%">Col5</td> 
    </tr> 
    </table><!--table#form-headings--> 
    <div id="row_1"> 
    <div class="form-fields"> 
    <table> 
     <tr> 
     <td><input type="text" id="form_id" size="5px"/></td> 
     <td><input type="text" id="form_name" size="5px"/></td> 
     <td><input type="text" id="form_col3" size="5px"/></td> 
     <td><input type="text" id="form_col4" size="5px"/></td> 
     <td><input type="text" id="form_col5" size="5px"/></td> 
     </tr> 
    </table> 
    </div><!--.form-fields--> 
    </div><!--#row_01--> 
    <input type="button" id="add-line" value="Add Line" /> 
    </div><!--#form--> 
    <table class="prototype" style="display:none"> 
    <tr> 
     <td><input type="text" id="form_id" size="5px"/></td> 
     <td><input type="text" id="form_name" size="5px"/></td> 
     <td><input type="text" id="form_col3" size="5px"/></td> 
     <td><input type="text" id="form_col4" size="5px"/></td> 
     <td><input type="text" id="form_col5" size="5px"/></td> 
    </tr> 
    </table><!--table.prototype--> 
</body> 
</html>

출처

2012-09-27 amit patel

row_1 id는 div의 ID입니다. 그렇다면 어떻게 행을 만들 수 있습니까 – muthu

당신이 행에 대한 ID를 추가 할 경우이 같은 시도 할 수는 서로 다른 ID를 갖고 싶어 jsfiddle

jQuery(document).ready(function() { 
     var id = 0; 
     jQuery("#add-line").click(function() { 
     id++;   
     var row = jQuery('.prototype tr').clone(true); 
     row.find("input:text").val(""); 
     row.attr('id',id); 
     row.appendTo('.form-fields table');   
     return false; 
    }); 

    jQuery('.form-fields .remove').live('click', function() { 
     jQuery(this).parents("tr").remove();    
    });  
});

예를 의미 폼 요소는

출처

2012-09-27 08:20:07 muthu

답변 주셔서 감사합니다. 그것은 작동하지만 행이 전혀 없을 때 무엇을해야하는지 알고 싶습니다. 행 추가 버튼을 클릭하면 'var last_id = jQuery ('. form-fields table tr : last '). attr ('id ')'행이 없습니다. 어떻게 이것을 해결할 수 있을까요? –

당신이 functinality를 삭제하고 싶다면 또한이 피들을 사용해보십시오. http://jsfiddle.net/muthusamy/mH3en/2/ – muthu

id은 고유해야 복제 사용하지 않는 새로운 요소를 생성하는 의미도 나는 다음과 같이 귀하의 예제가 더 짧아 질 수 있다고 생각 : http://jsfiddle.net/DKWnE/1/

$(document).ready(function() { 
    var template = $('#template'), 
     id = 0; 

    $("#add-line").click(function() { 
     var row = template.clone(); 
     template.find("input:text").val(""); 
     row.attr('id', 'row_' + (++id)); 
     row.find('.remove').show(); 
     template.before(row); 
    }); 

    $('.form-fields').on('click', '.remove', function(){ 
     $(this).closest('tr').remove(); 
    }); 
});

출처

2012-09-27 08:39:23 webdeveloper

감사합니다. 마침내 효과가있었습니다. 하지만 줄을 제거 할 경우 remove-row라는 단추를 추가 한 다음'jQuery ('# remove-row')를 사용했습니다. .parent(). remove(); }); '. 그것은 필드를 제거하고 있지만 모든 행이 비었을 때 다시 행을 추가하면 행을 추가하지 않습니다. 그걸 어떻게 해결할 수 있습니까? –

@amit patel 내 게시물을 업데이트하십시오. – webdeveloper

@ webdeveloper. 답장을 보내 주셔서 감사합니다. 그러나 제거 단추가 모든 행에 있어야하고 제거를 클릭하면 마지막 행이 마침내 삭제되어야하며 행 추가를 클릭하면 새로운 행을 만들어야합니다. 원한다. 제거를 위해 CSS를 사용하지 않아도됩니다. 'display : none'. –

jQuery 증가 순서가있는 테이블에 행 추가

답변

관련 문제