javascript动态添加列添加行

javascript dynamically add columns add rows

本文关键字：添加行 添加 动态 javascript      更新时间：2023-09-26

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

我可以完美地添加行，但不能添加列。

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/

我的方法是使用类似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上肯定有效。

相关文章：