JavaScript動態添加列添加行

我有一個頁面，我希望用戶能夠添加行和列，每個單元格包含一個文本框或textarea。JavaScript動態添加列添加行

我可以完美地添加行，但我無法添加列。

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/

來源

2014-10-06 Brian Curless

新欄目應該包含什麼內容？ – Barmar 2014-10-06 15:59:55

注意jsfiddle中的語法高亮。它會指出幾個未封閉的標籤。 – Palpatim 2014-10-06 16:01:12

新列應該與所述表格的其餘部分一起開始新行。第1行的最後一個單元格col X具有cstate []第2行col X具有sdate []，我會兩個新行使用colspan來獲取jobduty []和techused [] – 2014-10-06 16:02:29

我的方法是使用類似Slickgrid。 https://github.com/mleibman/SlickGrid

但是，你不能做這樣的事情，用普通的JavaScript？（我也使用JQuery這裏，但我認爲這可能是沒有做，只是更多詳細）

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); 
    } 
}

顯然，你可能要讓它多了幾分複雜的，添加列標題，所以，但這絕對適用於IE11，Firefox和Chrome。

來源

2014-10-06 16:20:55

JavaScript動態添加列添加行

回答

相關問題