2016-04-03 3 views
2

У меня есть простой код таблицы html. Мне нужно написать функцию Javascript, которая может предупреждать содержимое любой строки, выбранной с помощью мыши (путем нажатия).Как получить текстовое содержимое внутри таблицы без идентификатора элемента

У меня нет идентификатора элемента. Поэтому мне нужно использовать событие, связанное с щелчком мыши ...

Например:

<tr> 
    <td onclick="...">Mamata</td> 
    <td>Sharma</td> 
    <td>20</td> 
</tr> 

Мне нужно написать яваскрипт функции, которая способна отображать с предупреждением любого содержания таблицу, которую я выбираю одним щелчком. Например, если я нажимаю «Mamata», мне нужно увидеть предупреждение, появляющееся на экране с надписью «Mamata».

+0

поставить OnClick на т.р. ТЭГов получить событие.target.value в скрипте – thatOneGuy

ответ

0

определить эту функцию

функцию alertContent (отправитель) {Alert (sender.innerHTML);}

и использовать его в

OnClick = "JavaScript: alertContent (это)"

0

что-то вроде этого,

<tr> 
    <td onClick="alert(this.innerHTML)">Mamata</td> 
    <td>Sharma</td> 
    <td>20</td> 
</tr> 

лучший вариант заключается в следующем: объявить функцию,

function alertcontent() 
    { 
     _sender = arguments.callee.caller.arguments[0].target; 
     if (_sender.tagName == "TD") 
     { 
      alert(_sender.innerHTML); 
     } 
    } 

и назначить это к таблицам OnClick событий, таких как;

<table onclick="alertcontent()"> 
... 
... 
</table> 

таким образом, можно использовать меньше кодирования ...

+1

Как использовать устаревший API «лучший вариант» plz? [arguments.callee] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee) – Aprillion

+0

также '_sender' является глобальной переменной – Aprillion

+0

в случае, если каждая ячейка/несколько ячейки должны быть предупреждены, что лучше делать? пишите для каждой ячейки 'onclick = ""'? или использовать назначение функции для таблиц onclick event? Действительно ли _sender является глобальной переменной? – coban

0

Вот рабочий раствор - http://jsbin.com/wigolunowa/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <table border=1> 
    <tr> 
     <td onClick="alert(this.innerHTML)">Mamata</td> 
     <td>Sharma</td> 
     <td>20</td> 
    </tr> 
    </table> 

</body> 
</html> 
0

Вы можете просто попробуйте добавить «OnClick» событие для каждого <td> с предупреждение о его внутреннемHTML, примерно следующее:

<td onclick="alert('Your value is '+this.innerHTML)">1</td> 
<td onclick="alert('Your value is '+this.innerHTML)">ABC</td> 

Или вы можете создать функцию JS, которая перебирает все <td> клеток (вы их выбираете по тегу) и получить их значения:

var myCell = document.getElementsByTagName('td'); 

for(var i=0; i<=myCell.length; i++){ 
    myCell[i].addEventListener('click', valueOnClick); 
} 

function valueOnClick(){ 
    alert('Your value is '+this.textContent); 
} 
1

Вы можете сделать это следующим образом:

var td = document.getElementsByTagName("td"); 
 
for (var i = 0; i < td.length; i++) { 
 
    td[i].onclick = function() { 
 
    alert(this.innerHTML); 
 
    } 
 
}
<table> 
 
    <tr> 
 
    <td>Mamata</td> 
 
    <td>Sharma</td> 
 
    <td>20</td> 
 
    </tr> 
 
</table>

+1

Или простая и короткая версия JQuery: '$ ("тд") нажмите (функция() { оповещения (this.innerHTML); })' – John

+1

комментарий является. хорошо. но ответ использует глобальную переменную 'i' и смехотворно повторяющиеся вызовы DOM – Aprillion

+0

@Aprillion Right! Thx для подсказки. Изменено. – John

0

You может добавить обработчик кликов в таблицу (один раз) и проверить, какая ячейка была нажата. Следующий пример проверяет для клеток (с тегами «TD»), но может быть легко изменен, чтобы проверить строк:

яваскрипта

function showElementContent(event, table) 
{ 
    event = event || window.event; 
    for(var node = event.target || event.srcElement; node && node!= table; node = node.parentNode) 
    { if(node.tagName == "TD") 
      break; 
    } 
    alert(node.innerText); 
} 

HTML

<table onclick="showElementContent(event, this)"> 
    <tbody> 
    <tr><td>a cell</td> 
     <td>a cell with a <span>spanned element</span></td> 
    </tr> 
    </tbody> 
</table> 
Смежные вопросы