jQuery: генерировать ссылку из содержимого ячейки таблицы

0

У меня хорошая таблица

<table id="#table1">
  <tr>
    <td class="column1">foo1</td>
    <td class="column2">#bar1</td>
  </tr>
  <tr>
    <td class="column1">foo2</td>
    <td class="column2">#bar2</td>
  </tr>
</table>

Я хочу выбрать второй столбец и заменить содержимое ссылками, используя значения в td для href. Таким образом, конечный результат должен быть:

<table id="#table1">
  <tr>
    <td class="column1">foo1</td>
    <td class="column2"><a href="#bar1">link</a></td>
  </tr>
  <tr>
    <td class="column1">foo2</td>
    <td class="column2"><a href="#bar2">link</a></td>
  </tr>
</table>

Поэтому я выбираю td и обертываю его приятным href.

$("td.column2").wrapInner(function() {
    return "<a href='" + this.nodeValue + "'></a>";
});

Это, однако, создает следующее:

<table id="#table1">
  <tr>
    <td class="column1">foo1</td>
    <td class="column2"><a href="null">#bar1</a></td>
  </tr>
  <tr>
    <td class="column1">foo2</td>
    <td class="column2"><a href="null">#bar2</a></td>
  </tr>
</table>

Что я делаю не так? Я, вероятно, не замечаю ничего смешного, но это был долгий день. Спасибо за вашу помощь!

Теги:

5 ответов

2
Лучший ответ

DEMO

$("td.column2").html(function() {
    return "<a href='" + this.innerHTML + "'>Link</a>";
});

или

DEMO

если вы хотите, чтобы текст ссылки был таким же, как и предыдущий текст

$("td.column2").html(function() {
    return "<a href='" + this.innerHTML + "'>"+this.innerHTML+" </a>";
});

Рекомендации

innerHTML

.html()

Поделиться
  • 1
    Это место. Работает как шарм. Спасибо вам большое!
  • 0
    @ user2811397 Добро пожаловать Рады помочь :)
Показать ещё 1 комментарий
5

использование

$("td.column2").html(function() {
    var self = $(this);
    return $('<a>',{
        href: self.text(),
        text: 'link'
    });
});

Демо на http://jsfiddle.net/V4dFj/

Поделиться
  • 0
    +1 за использование {params} (о котором я не знал). Это подразумевает лучшую читаемость.
  • 1
    @ Остин Я не вижу, где ОП хочет хранить содержимое. В его примере он полностью заменен.
Показать ещё 2 комментария
1

Используйте jQuery, чтобы получить значение вашего td... (это просто более удобно использовать jQuery, когда вы можете), который является его текстом:

Первая часть ответа: замените this.nodeValue на $(this).text().

Второй ответ: я думаю, что вы используете wrapInner() неправильно. См. Http://api.jquery.com/wrapInner/ Что вы хотите сделать, это заменить внутренний контент вашего td. Поэтому вы должны использовать $('td.column2').html(function() {//etc }) ;

Поделиться
1

Я бы предложил:

$('td.column2').html(function(i,h){
    var text = $(this).text();
    return '<a href="' + text + '">' + text + '</a>';
});

Демо-версия JS Fiddle.

Поделиться
0

http://jsfiddle.net/kasperfish/p68pH/

$(function() {

    $("td.column2").wrapInner(function() {
    return "<a href='" + $(this).html() + "'></a>";
    });

});
Поделиться
  • 0
    Это повторяет значение href вместе с именем ссылки. Таким образом, он отображает <a href="bar1#"> ссылку bar1 # </a>
  • 0
    Ваш вопрос заключался в том, чтобы отобразить содержимое ячейки таблицы в ссылке. Не удаляя специальные символы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню