jQuery динамично составляет таблицу или и т.д. и добавляет атрибуты
В примере у меня есть эта структура (небольшой пример):
<table id=example>
<tr class="blah test example"><td>Test1</td><td><a href="url">LINK</a>Test11</td></tr>
<tr class="blah test example"><td>Test2</td><td><a href="url">LINK</a>Test22</td></tr>
<tr class="blah test example"><td>Test3</td><td><a href="url">LINK</a>Test33</td></tr>
</table>
В jQuery я создал бы его динамично как:
var test = "<table id=" + someIDVar + ">"
+ "<tr class=" + classOneVar
+ classTwoVar + classThreeVar + ">"....
и и т.д. и т.д.... (много другого материала для записи). После того, как я просто добавил бы его:
$(".somePlaceInHtml").append(test);
Таким образом, там какой-либо другой путь состоит в том, чтобы записать такую структуру динамично с jQuery? Это - проблема для меня, потому что у меня есть большая структура, не столь маленькая, как я показал в примере. Главная причина, я хочу получить лучшую удобочитаемость для меня и других разработчиков, которые поддержат этот код.
4 ответа
Можете ли вы сделать «шаблон» из своей строки? Если да, то сохраните его в «постоянной» переменной (например, определенной в глобальной области видимости), содержащей заполнители для фактических переменных, например {0} , {1} и т. Д., Как вы использовал бы его в методе C # string.format () .
Итак, у вас будет такой код:
var rowTemplate = "<tr><td>{0}</td><td>SomePredefinedText {1}</td></tr>";
var alternateRowTemplate = "<tr><td class='a'>{0}</td><td>SomewhatDifferent {1}</td></tr>";
...... somewhere deep in your code
$("#someElement").append(
rowTemplate.format("myvalue1", "myvalue2")
).append(
alternateRowTemplate.format("myvalue3", "myvalue4")
);
Затем вы должны использовать реализацию string.format согласно этому ответу: Эквивалент String.format в jQuery
Вот упрощенный пример:
$(function() {
var tbl = $('<table></table>').attr({ id: "bob" });
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(tbl);
$('<td></td>').text("text1").appendTo(row);
$('<td></td>').text("Test22").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);
tbl.appendTo($(".somePlaceInHtml"));
});
Оберните часть строки в цикл, замените переменными, и, на мой взгляд, это будет, по крайней мере, легче поддерживать / читать, но я привык к jQuery, поэтому ваш опыт может отличаться, просто вариант.
Примечание: поскольку здесь везде используется .text () , это также помогает предотвратить атаки межсайтовых сценариев внутри вашего вывода.
Или вы можете вместо объединения строк использовать функцию array.join .
for(var i=0;i<arr.length;i++)
{
arr[i] = "<tr>" + sth + "</tr>";
}
node.innerHTML = arr.join('');
Вы можете создать StringBuilder, подобный тому, что есть в C#. Вот фрагмент, взятый из Telerik Extensions for ASP. NET MVC:
$.stringBuilder = function() {
this.buffer = [];
};
$.stringBuilder.prototype = {
cat: function(what) {
this.buffer.push(what);
return this;
},
string: function() {
return this.buffer.join('');
}
};
Таким образом, вы можете получить следующий код:
var html = new $.stringBuilder();
for (var i in data)
html.cat("<tr><td>").cat(i).cat("</td><td></tr>");
$('#element').append(html.string());
Преимущество этого подхода в том, что у вас будет быстрая конкатенация (объединения массивов лучше работают в IE6), и вы можете расширить объект другими полезными функциями (скажем, catIf, которая принимает булево выражение, или rep, которая повторяет заданную строку несколько раз).