자바 스크립트 동적으로 열 추가 행 추가

Question

각 셀에 텍스트 상자 또는 텍스트 영역이 포함 된 행 및 열을 사용자가 추가 할 수있게하려는 페이지가 있습니다.

행을 완벽하게 추가 할 수 있지만 열을 추가 할 수는 없습니다.

JS 코드

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 5){ 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    } 
} 

HTML 코드

<legend>Work Experience</legend> 
<fieldset class="row6"><p> 
    <input type="button" value="Add Work Experience" onClick="addRow('workexperienceTable')" /> 
    <input type="button" value="Remove Work Experience" onClick="deleteRow('workexperienceTable')" /> 
    <p>(All acions apply only to entries with check marked check boxes only.)</p></p> 
    <table id="workexperienceTable" class="form" border="1"><tbody><tr><p> 
     <td><input type="checkbox" name="chk[]" checked="checked" /></td> 
     <td><label>Job Title</label><input type="text" name="jobtitle[]" maxlength="30" size="30"><br></td> 
     <td><label>Company Name</label><input type="text" name="companyname[]" maxlength="30" size="30"><br></td> 
     <td><label>Company Location</label> 
     <input type="text" name="cstreet[]" maxlength="30" size="30"><br> 
     <input type="text" name="ccity[]" maxlength="30" size="30"><br> 
     <input type="text" name="cstate[]" maxlength="30" size="30"><br> 
     <td><p>Please Select Your Start Date<input type="text" name="sdate[]" id="datepicker1"></p></td> 
     <td><p>Please Select Your End Date<input type="text" name="edate[]" id="datepicker2"></p></td> 
     <td><label>Short Description of what your did</label><input type="text" name="jobdesc[]" maxlength="30" size="30"><br></td> 
     <td><label>Job Duties(Do not and any formatting or bullets. One line per Job Duty</label><textarea name="jobduty[]" style="width:600px;height:120px;"></textarea><br></td> 
     <td><label>Technologies Used(Do not and any formatting or bullets. One line per Job Duty</label><textarea name="techused[]" style="width:600px;height:120px;"></textarea><br></td> 
    </p></tr></tbody></table> 

나는 새로운 브레이크 아웃하려면

</tr> 
<tr> 

에 넣어 때까지 위의 코드 모든 것이 잘 작동합니다 사용하는 경우 열.

나는 추가 할 열을 얻는 데 몇 가지 다른 방법을 시도했다.

<input type="text" name="cstate[]" maxlength="30" size="30"><br> 
</tr> 
<tr> 
<td></td> 
<td><p>Please Select Your Start Date<input type="text" name="sdate[]" id="datepicker1"></p></td> 

for(var i=0; i<colCount; i++) { 
    var newcell = row.insertCell(i); 
    newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
    var newcol = row.insertCol(i); 
    newcol.innerHTML = table.cols[0].rows[i].cells[i].innerHTML; 
} 

누군가 올바른 방향으로 나를 가리킬 수 있습니까?

http://jsfiddle.net/h0t61Lx9/

Answer 1

내 접근 방식은 Slickgrid 같은 것을 사용하는 것입니다. https://github.com/mleibman/SlickGrid

그러나 일반 자바 스크립트로 이와 같은 작업을 수행 할 수 없습니까? 당신이 열 머리글을 추가하고, 조금 더 정교하게하려면, 분명히

function addColumn(tableid, defaultContents) 
{ 
    var table = $("#" + tableid); 

    var tbody = $(table[0]).children("tbody"); 

    var rows = $(tbody[0]).children("tr"); 

    for(var i=0; i < rows.length; i++) 
    { 
     var cell = $("<td>" + defaultContents + "</td>"); 

     $(rows[i]).append(cell); 
    } 
} 

을 수 (나는 또한 여기에 jQuery를 사용하고있어,하지만 난이없이 조금 더 자세한을 할 수 있다고 생각) 및 그래서,하지만 이것은 확실히 IE11, Firefox 및 Chrome에서 작동합니다.