Question

我的最后一个问题是关于如何向表中动态添加行。那个很快就解决了，我对结果感到满意。但是，我构建的表需要使用JEditable进行编辑，这在原始行中有效，但在动态添加的行中无效。有什么解决办法吗？我的代码如下：我的HTML表格：

    <tbody class="b1" id="b2">
        <tr id="form1">
            <td rowspan="2"><input type="checkbox" name="chk"/></td>
            <td rowspan="2"><span class="charcounter" name="Flight_Nr" /></td>
            <td rowspan="2"></td>
            <td rowspan="2"><span class="editable-select-REG" name="REG"/></td>
            <td rowspan="2"><span class="editable-select" name="equip_code"/></td>
            <td rowspan="2"></td>
            <td rowspan="2"><span class="checkbox" name="ERK"/></td>
            <td><span class="charcounter" name="PIC"/></td>
            <td><span class="charcounter" name="BTM"/></td>
            <td><span class="charcounter" name="AG_1"/><span class="charcounter" name="AG_2"/><span class="charcounter" name="AG_3"/></td>
            <td rowspan="2"><span class="editable_textarea" name="DEP"/></td>
            <td><span class="timepicker" name="ETD_1"/></td>
            <td><span class="timepicker" name="ETA_1"/></td>
            <td rowspan="2"><span class="editable_textarea" name="DEST_1"/></td>
            <td><span class="timepicker" name="ETD_2"/></td>
            <td><span class="timepicker" name="ETA_2"/></td>
            <td rowspan="2"><span class="editable_textarea" name="DEST_2"/></td>
            <td><span class="timepicker" name="ETD_3"/></td>
            <td><span class="timepicker" name="ETA_3"/></td>
            <td rowspan="2"><span class="editable_textarea" name="DEST_3"/></td>
            <td><span class="timepicker" name="ETD_4"/></td>
            <td><span class="timepicker" name="ETA_4"/></td>
            <td rowspan="2"><span class="editable_textarea" name="DEST_4"/></td>
            <td><span class="timepicker" name="ETE"/></td>
            <td rowspan="2"><span class="editable_textarea" name="auftrag_1"/></td>
            <td rowspan="2"><span class="editable_textarea" name="auftrag_2"/></td>
            <td rowspan="2"><span class="editable_textarea" name="cancel_by"/></td>
            <td rowspan="2"><span class="editable_textarea" name="note"/></td>
        </tr>
        <tr id="form2">
            <td><span class="charcounter" name="P"/></td>
            <td><span class="charcounter" name="BTL"/></td>
            <td><span class="editable_textarea" name="ACM"/></td>
            <td><span class="timepicker" name="ATD_1"/></td>
            <td><span class="timepicker" name="ATA_1"/></td>
            <td><span class="timepicker" name="ATD_2"/></td>
            <td><span class="timepicker" name="ATA_2"/></td>
            <td><span class="timepicker" name="ATD_3"/></td>
            <td><span class="timepicker" name="ATA_3"/></td>
            <td><span class="timepicker" name="ATD_4"/></td>
            <td><span class="timepicker" name="ATA_4"/></td>
            <td><span class="timepicker" name="ATE"/></td>
        </tr>
    </tbody>
    </form>
</table>
<input type="button" onclick="insertRow('t2')" value="Reihe hinzufügen"/>
<input type="button" onclick="deleteRow('t2')" value="Reihe entfernen"/>
<input type="button" name="accept_changes" value="Änderungen übernehmen"/>

和我的insertRow.js：

    function insertRow(tableId){

// Get a reference to the table
let tableRef = document.getElementById(tableId);

let firstRowLength = tableRef.rows.namedItem('form1').cells.length;
let secondRowLength = tableRef.rows.namedItem('form2').cells.length;

// Insert a row at the end of the table
let newRow = tableRef.insertRow(-1);


// for inserting 1. row
for (i = 0; i < firstRowLength; i++) {
    // Get previous cell
    let prevCell = tableRef.rows.namedItem('form1').cells.item(i);

    // Insert a cell in the row at index i
    let newCell = newRow.insertCell(i);

    // Append a text node to the cell
    newCell.innerHTML = prevCell.innerHTML;
    newCell.rowSpan = prevCell.rowSpan;
    newCell.class = prevCell.class;
    newCell.name = prevCell.name;
}

// Insert a row at the end of the table second time
let newRow2 = tableRef.insertRow(-1);
        
// for inserting 2. row
for (i = 0; i < secondRowLength; i++) {
    // Get previous cell
    let prevCell = tableRef.rows.namedItem('form2').cells.item(i);

    // Insert a cell in the row at index i
    let newCell = newRow2.insertCell(i);

    // Append a text node to the cell
    newCell.innerHTML = prevCell.innerHTML;
}

关于如何使所有内容可编辑的任何线索？

Answer 1

询问JEditable的DEV…实际上，基本解决方案只是在每次移动对象时刷新js：

 $(table).mouseenter(function() {

只需将其放在

下

 $(document).ready(function(){

，它就像一种魅力。现在，每次添加新行时，只需将鼠标移到桌子上就可以了。

Jeditable在动态创建的表行上不起作用

1 个答案: