[英]javascript get value from table
我有這個表:
<table border="1" id="table">
<tr>
<th>Id</th>
<th>action</th>
</tr>
<tr>
<td>123</td>
<td><a href="#">select</a></td>
</tr>
<tr>
<td>456</td>
<td><a href="#">select</a></td>
</tr>
<tr>
<td>789</td>
<td><a href="#">select</a></td>
</tr>
</table>
result =<input type="text">
使用JavaScript如何在單擊選定的href行時顯示輸入的id值,謝謝
像這樣:
純JS!
使用HTML4兼容代碼:
var links = document.getElementsByTagName('a');
for (i=0; i<links.length; i++)
{
links[i].addEventListener("click", function(event)
{
event.preventDefault();
var res= document.getElementById("result");
res.value = this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML;
}
, false);
}
僅HTML5:
jsfiddle: http : //jsfiddle.net/vQBZJ/2/
var links = document.querySelectorAll('a');
for (i=0; i<links.length; i++)
{
links[i].addEventListener("click", function(event)
{
event.preventDefault();
var res= document.querySelector("#result");
res.value = this.parentNode.parentNode.querySelector("td").innerHTML;
}
, false);
}
給輸入元素賦予一個“結果”的ID,然后嘗試一下,
var table = document.getElementById('table');
var links = table.getElementsByTagName('a');
for(var x = 0; x < links.length; x++) {
links[x].onclick = function() {
var parentCell = this.parentNode;
var parentRow = parentCell.parentNode;
var idCell = parentRow.cells[parentCell.cellIndex-1]
var id = idCell.textContent;
document.getElementById('result').value = id;
}
}
快速JS小提琴在這里, http://jsfiddle.net/X8vEx/
像這樣?
<script type="text/javascript">
function SelectVal(ele)
{
document.getElementById("result").value = ele.parentNode.parentNode.children[0].innerHTML;
}
</script>
<table border="1" id="table">
<tr>
<th>Id</th>
<th>action</th>
</tr>
<tr>
<td>123</td>
<td><a href="#" onclick="SelectVal(this);">select</a></td>
</tr>
<tr>
<td>456</td>
<td><a href="#" onclick="SelectVal(this);">select</a></td>
</tr>
<tr>
<td>789</td>
<td><a href="#" onclick="SelectVal(this);">select</a></td>
</tr>
</table>
Result = <input id="result" type="text">
jQuery的簡化
<table border="1" id="table">
<tr>
<th>Id</th>
<th>action</th>
</tr>
<tr>
<td>123</td>
<td><a href="#" onclick="getId(this)">select</a></td>
</tr>
<tr>
<td>456</td>
<td><a href="#" onclick="getId(this)">select</a></td>
</tr>
<tr>
<td>789</td>
<td><a href="#" onclick="getId(this)">select</a></td>
</tr>
</table>
<script>
function getId(e){
alert(e.parentNode.parentNode.firstElementChild.innerHTML);
}
</script>
使用jQuery,您可以這樣做:
工作演示 。
JS:
$(function(){
$('#table a').click(function(e) {
e.preventDefault();
$('#result').val($(this).closest('tr').find('td:first').text());
});
});
HTML:
<table border="1" id="table">
<tr>
<th>Id</th>
<th>action</th>
</tr>
<tr>
<td>123</td>
<td><a href="#">select</a></td>
</tr>
<tr>
<td>456</td>
<td><a href="#">select</a></td>
</tr>
<tr>
<td>789</td>
<td><a href="#">select</a></td>
</tr>
</table>
result = <input id="result" type="text">
您可以為此使用jQuery
$(document).ready(function(){
$('table#table a').click(function(e){
e.preventDefault();
var value = $(this).parent().prev('td').text().trim();
$('table#table').next('input').val(value);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.