0

我有通过循环数据生成的表，如下所示：

$.each(array_rule_segments, function (key, listofwidgets) {
    //console.log('in outer loop');
    var widget_details = listofwidgets.split(',');
    var counter = key + 1
    htmlstring += '<tr id="listofwidgets_' + key + '">';
    htmlstring += '<td><input type="button" value="Remove" class="remove"/></td>';
    htmlstring += '<td name="widget_type" class="widget_type" id="widget_type' + counter + '">' + widget_details[0] + '</td>';
    htmlstring += '<td name="widget_details" class="widget_details"  id="widget_details' + counter + '">' + widget_details[1] + '</td>';
    htmlstring += '<td name="widget_order" class="widget_order" id="widget_order' + counter + '">' + widget_details[2] + '</td>';
    htmlstring += '<td name="messages" id="messages' + counter + '">' + widget_details[3] + '</td>';
    htmlstring += '</tr>';

});

然后稍后，我有逻辑来检查用户尝试添加到表中的新小部件是否已经存在。例如，假设我在表中已有一个小部件，widget_details 字段中的值为“1234”。

我这样检查：

$("#add_to_table").live("click", function () {
    var cell;
    var result = $('#summary_table tr').find('td:contains(' + $('#input_widget_details').val() + ')'); //find cell in table with same widget dteails information...     

    if (result.length > 0) {
        //check for duplicates using class names.     
        console.log(result.siblings(".widget_order").html());
        if (result.siblings(".widget_order").html() == $('#widget_order').val() && result.siblings(".widget_type").html() == $('#widget_types').val()) {
            alert("Duplicate rule segment!");
            return false;
        }
    }

第一个 if 语句有效，它找到具有匹配的小部件详细信息值的行，但是，我无法根据它们的类名检查同级单元格。我尝试检查兄弟节点上的 html() 的调试语句产生的值为 null。

我也试过.val()代替.html().

4

2 回答 2

0

你可以检查 jQuery 中的类名

$("selector").attr("class")

应该返回元素的类名

于 2013-09-03T22:28:39.760 回答
0

这是一些类似的代码模型，一个函数显示如何在添加之前检查 html，另一个检查表中是否存在重复项（您似乎在做什么）

var array_rule_segments = ["widget1type,widgetdetails1,widgetorder1,widget1message", "widget1type,widgetdetails1,widgetorder1,widget1message"];

function rowExistsBeforeAdd(row) {
    var newRow = $(row);
    var cell;
    var foundsome;
    var details = newRow.find('.widget_details').text();
    console.log(details);
    var result = $('#summary_table tr').find('td:contains(' + details + ')');

    console.log("result:" + result.length);
    // details match if true (has length) in incomming row
    if (result.length > 0) {
        // filter to see if other things match in the new row with the inputs
        foundsome = result.filter(function () {
            var mytype = $(this).find(".widget_type").text();
            var myorder = $(this).find(".widget_order").text();
            console.log("Type:" + mytype);
            console.log("order:" + myorder);
            console.log(myorder == $('#widget_order').val());
            console.log(mytype == $('#widget_types').val());
            return myorder == $('#widget_order').val() && mytype == $('#widget_types').val();
        });
        if (foundsome.length) {
            console.log('found' + foundsome.length);
        }
    }
    return foundsome.length;
}

function checkRow() {
    var cell;
    var foundsome;
    var details = $('#input_widget_details').val();
    console.log(details);
    var result = $('#summary_table tr').find('td:contains(' + details + ')');
    console.log("result:" + result.length);
    if (result.length > 0) {
        foundsome = result.parent().siblings().filter(function () {
            var mytype = $(this).find(".widget_type").text();
            var myorder = $(this).find(".widget_order").text();
            console.log("Type:" + mytype);
            console.log("order:" + myorder);
            console.log(myorder == $('#widget_order').val());
            console.log(mytype == $('#widget_types').val());

            return myorder == $('#widget_order').val() && mytype == $('#widget_types').val();
        });
        if (foundsome.length) {
            console.log('found' + foundsome.length);
        }
    }
    return foundsome.length;
}

function addrow() {
    $.each(array_rule_segments, function (key, listofwidgets) {
        //console.log('in outer loop');
        alert(listofwidgets.length);
        var widget_details = listofwidgets.split(',');
        var counter = key + 1;
        var htmlstring = '';
        htmlstring += '<tr id="listofwidgets_' + key + '">';
        htmlstring += '<td><input type="button" value="Remove" class="remove"/></td>';
        htmlstring += '<td name="widget_type" class="widget_type" id="widget_type' + counter + '">' + widget_details[0] + '</td>';
        htmlstring += '<td name="widget_details" class="widget_details"  id="widget_details' + counter + '">' + widget_details[1] + '</td>';
        htmlstring += '<td name="widget_order" class="widget_order" id="widget_order' + counter + '">' + widget_details[2] + '</td>';
        htmlstring += '<td name="messages" id="messages' + counter + '">' + widget_details[3] + '</td>';
        htmlstring += '</tr>';
        if (!rowExistsBeforeAdd(htmlstring)) {
            $(htmlstring).appendTo('#summary_table');
        }
        /* too late, already added!
        if (checkRow()) {
            alert('duplicates');
        }
        */
    });
}

$("#add_to_table").on("click", function () {
    addrow();
});

假标记：

<table id="summary_table"></table>
<button id="add_to_table">add</button>
<br/>
<input type="text" id="widget_types" value="widget1type" />
<input type="text" id="widget_order" value="widgetorder1" />
<input type="text" id="input_widget_details" value="widgetdetails1" />

小提琴，所以你可以看到控制台日志等它的工作原理：http: //jsfiddle.net/QTkpw/

于 2013-09-03T23:45:41.547 回答