텍스트 필드에 포커스를 기반으로 테이블 행 생성

Question

각 셀에 제목과 일치하는 양식 필드가있는 html 페이지에서 테이블을 만들었습니다. 처음에는 아래 이미지와 같이 두 개의 행이 있습니다.

나는 마지막 행에서의 첫 번째 폼 요소의 클릭에 여분의 행을 생성해야 JQuery와 함수를 작성했습니다. 기능은 아래와 같습니다.

$(document).ready(function() { 
var i = 2; 
$("#s_prd" + i).click(function() { 
       $("#fm_orditms").append(
         '<tr>\n\ 
         <td>\n\ 
          <select id="s_prd' + (i + 1) + '" class="form-control" name="prdId[]">\n\ 
           <option>Select</option>\n\ 
          </select>\n\ 
         </td>\n\ 
         \n\ 
         <td>\n\ 
          <select id="s_ccon' + (i + 1) + '" class="form-control" name="cconId[]">\n\ 
           <option>Select</option>\n\ 
          </select>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="number" name="qty[]" class="form-control" id="qty' + (i + 1) + '" style="width: 120px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="ordDate[]" class="form-control" id="ordDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="bilDate[]" class="form-control" id="bilDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="dlvDate[]" class="form-control" id="dlvDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <select id="s_mdt' + (i + 1) + '" class="form-control" name="mdt[]" style="width: 120px;">\n\ 
           <option>Select</option>\n\ 
           <option value="air">Air</option>\n\ 
           <option value="digital">Digital</option>\n\ 
           <option value="hand">Hand</option>\n\ 
           <option value="road">Road</option>\n\ 
           <option value="sea">Sea</option>\n\ 
          </select>\n\ 
         </td>\n\ 
         </tr>\n\ 
         ' 
         ); 
       i++; 
      }); 
}); 

i = 2의 초기 값이므로 두 번째 행을 클릭하면 행 생성 만 발생합니다. 나는 그것이 테이블의 마지막 행의 첫 번째 첫 번째 필드를 클릭 할 때마다 추가 행이 생성되는 방식으로하고 싶습니다. 이 특정 기능을 달성하는 방법을 알려주십시오. 당신은 확인 0보다 시작하는 경우

Answer 1

delegated events 아래와 같이

$(document).ready(function() { 

    var $ordTable = $("#fm_orditms"); 
    $ordTable.on("click", "tr:last :input:first", function() { 
    var i = $("tr", $ordTable).length; 
    $ordTable.append(
        '<tr>\n\ 
         <td>\n\ 
          <select id="s_prd' + (i + 1) + '" class="form-control" name="prdId[]">\n\ 
           <option>Select</option>\n\ 
          </select>\n\ 
         </td>\n\ 
         \n\ 
         <td>\n\ 
          <select id="s_ccon' + (i + 1) + '" class="form-control" name="cconId[]">\n\ 
           <option>Select</option>\n\ 
          </select>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="number" name="qty[]" class="form-control" id="qty' + (i + 1) + '" style="width: 120px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="ordDate[]" class="form-control" id="ordDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="bilDate[]" class="form-control" id="bilDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <input type="date" name="dlvDate[]" class="form-control" id="dlvDate' + (i + 1) + '" style="width: 145px;"/>\n\ 
         </td>\n\ 
         <td>\n\ 
          <select id="s_mdt' + (i + 1) + '" class="form-control" name="mdt[]" style="width: 120px;">\n\ 
           <option>Select</option>\n\ 
           <option value="air">Air</option>\n\ 
           <option value="digital">Digital</option>\n\ 
           <option value="hand">Hand</option>\n\ 
           <option value="road">Road</option>\n\ 
           <option value="sea">Sea</option>\n\ 
          </select>\n\ 
         </td>\n\ 
        </tr>\n\ 
         ' 
    ); 
    i++; 
    }); 
}); 

Answer 2

같은 ..

function runAfterInsertAndOnStart() {  
    $('select.form-control').unbind('click'); 
    var i = $("#fm_orditms").find('tr').length 
    $("#s_prd" + i).click(function(){ 
     [...] 
    }); 
} 

중요한 것은, 당신이 i

에 1을 추가 할 필요가 1로 시작 ,, ... 당신의 행의 첫 번째 ID입니다 그래서 이것은 테이블의 마지막 행에있는 첫 번째 선택을 클릭 할 것입니다.하지만 새 행을 추가하면 함수를 다시 호출하여 새로운 마지막 행을 계산합니다.