2013-03-05 4 views
3

В настоящее время я работаю над созданием таблицы, которая позволяет сортировать строки по возрастанию и убыванию, а также по щелчку и перетаскивание столбцов. У меня это работает, но я хотел бы улучшить его. В настоящее время я получаю заголовок и гальванического элемента текста, а затем конкатенации HTML-теги в строку:Получить HTML-теги и текст

var row = "<td>" + myData + "</td>";

То, что я хочу знать, если JQuery имеет метод/функцию, которая позволила бы мне, чтобы получить текст с тегами, прикрепленными к одному элементу.

Я пробовал .text().html().contents();.parent().html(). Функция .parent().html() наиболее близка к тому, что я хочу, но она дает мне все строки с тегами и текстом, а не только те, которые я хочу.

Так что я хочу сохранить в своей переменной <th>First Column</th> не только First Column.

Вот скрипку пример того, что я пробовал и с основной HTML-разметки и ссылки на API я исследовал:

Fiddle

.text() .html() .contents() .parent()

Update:

Для любопытных, почему я это делаю, здесь мой проект стороны:

Table Sorter

+1

Возможный дубликат [Получить HTML-код выбранного элемента] (http: // stackoverflow.com/questions/2419749/get-selected-elements-outer-html) – Quentin

+0

Реализация сортировки путем конкатенации HTML как текста не похожа на хорошую идею. Было бы лучше, если бы вы просто использовали методы jQuery для перемещения элементов вокруг. – JJJ

+0

Я проверю это, я не нашел ничего, кроме как получить конкретный элемент или текст. Спасибо, я посмотрю, поможет ли это. – defaultNINJA

ответ

3

Вы можете использовать outerHTML свойство.

var html = $(this).prop('outerHTML'); 

Или:

var html = this.outerHTML; 

http://jsfiddle.net/Qy8GS/

+0

Удивительные работы, как чемпион! Я подумал, что должно быть что-то, но я не мог найти его :(Ограничение по времени, прежде чем я смогу принять его, вы слишком быстро! – defaultNINJA

1

http://jsfiddle.net/aCTva/1/

$.fn.outerHTML = function() { 
    var $t = $(this).eq(0); 
    if ("outerHTML" in $t[0]) { 
     return $t[0].outerHTML; 
    } else { 
     return $t.clone().wrap('<div></div>').parent().html(); 
    } 
}; 


alert($(this).outerHTML()); 
+0

+1 для рабочего скрипка, спасибо за помощь! – defaultNINJA

0

Просто направить вас в направлении ..

var test = document.getElementById('test') //returns a HTML DOM Object 
var test = $('#test') //returns a jQuery Object 
var test = $('#test')[0] //returns a HTML DOM Object 

Так что я думаю, что вам нужен $('#test')[0].outerHTML

0

Нового jsFiddle: http://jsfiddle.net/EdD7U/2/

$("tr").each(function() { 
    var colIndex = 0; 

    $(this).find("td").each(function() { 
     $(this).parent().parent().find('th') 
      .each(function(index) { 
       if (index == colIndex) { 
        var colHeader = $(this).prop("outerHTML"); 
        alert(colHeader); 
       } 
      }); 

     colIndex++; 
    });    
}); 

В основном, сохранить индекс tr вы находитесь, а затем захватить несколько родителей вверх по йоту (в table) а затем найдите теги th. Для каждого тега th выведите только th индекса от оригинала tr. Переменная, которую вы пытаетесь получить, - colHeader.

Смежные вопросы