JavaScript - получить данные первой ячейки таблицы с щелчком

<c:foreach var="room" items="${myrooms}">
 </c:foreach><table border="1" cellpadding="5" id="newtable">
 <tbody><tr>
 <th>Room No</th>
 <th>AC</th>
 <th>Deluxe</th>
 <th>Tariff</th>
 </tr>
 <tr bgcolor="#4B476F" onmouseover="this.bgColor='gold';" onmouseout="this.bgColor='#4B476F';">

 
 
 
 <td>₹</td>
 <td><button type="button" onclick="rowFunction()">Pay</button> </td>
 </tr>
 
 </tbody></table>

При нажатии кнопки, соответствующей каждой строке, я хочу, чтобы мой скрипт возвращал номер комнаты, то есть первые данные ячейки строки. Я пробовал много вещей после ссылки на различные статьи в Интернете. Ничто не работает. Пожалуйста помоги. И Я ЗАПРЕЩАЕТСЯ, ЧТОБЫ ПОЛУЧИТЬ НЕОБХОДИМЫЕ РЕШЕНИЯ. ТОЛЬКО JAVASCRIPT. Благодарю!

3 ответа

Вы можете передать элемент, нажавший кнопку, в свою функцию:

<button type="button" onclick="rowFunction(this)">Pay</button>

и пересечь DOM:

function rowFunction(el) {
 var n = el.parentNode.parentNode.cells[0].textContent;
 // ...
}


Вы можете использовать функцию HTML5 document.querySelectorAll чтобы получить список ваших кнопок, а затем добавить к ним прослушиватель событий, который позволит вам получить доступ к их родительской строке и получить ее первую ячейку.

var buttons = document.querySelectorAll('#newtable tbody .mybutton');

function buttonClicked(e) {
 var button = this,
 cell = button.parentElement,
 row = cell.parentElement,
 firstCell = row.querySelector('td');
 alert(firstCell.innerHTML);
}

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

Вот скрипка, которую я использовал для проверки моего кода. Кроме того, рассмотрите возможность использования CSS вместо JavaScript для настройки цвета и цвета наведения ваших строк. Он будет более чистым и более ремонтопригодным в долгосрочной перспективе.


Использовать как

$(".mybutton").click(function(){
 alert($(this).parent().siblings().eq(0).text());
});

DEMO

licensed under cc by-sa 3.0 with attribution.