Markdownで書いたQiita:Teamの投稿に追加して使えそうなjQueryを使ったjavaScript集です。

※IE/Safari/Chromeで動作確認してます。IEだと毎回実行確認の警告が出ます。

コード (``` ～ ```)

前置き:コードについて

こんなMarkdownを書くと


```txt:コードのタイトル
コードの本文
```

こんな感じでコードが表示されます。

コードのタイトル

コードの本文

出力されるhtmlです。divのcode-frameをキーに色々できそうです。

コードはこんな感じで出力されます。

<div class="code-frame" data-lang="txt">
    <div class="code-lang">
        <span class="bold">コードのタイトル</span>
    </ div>
    <div class="highlight">
        <pre>
        コードの本文
        </pre>
    </ div>
</ div>

コード開閉

長いコードの開閉です。

[ソースコード開閉]

テストコード

テストコード
・・・
・・・
・・・

直後の```で囲ったコードを開閉させます。

コードの直前に置く開閉

<a class="open"><i class="fa fa-folder-open"/> <font color=blue>[ソースコード開閉]</font></a>

リンククリックで開閉処理。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  //クリックした時の開閉処理
  $("a.open").on("click",function(){$(this).parent().next("div.code-frame").find("pre").slideToggle(200);});

  //最初に閉じて置く場合
  $('a.open').each(function(index,elm){$(elm).parent().next("div.code-frame").find("pre").slideToggle(0);});
});
//]]>
</script>

コードスクロール

長いソースコードをスクロールさせます。

テストコード

1.・・・
2.・・・
3.・・・
4.・・・
5.・・・
6.・・・
7.・・・
8.・・・
9.・・・

直後の```で囲ったコードをスクロールさせます。

コードの直前に置く

<div class="scroll"/>

最大の高さを変更します("max-height":"100px"の部分)。

コードのスクロール。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('div.scroll').each(function(index,elm){
    $(elm).next("div.code-frame").find("pre").css({"overflow":"auto","max-height":"100px"});
  });
});
//]]>
</script>

[全てのコードをスクロールさせる場合のソース]

全コードのスクロール。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('div.code-frame').each(function(index,elm){
    $(elm).find("pre").css({"overflow":"auto","max-height":"400px"});
  });
});
//]]>
</script>

コード全選択ボタン

コードをボタン押下で全選択します。

テストコード

1.・・・
2.・・・

コードの直前に置く

<input type="button" id=btnSelect />

コード全選択ボタン。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
btnSelect.value="全選択";
btnSelect.onclick=function(){
  var selection=window.getSelection();
  selection.removeAllRanges();
  var range=document.createRange();
  range.selectNodeContents($('input#btnSelect').parent().next("div.code-frame").find("pre")[0]);
  window.getSelection().addRange(range);
};
//]]>
</script>

テーブル

テーブルフィルタ

リストボックスでテーブルのフィルタ機能です。

OS	機種
iOS	iPhone5S
iOS	iPhone6
Android	Xperia A

直後のテーブルにフィルタを追加します。

テーブルの直前に置く

<div id="jsOutSelect"/>

|OS|機種|
|:--|:--|
|iOS|iPhone5S|
|iOS|iPhone6|
|Android|Xperia A|

リスト選択で絞込み。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  //tdタグのテキスト取得
  function tdText(elmTr,idx){return $(elmTr).find('td').eq(idx).text();}

  //リストボックス作成
  $(jsOutSelect).next("table").find('tr:first th').each(function(idxTh,elmTh){
    var elmSelect=$('<select class="tableSelect">');
    $(elmTh).append('<BR>').append(elmSelect);

    //リスト要素作成
    elmSelect.append($("<option>").val("all").text("全て"));
    $(elmTh).closest("table").find('tbody tr').each(function(idx,elmTr){
      var name=tdText(elmTr,idxTh);
      if(name&&elmSelect.find("[value='"+name+"']").length == 0){
        elmSelect.append($("<option>").val(name).text(name.slice(0,25)));
      }
      elmTr.value=~0;
    });
  });

  //リストを変更した時の絞り込み処理
  $("select.tableSelect").on("change", function() {
      var sel=this,col=$(this).parent().index();
      $(this).closest("table").find('tbody tr').each(function(idx,elmTr){
        if(sel.value=="all"||sel.value==tdText(elmTr,col))
          {elmTr.value|=(1<<col);}else{elmTr.value&=~(1<<col);}
        if(elmTr.value==~0){$(elmTr).show();}else{$(elmTr).hide();}
      });
  });

});
//]]>
</script>

リストボックスの表示最大文字数は、.text(name.slice(0,25))の部分。

trタグのvalueに、行の各カラムの一致状態をビットフラグで保持してます。

テーブルソート

テーブルのソート機能です。矢印ボタンで文字ソートします。

機種	Version
iPhone4S	9.0
iPhone5	8.3
iPhone6	8.0.1

直後のテーブルにソートボタンを追加します。

テーブルの直前に置く

<div id="jsOutSort"/>

|機種|Version|
|:--|:--|
|iPhone4S|9.0|
|iPhone5|8.3|
|iPhone6|8.0.1|

テーブルソート。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  //tdタグのテキスト取得
  function tdText(elmTr,idx){return $(elmTr).find('td').eq(idx).text();}

  //ソートボタン作成
  $(jsOutSort).next("table").find('tr:first th').each(function(){
    $(this).append('<input type="button" value="▼" class="sortButton">');
  });

  //クリックイベント設定
  $("input.sortButton").on("click", function() {
    var col=$(this).parent().index();
    var rows=$(this).closest("table").find('tbody tr');

    rows.sort(this.value=="▼"
      ?function(a,b){return tdText(a,col) < tdText(b,col)?1:-1;}
      :function(a,b){return tdText(a,col) > tdText(b,col)?1:-1;});
    this.value=(this.value=="▼"?"▲":"▼");
    $(this).closest("table").children('tbody').html(rows);
  });

});
//]]>
</script>

テーブル結合

テーブルの結合機能です。空白のセルを横方向に結合します。

A	B	C
a
	b
		c
a	b	c	ｄ

テーブルの空白セルを結合

|A|B|C||
|:--|:--|:--|:--|
|a||||
||b|||
|||c||
|a|b|c|ｄ|

テーブル結合。ページの適当な場所に記述

<!-- jQuery読込 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript" id="jsMergeCell">
//<![CDATA[
$(document).ready(function(){
  $(jsMergeCell.parentNode).find("table").find('tr').each(function(){
    var celm,cols=0;
    $(this).children().each(function(){
      if (celm && !this.innerHTML){
        celm.setAttribute('colspan',++cols);
        $(this).remove();
      } else {
        celm = this;
        cols = 1;
      }
    });
  });
});
//]]>
</script>