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値を表示する方法、ありがとう

score 3 · Accepted Answer

入力要素に「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フィドルはこちら、 http：//jsfiddle.net/X8vEx/

score 2 · Accepted Answer

このような：

ピュア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);
}

score -1 · Accepted Answer

このような？

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

score -1 · Accepted Answer

これを簡素化するための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>

score -2 · Accepted Answer

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

score -2 · Accepted Answer

これには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 - javascript テーブルから値を取得する

6 に答える 6

Related

Reference