2

我需要在每个新行上创建支票簿。我通过检查高度来获得新行事件。但是我需要在主 div 中添加两个 div，其中第一个 div 包含复选框。第二个 div 包含数据。我面临困难在那件事上

这是我的小提琴。 http://jsfiddle.net/naveennsit/TnTj9/1/

$(function() {
  var h = -1;
  setInterval(function () {


    var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
    if(h == -1) h = newHeight;
    if(h != newHeight) {
        h = newHeight;
//        alert("I've changed height");
    }
  }, 1000);
});

我需要像这样在左 div 中使用复选框，但不能这样做。

$("#leftdiv").append( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );
4

1 回答 1

1

我相信这就是您正在寻找的

小提琴

JS：

$(function() {
  var h = -1;
  setInterval(function () {
    var newHeight = $('#realTimeContents').append("Hiiiii. is div").height();
    if(h == -1) h = newHeight;
    if(h != newHeight) {
        h = newHeight;
        $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
    }
  }, 100);
});

CSS：

#left {
    float:left;
}
#realTimeContents {
    width:400px;
    line-height: 25px;
}
.cb {
    height:25px;
}

HTML：

<div id="left"><div class='cb'><input type="checkbox" /></div></div><div id="realTimeContents" class ="left realtimeContend_h"> 
</div>

如果你有可变的行高，你可以尝试删除 css.cb并添加：

if(h != newHeight) {
    $("#left").find(".cb").last().css("height", newHeight-h);
    h = newHeight;         
    $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>");
}

这是您似乎想要从评论中获得的功能的更新：

小提琴

我添加了一些 DOM 和这个 JS：

$("#left").on("click", "input", function () {
    var checkedIndexes = "";
    var $cbs = $("#left").find("input");
    $cbs.filter(":checked").each(function () {
        checkedIndexes += "<span>" + $cbs.index(this) + "</span>";
    });
    $("#checkedRows").html(checkedIndexes);
});

$("#checkedRows").on("click", "span", function () {
    var $box = $("#left").find("input").eq(this.innerHTML);
    var $content = $("#content");
    $content.scrollTop(
    $box.offset().top - $content.offset().top + $content.scrollTop());
});

如果您选中复选框，它们将显示在顶部...如果您单击顶部的行，它将滚动到它。

于 2013-08-30T16:31:57.757 回答