Как достать td элемент таблицы с помощью jquery?

Question

[NetyNicka]

Есть дизайн:

<div name="gp">
        <table>
            <tr>
                <td class="status">
                    <a href="#" class="ss-icon" title="Valid">&#x2713;</a>
                </td>
                <td class="address">http://</td>
                <td style="width: 100%"><input type="text" class="textbox" name="gp" id="4" placeholder="enter yourcode here" /></td>
            </tr>
        </table>
        <a href="#" class="ss-icon remove" name="removegp" title="Remove SF">&#xE0D0;</a>
    </div>

Нужно при клике по input заменить

<a href="#" class="ss-icon" title="Valid">&#x2713;</a>

на

<span class="fail" title="Failed">

Проблема возникает именно с выбором содержимого этой таблицы (на странице расположено несколько подобных таблиц).

$('*[name="gp"]').click(function () {
var self = $(this);
//тут скорее всего можно достать значение <td class="status"> с помощью продвинутого выражения или по child/parent

Answer 1

[reifter]

Как-то так:

var self = $(this);
self.find('td.status').html('<span class="fail" title="Failed"></span>');

Answer 2

[Андрей Федоров]

Ну не совсем на jq. Но ведь js тоже пойдет?

codepen.io/aliencash/pen/doMxoz

Разберетесь как под себя адаптировать?