[jQuery] 동적으로 table(html tag) 추가/삭제 및 유효성 체크

jsp 화면(insert 화면)

      <table class="infoTbl mb10" summary="게시판 작성을 위한 양식으로 제목, 첨부파일 순으로 표 제공">
        <caption>작성 양식</caption>
        <colgroup>
          <col width="15%" />
          <col width="*%" />
        </colgroup>
        <tbody>
          <tr>
            <th><label for="boardtitle">제목 <span class="red">*</span></label></th>
            <td class="tdLeft">
              <form:input path="boardtitle" cssStyle="width:70%" />
            </td>
          </tr>
          <tr>
            <th><label for="boardisopenyn">노출여부 <span class="red">*</span></label></th>
            <td class="tdLeft">
              <form:radiobutton path="boardisopenyn" value="Y" label="노출" />
              <form:radiobutton path="boardisopenyn" value="N" label="비노출" checked="checked"/>
            </td>
          </tr>
          <tr>
            <th><label for="boardtext1">소제목 <span class="red">*</span></label></th>
            <td class="tdLeft">
              <form:input path="boardtext1" cssStyle="width:70%" />
            </td>
          </tr>
          <tr>
            <th><label for="boardtext1">거리 및 시간 <span class="red">*</span></label></th>
            <td class="tdLeft">
              총 이동거리 <form:input path="boardtext2" cssStyle="width:80px;" /> Km, 소요시간 <form:input path="boardtext3" cssStyle="width:80px" />시간
            </td>
          </tr>
          <tr class="editor">
            <th>내용 <span class="red">*</span></th>
            <td class="tdLeft">
              <textarea id="boarddesc" name="boarddesc" style="width: 100%; height: 625px" title="상세내용"></textarea>
            </td>
          </tr>
          <tr>
            <th scope="row">목록이미지 <span class="red">*</span></th>
            <td class="tdLeft">
              <input type="file" id="thumbnailfile" name="thumbnailfile" title="목록이미지 첨부파일 입력" />
            </td>
          </tr>  
          <tr>
            <th>코스 <span class="red">*</span></th>
            <td class="tdLeft">
              <table width="100%">
                <tbody id="coorbody">
                  <tr><td class="tdLeft tdCoornum">
                    <span class="coornum">1.</span>&nbsp;
                    <span class="coortitle">장소명 <input name="coortitlearr" id="coortitlearr1" style="width:30%" /></span>&nbsp;
                    <span class="xcoor">, 위치 x : <input name="xcoorarr" id="xcoorarr1" style="width:80px;" /></span>&nbsp;
                    <span class="ycoor">, y : <input name="ycoorarr" id="ycoorarr1" style="width:80px;" /></span>&nbsp;&nbsp;
                    <a href="#" onclick="add(); return false;" class="btnType2">추가 +</a>
                    <br/>&nbsp;&nbsp;
                    <span class="coorimg">대표 이미지 <input type="file" name="coorimg1" title="첨부파일 입력" /></span>
                  </td></tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>

유효성 체크 스크립트

function fncWrite() {
    if ($("#boardtitle").val() == "") {
      alert("제목을 입력해 주세요!");
      $("#boardtitle").focus();
      return false;
    } else if ($('input[name="boardisopenyn"]:checked').length < 1) {
      alert("노출여부를 선택해 주세요!");
      return false;
    } else if ($("#boardtext1").val() == "") {
      alert("소제목을 입력해 주세요!");
      $("#boardtext1").focus();
      return false;
    } else if ($("#boardtext2").val() == "") {
      alert("거리 및 시간을 입력해 주세요!");
      $("#boardtext2").focus();
      return false;
    } else if ($("#boardtext3").val() == "") {
      alert("거리 및 시간을 입력해 주세요!");
      $("#boardtext3").focus();
      return false;
    } else if ($("#boarddesc").val() == "") {
      alert("내용을 입력해 주세요!");
      $("#boarddesc").focus();
      return false;
    } else if ($("#thumbnailfile").val() == "") {
      alert("목록이미지 파일을 업로드해 주세요.");
      $("#thumbnailfile").focus();
      return false;
    } else {
      if ( chkCoorData() ) {
        writeForm.submit();
      }
    }
  }
 
function chkCoorData(){
    var coortitlearr = $('input[name=coortitlearr]');
    var xcoorarr = $('input[name=xcoorarr]');
    var ycoorarr = $('input[name=ycoorarr]');
    var chk = 0;
    
    for(var i=0;i<coortitlearr.length;i++) {
      if(coortitlearr[i].value != '') {
        chk++;
        
        if (xcoorarr[i].value == '') {
          alert(i+1+"번째 x좌표를 입력해 주세요.");
          xcoorarr[i].focus();
          return false;
        }
        if (ycoorarr[i].value == '') {
          alert(i+1+"번째 y좌표를 입력해 주세요.");
          ycoorarr[i].focus();
          return false;
        }
      }
    } // end for
    
    if( chk == 0 ){
      alert("하나 이상의 좌표를 입력해 주세요.");
      return false;
    }
    return true;
  }
 

추가/삭제 스크립트

  function add(){
    var maxlength = $(".tdCoornum").length+1;
    var html = new Array();
    html.push('<tr><td class="tdLeft tdCoornum">');
    html.push('  <span class="coornum">' + maxlength + '.</span>&nbsp;');
    html.push('  <span class="coortitle">장소명 <input name="coortitlearr" id="coortitlearr' + maxlength + '" style="width:30%" /></span>&nbsp;');
    html.push('  <span class="xcoor">, 위치 x : <input name="xcoorarr" id="xcoorarr' + maxlength + '" style="width:80px;" /></span>&nbsp;');
    html.push('  <span class="ycoor">, y : <input name="ycoorarr" id="ycoorarr' + maxlength + '" style="width:80px;" /></span>&nbsp;&nbsp;');
    html.push('  <a href="#" onclick="add(); return false;" class="btnType2">추가 +</a>&nbsp;<a href="#" onclick="del(this); return false;" class="btnType2">삭제 -</a>');
    html.push('  <br/>&nbsp;&nbsp;');
    html.push('  <span class="coorimg">대표 이미지 <input type="file" name="coorimg' + maxlength + '" title="첨부파일 입력" /></span>');
    html.push('</td></tr>');
    $('#coorbody').append(html.join(''));
  }
  
  function del(obj){
    var tr = $(obj).parent().parent();
    $(tr).remove();
    // $(tr).find("td").removeClass();
    // $(tr).css("display","none");
    
    var num = 1;
    $('#coorbody').find(".tdCoornum").each(function(){
        var coortitlearrid = 'coortitlearr' + num;
        var xcoorarrid = 'xcoorarr' + num;
        var ycoorarrid = 'ycoorarr' + num;
        var coorimgname = 'coorimg' + num; 
      
        $(this).find(".coornum").text(num+".");
        $(this).find(".coortitle").find('input').attr('id', coortitlearrid);
        $(this).find(".xcoor").find('input').attr('id', xcoorarrid);
        $(this).find(".ycoor").find('input').attr('id', ycoorarrid);
        $(this).find(".coorimg").find('input').attr('name', coorimgname);
        
        num +=1;
    });
  }