javascript - javascript 从表中获取值

Question

我有这个表：

<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值，谢谢

Answer 1

给输入元素一个 'result' 的 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 Fiddle 在这里， http://jsfiddle.net/X8vEx/

Answer 2

像这样：

纯JS！！

http://jsfiddle.net/vQBZJ/7/

使用 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);
}

Answer 3

像这样？

<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">

Answer 4

用于简化此操作的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>

Answer 5

使用 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">

Answer 6

您可以为此使用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);
    });
});