Обработка вызывающего элемента html с помощью javascript, dojo или jquery
У меня есть следующая таблица:
<table>
<tr><td><span onClick='toggleFunction();'>ABC</span></td></tr>
<tr><td><span onClick='toggleFunction();'>PQR</span></td></tr>
<tr><td><span onClick='toggleFunction();'>XYZ</span></td></tr>
<tr><td><span onClick='toggleFunction();'>LMN</span></td></tr>
</table>
HTML создается динамически.
function toggleFunction() {
var innerHtml = //code to get inner html of calling element here
console.info(innerHtml);
}
Я хочу получить внутренний HTML-код span, из которого toggleFunction() вызывается через onClick.
Например, когда щелчок находится в строке 1, ABC должен быть напечатан на консоли. Но когда щелчок находится в строке 3, должен быть напечатан XYZ.
Возможно ли это через Javascript или Dojo? Я не могу использовать JQuery. Однако я хотел бы знать, возможно ли это с помощью JQuery или нет.
Обратите внимание, что элемент span не имеет идентификатора.
Это не дубликат другого вопроса, например:
1) В принятом решении используется встроенный javascript только для предупреждения innerHTML. Однако для меня мне просто нужен способ получить дескриптор, чтобы я мог выполнять гораздо более необходимую обработку внутри моей функции.
2) В других ответах на вопрос используется идентификатор элемента, что не в моем случае.
@adiga Это не повторяющийся вопрос. Ребята, лучше сначала прочтите вопрос. Не переусердствуйте и не отговаривайте вопросов.
используйте toggleFunction вместо alert. Я нашел как минимум 10 дубликатов.
Ответ просто var innerHtml = event.target.innerHTML;
@adiga: Правда? Где вопрос, который отвечает на мой вопрос. Если toggleFunction находится в отдельном файле, console.info (this.innerHTML) внутри toggleFunction не работает. Если это так, почему бы не предоставить такой же JSFiddle, если вы чувствуете, что знаете ответ.
@ZakariaAcharki: Отлично. Если это сработает, то это то, что я искал. И ни у одного из других вопросов нет этой строчки в качестве ответа.
Отдельный файл, тот же файл не имеет значения. console.info(this.innerHTML) не будет работать, потому что это относится к объекту Window, а не к вашему элементу.
Больше дубликатов: jQuery: получить контент / innerhtml onclick и Как получить innerHTML выбираемого элемента jquery? и получение внутреннего html ссылки при нажатии и Используйте jQuery для получения текста цели
@adiga: Вы действительно не поняли вопроса. Ты? Я ясно упомянул, что id отсутствует. Все, на что вы меня перенаправляете, - это ответы с использованием идентификатора или имени класса css или чего-то в этом роде. Даже я могу поискать их. Пожалуйста, оставь это. Я получил то, что искал. Не нужно ничего доказывать.
Ваш ответ правильный в предложенном дубликате: stackoverflow.com/a/25005107/2181514 - добавьте this, то есть: <span onClick='toggleFunction(this);'>function toggleFunction(el) {
Возможный дубликат Javascript: как получить innerHTML нажатой кнопки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать event.target для таргетинга на выбранный элемент, а затем получить контент с помощью textContent, например:
var innerHtml = event.target.textContent;
ПРИМЕЧАНИЕ 1:td должен быть закрыт перед tr, поэтому используйте </td></tr> в конце вместо </tr></td>.
ЗАМЕТКА 2: У вас есть опечатка в переменной, переданной в console.info(). Это должно быть innerHtml вместо innnerHtml.
ЗАМЕТКА 3: Поскольку внутри столбцов нет HTML, лучше использовать textContent вместо innerHTML.
function toggleFunction() {
var innerHtml = event.target.textContent;
console.info(innerHtml);
}<table>
<tr>
<td><span onClick='toggleFunction();'>ABC</span></td>
</tr>
<tr>
<td><span onClick='toggleFunction();'>PQR</span></td>
</tr>
<tr>
<td><span onClick='toggleFunction();'>XYZ</span></td>
</tr>
<tr>
<td><span onClick='toggleFunction();'>LMN</span></td>
</tr>
</table>
Возможный дубликат Как получить innerHTML этого элемента в javascript? и Javascript: как получить innerHTML нажатой кнопки