Добавление tr к tbody с помощью YUI

Question

Я знаю, что это можно легко сделать с помощью jQuery, но я не смог выяснить, как это сделать с помощью YUI 2.

Я отправляю форму через AJAX и в обратном вызове, в случае успеха,Я хочу добавить информацию, которая была вставлена ​​в существующую таблицу в DOM.

Это то, что я пытаюсь безуспешно:

var callback = {
    success: function(o) {
        var result = YAHOO.lang.JSON.parse(o.responseText);
        if (result.success == true) {
            var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');

            var html = '<tr><th>' + result.name 
                + '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td></tr>';

            var el = YAHOO.util.Dom.insertAfter(html, last_row); // el is being set to NULL so the insert is failing

            YAHOO.util.Dom.get('form_urls').reset();
        }
    },
    failure: function(o) { error(); }
};

Answer 1

Вы не можете вставить строку html после узла.Попробуйте создать элемент строки, вставьте html-файл в него и добавьте элемент строки:

var callback = {
    success: function(o) {
        var result = YAHOO.lang.JSON.parse(o.responseText);
        if (result.success == true) {
            var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');

            var html = '<th>' + result.name 
                + '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td>';
            var row=document.createElement("tr");
            row.innerHTML=html;

            var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing

            YAHOO.util.Dom.get('form_urls').reset();
        }
    },
    failure: function(o) { error(); }
};

UPDATE создайте элемент dom для каждого td и th

var callback = {
    success: function(o) {
        var result = YAHOO.lang.JSON.parse(o.responseText);
        if (result.success == true) {
            var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');

            var row=document.createElement("tr");
            var th=document.createElement("th");
            th.innerHTML=result.name;
            row.appendChild(th);
            var td=document.createElement("td");
            td.innerHTML='<a href="' + result.url + '" title="' + result.url + '">';
            row.appendChild(td);
            row.appendChild(document.createElement("td"));
            row.appendChild(document.createElement("td"));

            var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing

            YAHOO.util.Dom.get('form_urls').reset();
        }
    },
    failure: function(o) { error(); }
};

Answer 2

Лучше использовать appendChild, потому что insertAfter не будет работать, если нет существующих tr.

<snip>
var tbody = YAHOO.util.Dom.get('tbody_urls');
tbody.appendChild(row);