时间戳

首页 > 解决方案 > 使用 jQuery 插入 HTML 表格行时，某些输入元素不起作用

jquery - 使用 jQuery 插入 HTML 表格行时，某些输入元素不起作用

问题描述

我通过单击一个按钮在当前行之后插入一个表格行。根据需要插入行；但是，第一个之后的输入字段和行末尾的按钮不起作用。输入字段不能点击添加数据；但是，我可以在它们中添加数据。该行末尾的按钮不注册点击。您可以点击按钮并按回车键，它可以工作（点击它并单击不起作用）。

现有行是：

//Add an initial row if there are not currently any program lines
var newRows = "";
    newRows += "<tr><td class='button'><button type='button' name='addPDRow'><span class='glyphicon glyphicon-plus'></span></button></td>";
    newRows += "<td class='keyvalue'><input class='timeWidth pdValue' name='row0' value='07:00'></input></td>"; //Time
    newRows += "<td class='keyvalue'><input class='activityWidth  pdValue' name='row0'></input>" //Activity
    //Activity table
    newRows +=      "<table name ='activityTable'>";
    newRows +=          "<tbody name='activity2Tablebody'>";
    newRows +=              "<tr>";
    newRows +=                  "<td class='dropValue'>";
                                    //Put a transparent div over the inputs elements so it can be dragged to remove
    newRows +=                      "<div class='dragabbleRemove'><div>&nbsp;</div>";
    newRows +=                          "<input type='text' class='droppableItem activityWidth' disabled></input>";//Droppable Activity Class
    newRows +=                      "</div>";
    newRows +=                  "</td>";
    newRows +=              "</tr>";
    newRows +=          "</tbody>";
    newRows +=      "</table>";
    newRows +="</td>";

    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Location
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Equip. Needed
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Youth to Bring
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Leaders
    newRows += "<td class='button'><button type='button' name='removePDRow'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";

$('#programDetailTablebody').append(newRows);

添加新行的函数是：

$('#programDetailTablebody').on('click', 'button[name="addPDRow"]', function(e) {
    e.preventDefault();
    var newRows = "";
        newRows += "<tr><td class='button'><button type='button' name='addPDRow'><span class='glyphicon glyphicon-plus'></span></button></td>";
        newRows += "<td class='keyvalue'><input class='timeWidth pdValue' name='row' value='07:00'></input></td>"; //Time
        newRows += "<td class='keyvalue'><input class='activityWidth  pdValue' name='row' value='activity'></input></td>"; //Activity       
        newRows += "<td class='keyvalue'><input class='pdValue' name='row' value=''></input></td>";//Location
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Equip. Needed
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Youth to Bring
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Leaders
        newRows += "<td class='button'><button type='button' name='removePDRow'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";

    $(newRows).insertAfter($(this).closest('tr'));

    $(makeDroppable);
});

这是添加新行后的样子：

在此处输入图像描述

标签： jqueryhtml

解决方案

有人向我提到“除非在它上面叠加另一个元素来捕获鼠标点击。” 杰出的！我有以下CSS：

.dragabbleRemove div {
    position:absolute;
    z-index:2;
    height: 100%;
    width: 100%;
}

与：

//Put a transparent div over the inputs elements so it can be dragged to remove
newRows +=                      "<div class='dragabbleRemove'><div>&nbsp;</div>";
newRows +=                          "<input type='text' class='droppableItem activityWidth' disabled></input>";//Droppable Activity Class
newRows +=                      "</div>";

所以解决方案是更多的css：

    .pdValue {
        position: relative;
        z-index:3;
    }

    .buttonFront {
        position: relative;
        z-index:3;
    }

我想不通的是为什么覆盖层向下延伸到右侧？

亲切的问候，

格林

推荐阅读