javascript 是否可以使用 onclick 获取 <td> 元素的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18125204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to get the value of a <td> element using onclick?
提问by CBC_NS
I currently have a table that has a list of email template names being echoed using php. Below is part of the php code. I'm trying to grab the table value and pass it to my JS file where a future AJAX command will pass it to a different file (that I won't have any issues with). My first attempt to alert out the value stated that the value was undefined. My second attempt showed the type of element it was inside (at the time it was a span). Now it's not showing anything. Suggestions?
我目前有一个表，其中包含使用 php 回显的电子邮件模板名称列表。下面是部分php代码。我正在尝试获取表值并将其传递给我的 JS 文件，在那里未来的 AJAX 命令会将它传递给另一个文件（我不会有任何问题）。我第一次尝试提醒该值指出该值未定义。我的第二次尝试显示了它内部的元素类型（当时它是一个跨度）。现在它没有显示任何内容。建议？
PHP code:
PHP代码：
<table class="departments">
<tr>
<th scope="col" style="width: 175px;">Email Name</th>
';
$get_depts = mysql_query("SELECT dept_name FROM depts where bus_id = '{$_SESSION['bus_id']}'");
while(($department = mysql_fetch_assoc($get_depts)))
{
echo '
<th scope="col" style="width: 175px;">'.$department['dept_name'].'</th>
';
}
echo '
</tr>
';
$get_emails = mysql_query("SELECT id, email_name from emails where bus_id = '{$_SESSION['bus_id']}' ORDER BY email_name ASC");
while(($email = mysql_fetch_assoc($get_emails)))
{
echo '
<tr>
<td id="test" onclick="moveValue()">'.$email['email_name'].'</td>
';
Current JS code:
当前的JS代码：
function moveValue()
{
var x = document.getElementById(test);
var y = x.innerHTML;
alert(y);
}
回答by Amal Murali
Javascript:
Javascript：
var y = document.getElementById("test").innerText;
jQuery:
jQuery：
$("#test").text();
To get the HTML:
要获取 HTML：
var html = document.getElementById("test" ).innerHTML;
jQuery:
jQuery：
$("#test").html();
回答by Marek Schubert
With javascript:
使用 JavaScript：
To get raw text without any elements or:
获取没有任何元素的原始文本或：
somevar=document.getElementById ( "test" ).innerText;
To get full html code of tag. Contents will be stored in 'somevar' variable.
获取标签的完整 html 代码。内容将存储在“somevar”变量中。
somevar=document.getElementById ( "test" ).innerHTML;
回答by MajorCaiger
You id attribute would be the same for every td inside the loop. So JS would not know which element you want.
您的 id 属性对于循环内的每个 td 都是相同的。所以 JS 不会知道你想要哪个元素。
You could try passing thisinto the onclickmethod
你可以尝试传递this到onclick方法
HTML
HTML
<td onclick="moveValue(this);">
JS
JS
function moveValue( elem )
{
alert(elem.innerHtml);
}
I would take a look at jQueryif I were you. It makes all this stuff much easier to achieve.
jQuery如果我是你，我会看看。它使所有这些东西更容易实现。
回答by vascowhite
I don't want to get into all the problems with your code as there are rather a lot. However, getting the value of a <td>element by clicking is trivial to achieve.
我不想涉及你的代码的所有问题，因为有很多。但是，<td>通过单击获取元素的值是微不足道的。
You first need to assign a click handler to each cell in your table. The easiest way to do this is to loop through each cell and assign the handler like so:-
您首先需要为表格中的每个单元格分配一个点击处理程序。最简单的方法是遍历每个单元格并分配处理程序，如下所示：-
var cells = document.getElementsByTagName('td');
for(var i = 0; i <= cells.length; i++){
cells[i].addEventListener('click', clickHandler);
}
function clickHandler()
{
alert(this.textContent);
}
Then every time you click on a cell the clickHandler()will be called and you can run whatever code you wish.
然后每次单击单元格时clickHandler()都会调用该单元格，您可以运行任何您希望的代码。
You can see it working in this fiddle
你可以看到它在这个小提琴中工作
Lots of information here https://developer.mozilla.org/en-US/docs/Web/API
回答by Mihai Matei
You can do it either by
你可以通过
function moveValue()
{
var x = document.getElementById('test');
var y = x.innerHTML;
alert(y);
}
or by:
或通过：
function moveValue(element) {
var y = element.innerHTML;
alert(y);
}
//with the following html code:
<td onclick="moveValue(this)">'.$email['email_name'].'</td>
回答by Achmad
its work.
这是工作。
function clickValue(elem) {
var x = document.getElementById(elem).innerHTML;
alert(x);
}<table>
<th>Coba</th>
<tr>
<td id="1" onclick="clickValue('1')">value</td>
</tr>
<tr>
<td id="2" onclick="clickValue('2')">value yg ke 2</td>
</tr>
</table>Change id="*anyvalue*"and clickValue('*anyvalue*')
改变id="*anyvalue*"和clickValue('*anyvalue*')
