Question

我有一个页面，我希望用户能够添加行和列，每个单元格包含一个文本框或textarea。

我可以完美地添加行但是我无法添加列。

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

但是，你能不能用普通的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。

javascript动态添加列添加行

1 个答案: