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

像这样：

PURE 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 2

将“结果”的id添加到input元素并尝试此操作，

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/

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，您可以这样做：

Working demo

时：

$(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);
    });
});

javascript从表中获取价值

6 个答案: