Qiita:Teamにちょい足しJavaScript集 (コード・テーブル用)

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

<!-- JQuery読込 -->
<div name='(function(){s=document.createElement(&quot;script&quot;);s.src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;;document.body.appendChild(s);})();' class='javascript'/>

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

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

# コード (\`\`\` ～ \`\`\`)

<ins>前置き:コードについて</ins>

こんなMarkdownを書くと

<pre>
```txt:コードのタイトル
コードの本文
```
</pre>

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

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

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

```html:コードはこんな感じで出力されます。
<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>

```txt:テストコード
テストコード
・・・
・・・
・・・
```

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

```html:コードの直前に置く開閉
<a class="open"><i class="fa fa-folder-open"/> <font color=blue>[ソースコード開閉]</font></a>
```

```js:リンククリックで開閉処理。ページの適当な場所に記述
<!-- 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>
```

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

<!-- コード開閉 -->
<div name='(function(){$(document).ready(function(){$("a.open").on("click",function(){$(this).parent().next("div.code-frame").find("pre").slideToggle(200);});$(&#39;a.open&#39;).each(function(index,elm){$(elm).parent().next("div.code-frame").find("pre").slideToggle(0);});});})();' class='javascript' />

## コードスクロール

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

<div class="scroll"/>

```txt:テストコード
1.・・・
2.・・・
3.・・・
4.・・・
5.・・・
6.・・・
7.・・・
8.・・・
9.・・・
```

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

```html:コードの直前に置く
<div class="scroll"/>
```

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

```js:コードのスクロール。ページの適当な場所に記述
<!-- 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>
```

<a class="open"><i class="fa fa-folder-open"/> <font color=blue>[全てのコードをスクロールさせる場合のソース]</font></a>

```js:全コードのスクロール。ページの適当な場所に記述
<!-- 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>
```

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

<!-- コードスクロール -->
<div name='(function(){$(document).ready(function(){$(&#39;div.code-frame&#39;).each(function(index,elm){$(elm).find("pre").css({"overflow":"auto","max-height":"400px"});});$(&#39;div.scroll&#39;).each(function(index,elm){$(elm).next("div.code-frame").find("pre").css({"overflow":"auto","max-height":"100px"});});});})();' class='javascript' />

## コード全選択ボタン

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

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

```txt:テストコード
1.・・・
2.・・・
```

```html:コードの直前に置く
<input type="button" id=btnSelect />
```

```js:コード全選択ボタン。ページの適当な場所に記述
<!-- 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>
```

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

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

# テーブル

## テーブルフィルタ

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

<div id="jsOutSelect"/>

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

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

```html:テーブルの直前に置く
<div id="jsOutSelect"/>

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

```js:リスト選択で絞込み。ページの適当な場所に記述
<!-- 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に、行の各カラムの一致状態をビットフラグで保持してます。

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

<!-- テーブルフィルタ -->
<div name='(function(){$(document).ready(function(){function tdText(elmTr,idx){return $(elmTr).find(&#39;td&#39;).eq(idx).text();}$(jsOutSelect).next("table").find(&#39;tr:first th&#39;).each(function(idxTh,elmTh){var elmSelect=$(&#39;&lt;select class="tableSelect"&gt;&#39;);$(elmTh).append(&#39;&lt;BR&gt;&#39;).append(elmSelect);elmSelect.append($("&lt;option&gt;").val("all").text("全て"));$(elmTh).closest("table").find(&#39;tbody tr&#39;).each(function(idx,elmTr){var name=tdText(elmTr,idxTh);if(name&&elmSelect.find("[value=&#39;"+name+"&#39;]").length == 0){elmSelect.append($("&lt;option&gt;").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(&#39;tbody tr&#39;).each(function(idx,elmTr){if(sel.value=="all"||sel.value==tdText(elmTr,col)){elmTr.value|=(1&lt;&lt;col);}else{elmTr.value&=~(1&lt;&lt;col);}if(elmTr.value==~0){$(elmTr).show();}else{$(elmTr).hide();}});});});})();' class='javascript' />

## テーブルソート

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

<div id="jsOutSort"/>

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

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

```html:テーブルの直前に置く
<div id="jsOutSort"/>

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

```js:テーブルソート。ページの適当な場所に記述
<!-- 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>
```

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

<!-- テーブルソート -->
<div name='(function(){$(document).ready(function(){function tdText(elmTr,idx){return $(elmTr).find(&#39;td&#39;).eq(idx).text();}$(jsOutSort).next("table").find(&#39;tr:first th&#39;).each(function(){$(this).append(&#39;&lt;input type="button" value="▼" class="sortButton"&gt;&#39;);});$("input.sortButton").on("click", function() {var col=$(this).parent().index();var rows=$(this).closest("table").find(&#39;tbody tr&#39;);rows.sort(this.value=="▼"?function(a,b){return tdText(a,col) &lt; tdText(b,col)?1:-1;}:function(a,b){return tdText(a,col) &gt; tdText(b,col)?1:-1;});this.value=(this.value=="▼"?"▲":"▼");$(this).closest("table").children(&#39;tbody&#39;).html(rows);});});})();' class='javascript' />

## テーブル結合

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

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

```html:テーブルの空白セルを結合
|A|B|C||
|:--|:--|:--|:--|
|a||||
||b|||
|||c||
|a|b|c|ｄ|
```

```js:テーブル結合。ページの適当な場所に記述
<!-- 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>
```

<div id="jsMergeCell" />

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

<!-- テーブル結合 -->
<div name='(function(){$(document).ready(function(){$(jsMergeCell.parentNode).find("table").find(&#39;tr&#39;).each(function(){var celm, cols = 0;$(this).children().each(function(){if (celm && !this.innerHTML){celm.setAttribute(&#39;colspan&#39;,++cols);$(this).remove();} else {celm = this;cols = 1;}});});});})();' class='javascript' />