Question

我正在向表中添加Jquery数据表行。

我的要求是我想在每行之前添加一个复选框。

我试过

$(this).append('<input type="checkbox"/>');            
            $("#greaterquan").append(this.outerHTML);

但这不起作用。

http://jsfiddle.net/b4j852uq/11/

这是我的代码

    <table id="allwl">
        <th class="hidden-480">Price</th>
        <th class="hidden-480">Volume</th>
        <th class="hidden-480">Quantity</th>
    </table>




    <div id="greaterquan">
        <h3>My Stocks</h3>
    </div>



var dataSet = [
    [
        "1441.75",
        "34444444"],
    [
        "1614.45",
        "34444444"

    ],
    [
        "834.15",
        "233333"]

];

var array_names = ["APPLE", "WHIRLPOOL", "SAMSUNG"];

for (var key in dataSet) {
    if (dataSet.hasOwnProperty(key)) {
        dataSet[key].splice(0, 0, array_names[key]);
    }
}

$(function () {
    $('#allwl').dataTable({
        "iDisplayLength": -1,
            "data": dataSet,
            "columns": [{
            "title": "Name"
        }, {
            "title": "Price"
        }, {
            "title": "Quantity"
        }]
    });
});
$(document).ready(function(){
$('#allwl tr').each(function() {
    var abc = $(this).children('td').eq(2).html();
        if(abc > 40000) {
            $(this).children('td').eq(0).css('background-color', 'green');
//$(this).append('<input type="checkbox"/>');            
            $("#greaterquan").append(this.outerHTML);
        }

});
});

Answer 1

如果我理解你的话，你可以尝试这种方法：

$("<input />", {"type": "checkbox"}).insertBefore($(this));

如果你想在之前添加它而不是追加/前置

但是如果你想追加/前置，你应该试试这个：

附加：

($(this)).append($("<input />", {"type": "checkbox"}));

前置：

($(this)).prepend($("<input />", {"type": "checkbox"}));

Answer 2

试试这个http://jsfiddle.net/2pypy87p/4/

    // skipped
    if(abc > 40000) {
        $(this).children('td').eq(0).css('background-color', 'green');
        $("#greaterquan").append(
            $(this).clone() // get clone of TR because source element is attached to DOM
                .children('td').first() // get first TD
                .prepend('<input type="checkbox"/>') // add checkbox before content of TD
                .parent() // return to TR and append it to "greaterthan" element
        );
    }

如何在将每个行添加到表之前动态添加复选框

2 个答案: