jQueryでTABLEをクリックした時の情報を取得したりセルの編集をしたりする

2016/12/24 その他

TABLEをクリックした時の情報を取得する

クリックされたセルのカラムや行番号や内容を取得するサンプル。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TableClick</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
  </head>
  <body>

    <script>
      $(function() {
        $('#target-table td').on('click', function() {
          var td = $(this)[0];
          var tr = $(this).closest('tr')[0];
          console.log('td:' + td.cellIndex);
          console.log('tr:' + tr.rowIndex);
          console.log($(this).text());
        });
      });
    </script>

    <table id="target-table" border="1">
      <tr><td>0-0</td><td>1-0</td><td>2-0</td></tr>
      <tr><td>0-1</td><td>1-1</td><td>2-1</td></tr>
      <tr><td>0-2</td><td>1-2</td><td>2-2</td></tr>
      <tr><td>0-3</td><td>1-3</td><td>2-3</td></tr>
      <tr><td>0-4</td><td>1-4</td><td>2-4</td></tr>
    </table>

  </body>
</html>

TABLEのセルを編集する

情報を取るだけならちょっと面白くないんで、画面遷移やダイアログを出さすにTABLEのセルを編集する、いわゆるIn Place Editorってやつのサンプル。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TableClick</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
  </head>
  <body>

    <script>
      $(function() {
        $('#target-table td').on('click', function() {
          if (! $(this).hasClass('editing')) {
            $(this).addClass('editing');
            $(this).html('<input type="text" value="' + $(this).text() +'" />');
            $(this).children().first().focus();
          }
        });
        
        $('#target-table td').on('blur', 'input[type="text"]', function() {
          $(this).parent().removeClass('editing');
          $(this).parent().text($(this).val());
        });
        
      });
    </script>

    <table id="target-table" border="1">
      <tr><td>0-0</td><td>1-0</td><td>2-0</td></tr>
      <tr><td>0-1</td><td>1-1</td><td>2-1</td></tr>
      <tr><td>0-2</td><td>1-2</td><td>2-2</td></tr>
      <tr><td>0-3</td><td>1-3</td><td>2-3</td></tr>
      <tr><td>0-4</td><td>1-4</td><td>2-4</td></tr>
    </table>

  </body>
</html>

jQuery 3.1.1