Question

我尝试根据两个条件在特定位置的<table>内插入<div>元素。

条件1：基于页面编号

条件2：基于ordernum。

例如：

 <div id="printContainer">
      <table class="BKG pg1" id="tbl-09-338785" data-ordernum="0">
      </table>
      <table class="BKG pg1" id="tbl-09-338786" data-ordernum="1">
      </table>
      <table class="BKG pg2" id="tbl-09-338787" data-ordernum="0">
       </table>
      <table class="BKG pg2" id="tbl-09-338788" data-ordernum="1">  
      </table>
      <table class="BKG pg3" id="tbl-09-338789" data-ordernum="0">
      </table>
    </div>

如果我想进入

<table class="BKG pg2" id="tbl-09-338790" data-ordernum="5">

在div内，然后它应该附加到

之间的列表中

<table class="BKG pg2" id="tbl-09-338788" data-ordernum="1">  and 
<table class="BKG pg3" id="tbl-09-338789" data-ordernum="0">

现在，如果我想进入

<table class="BKG pg2" id="tbl-09-338791" data-ordernum="3">

在div内，然后它应该附加到

之间的列表中

<table class="BKG pg2" id="tbl-09-338788" data-ordernum="1">  and 
<table class="BKG pg2" id="tbl-09-338790" data-ordernum="5">

JsFiddle

Answer 1

尝试使用此尺寸：http://jsfiddle.net/S4yhS/

工作由insert函数处理：

function insert(page, id, ordernum) {
    var didInsert = false;
    var table = $("<table>", {
        'class': "BKG pg" + String(page),
        'id': id,
        'data-ordernum': ordernum
    });

    $(".pg" + String(page)).each(function (idx, element) {
        if ($(element).data("ordernum") > ordernum) {
            $(element).before(table);
            didInsert = true;
        }
    });

    if (!didInsert) {
        $(".pg" + String(page)).last().after(table);
    }
}

它的工作原理如下：

遍历页面上的每个表格。假设这些表已经由ordernum
如果订单号大于给定值，请在其前面插入给定的表。
如果不存在更大的订单号，请在页面末尾插入给定的表格。

请注意，这是使用jQuery完成的。没有它你也可以这样做，但是更难。但是，基本方法将保持不变。

另请注意，在String()值上使用page并非绝对必要，但我喜欢明确地进行类型转换，而不是让语言为我做。

测试：

insert(2, "tbl-09-338790", 5);
insert(2, "tbl-09-338791", 3);

结果：

<div id="printContainer">
    <table class="BKG pg1" id="tbl-09-338785" data-ordernum="0"></table>
    <table class="BKG pg1" id="tbl-09-338786" data-ordernum="1"></table>
    <table class="BKG pg2" id="tbl-09-338787" data-ordernum="0"></table>
    <table class="BKG pg2" id="tbl-09-338788" data-ordernum="1"></table><table class="BKG pg2" id="tbl-09-338791" data-ordernum="3"></table><table class="BKG pg2" id="tbl-09-338790" data-ordernum="5"></table>
    <table class="BKG pg3" id="tbl-09-338789" data-ordernum="0"></table>
</div>

（注意：在不添加换行符之前和之后，但显示应该相同）

另请参阅：before和after

根据条件向DIV添加元素

1 个答案: