Вопросы Теги

Создание <td> элементы с клиентским поведением на лету в jQuery

Просто начав с jQuery, и я имел некоторый успех до сих пор. Я создал обработчик, который обновляет <таблица> каждый раз, когда пользователь делает выбор от выпадающего. Это главным образом походит на это:

function loadAttributes() {
$.ajax({
    type: "POST",
    url: "../ws/itemSearch/getAttributesForItemType",
    contentType: 'application/xml',
    data: '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.itemsearch.foo.com/">'
          + '<soapenv:Header/><soapenv:Body><ser:getAttributesForItemType>'
          + '<arg0>' + this.value + '</arg0>'
          + '</ser:getAttributesForItemType></soapenv:Body></soapenv:Envelope>',
    processData: false,
    dataType: "xml",
    success: function(data) {
        var attributes = '<table summary="Attribute Section"><tr class="underline">';

        var attCount = 0;

        $(data).find("return").each(
            function() {
                if (++attCount % 4 == 0) {
                    attributes += '</tr><tr class="underline">';
                }

                // TODO PMA click handler to the new <td> element
                attributes += '<td>' + this.textContent + '</td>';
            }
        );

        attributes += '</tr></table>';

        $("div[id=attributes]").html(attributes);
    }
});
}

Поскольку Вы видите, что мой следующий шаг не должен только добавлять литерал <td> элементы к строке, содержащей атрибуты, но добавить обработчик щелчков к ним. Этот обработчик щелчков добавил бы содержание <td> к текстовому полю; что-то как:

tdItem.click(function() {
    $("input[name=search]").append(tdItem.textContent);
}

Чтобы сделать это, я предпочел бы создавать каждый td объект как отдельный Элемент и создавать таблицу объектно-ориентированным способом с помощью <TR> элементы вместо того, чтобы вставить вместе литеральную строку, которая является тем, что я делаю теперь. Большинство примеров на сайте jQuery имеет отношение к добавляющим слушателям существующих элементов а не создания нового раздела документа как это на лету каждый раз. По крайней мере кто-то может указать на меня на хорошее учебное руководство о том, как выполнить то, что я пытаюсь сделать здесь?

1
задан aarestad 24 June 2010 в 17:08
поделиться

3 ответа

На самом деле этого довольно просто достичь, и я бы рекомендовал воспользоваться некоторыми функциями jQuery при написании вашего HTML-здания.

Сначала $ (" создаст элемент tr, хранящийся в объекте jQuery, как если бы вы только что его выбрали. Если вы создаете html, как указано выше, я бы порекомендовал изменить что-то подобное в своей функции успеха. 

    var attributes = $('<table summary="Attribute Section"></table>');

    var attCount = 0;
    var attributeRow = $('<tr class="underline"></tr>');

    $(data).find("return").each(
        function() {
            if (++attCount % 4 == 0 && attCount != 0) {
                attributes.append(attributeRow.clone());
                attributeRow = $('<tr class="underline"></tr>');
            }

            // TODO PMA click handler to the new <td> element
            var attribute =  $('<td>' + this.textContent + '</td>'); 
            attribute.click(function(){//click function});              
            attributeRow.append(attribute );

        }
    );
    //add the last attribute row
    attributes.append(attributeRow);
    $("div[id=attributes]").append(attributes);

Выше вы заметили, что теперь у вас есть атрибут td, созданный как объект jQuery, к которому вы можете применять функции щелчка.

2
ответ дан 2 September 2019 в 23:32
поделиться

Единственный способ сделать это со строковыми литералами - это добавить атрибут onclick к вашим элементам td , например 

 attributes += '<td onclick="somefunction();">' + this.textContent + '</td>';

, который будет работать, но Я бы не рекомендовал это. Чтобы оставаться ненавязчивым, используйте объекты jQuery для создания таблиц. Например 

  success: function(data) {  
    var $table = $('<table summary="Attribute Section"></table>');

    $table.append($('<tr class="underline"></tr>'));

    var attCount = 0;  

    $(data).find("return").each(  
        function() {  
            if (++attCount % 4 == 0) {  
                $table.append($('<tr class="underline"></tr>').append($('<td/>', {
                    click:   function(e){
                         alert($(this).text());
                    }
                }))); 
            }  
        }  
    );  

    $("div[id=attributes]").empty().append($table);  
}
0
ответ дан 2 September 2019 в 23:32
поделиться

На мой взгляд, более элегантный подход к обработке кликов для td заключается в том, чтобы поместить обработчик одного клика на саму таблицу и позволить ему улавливать события щелчка, которые всплывают из td. Таким образом, вам не нужно беспокоиться о добавлении обработчиков к каждому td в таблице. Это также лучше для производительности, хотя в данной ситуации я сомневаюсь, что это имеет большое значение в этом отношении.

Вот что вы бы сделали (вы можете добавить это сразу после объявления переменной $ table): 

$table.click(function(e) {
   var target = $(e.target);

   if (target.is('td')) {

      var input = $('input[name=search]');
      input.val( input.val() + target.text() );

      e.stopPropagation();
   }
});
0
ответ дан 2 September 2019 в 23:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: