jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック

このサンプルは、css 用ですが、script でも同じです。bootstrap を組み込むと、たいていなんらかの変化が出るので確認に使用してます。

特定の要素の下に追加、削除を想定しているので id を持つ要素だともっと簡単ですが、ここではそのページの最後の link 要素を使用しています > 『$("link").eq($("link").length-1)』

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

<script>

$(function(){

	// Bootstrap 削除
	$("#btn-remove").on("click", function(){

		if ( $("#bootstrap").length != 0 ) {
			$("#bootstrap").remove();
		}

	});

	// Bootstrap 適用
	$("#btn-apply").on("click", function(){

		if ( $("#bootstrap").length == 0 ) {

			var link = $("<link id='bootstrap'>");
			link.prop({
				"rel": "stylesheet",
				"href": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
			});

			// 最後の link の後に追加
			var target = $("link").eq($("link").length-1);
			link.insertAfter(target);
		}

	});

});
</script>

<div>
	<p>
		<input type="button" id="btn-remove" value="Bootstrap 削除">
		<input type="button" id="btn-apply" value="Bootstrap 適用">
	</p>
</div>

Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン

オンライン実行

ボタンクリックすると、テーマを差し替えてそれぞれのテーマでのボタン表示になります。

▼ こんな感じです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

$(function(){

	var css_type = [
		"base","ui-lightness","ui-darkness","smoothness","start","redmond",
		"sunny","overcast","le-frog","flick","pepper-grinder","eggplant",
		"dark-hive","cupertino","south-street","blitzer","humanity","hot-sneaks",
		"excite-bike","vader","dot-luv","mint-choc","black-tie","trontastic","swanky-purse"
	]
	var cnt = 0;
	// ボタン
	$("#button_control")
		.button()
		.text("base")
		.css({"padding": "10px", "width": "400px" })
		.click(function(){
			if ( cnt >= css_type.length-1 ) {
				cnt = -1;
			}
			cnt++;
			css_target = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/";
			css_target += css_type[cnt];
			css_target += "/jquery-ui.css";
			$("#link").prop("href", css_target );
			$(this).text(css_type[cnt]);
		});

});

</script>

<a id="button_control"></a>

jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する

タブやアコーディオンや、限られた視野の範囲で効率良く表示するコンテンツは、最後に表示したものを記憶しておくのが良いと思います。

• 潮時
• 確信犯
• おもむろに

物事を始めたり終えたりするのに、適当な時機

１ 本人が悪いことでないと確信してなされる犯罪

２ 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為

◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。

【徐に】落ち着いて、ゆっくりと行動するさま

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	var target_tab = 0;
	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
		target_tab = localStorage["old_active"];
	}
	$( "#mytabs" ).tabs({
		active: target_tab,
		activate: function( event, ui ) {
			localStorage["old_active"] = $( this ).tabs( "option", "active" );
		}
	});
});
</script>

<div id="mytabs">

	<ul>
		<li><a href="#tabs-1">潮時</a></li>
		<li><a href="#tabs-2">確信犯</a></li>
		<li><a href="#tabs-3">おもむろに</a></li>
	</ul>
	<div id="tabs-1">
物事を始めたり終えたりするのに、適当な時機
	</div>
	<div id="tabs-2">
<p>１ 本人が悪いことでないと確信してなされる犯罪</p>
<p>２ 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為</p>
<p>◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。</p>
	</div>
	<div id="tabs-3">
【徐に】落ち着いて、ゆっくりと行動するさま
	</div>
</div>

jQuery 部分は全て Google のホスティングを使用しています。

FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する

デモページ1( INPUT要素 type="file" )

デモページ2( ドラッグ & ドロップ )


type="file" でローカルのファイルを指定して、キャラクタセットを指定して読み込みます。ここでは、input 要素に multiple を指定していないのでファイルは一つしか指定できませんが、multiple を指定して追加の処理(cssファイルを読み込んでテーブルの見た目を調整する等)を行うのもいいでしょう。

※ 処理は、multiple を想定して files.length ぶんループしています
※ JavaScript のコレクション処理は、$.each を使う必要があります。

input に accept="text/*" を指定できますが、csv は対象では無かったので使用していません。画像を使う場合には絶対に使用する必要があるでしょう。

ソースコード( INPUT要素 type="file" )

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){
	$("#fire_reader").on("change", function(){

		// テーブルのクリア
		$("#tbl").html("");

		// multiple でなければループは一回だけ
		for( i = 0; i < this.files.length; i++ ) {

			// FileReader は毎回作成(同時に複数のファイルを扱えない)
			var reader = new FileReader();

			// FileReader にデータが読み込まれた時のイベント
			var rows = "";
			var cols = "";
			var tr = null;
			$(reader).on("load", function () {

				// \r を全て削除
				var data = this.result.replace(/\r/g,"");

				// \n で行を分ける
				rows = this.result.split("\n");
				$.each( rows, function( idx, value ){
					// 空行を無視
					if ( value == "" ) {
						return;
					}
					cols = value.split(",");
					// 行を作成
					tr = $("<tr></tr>").appendTo("#tbl");
					$.each( cols, function( idx, value ){
						// TD を追加して、テキストをセット

						switch( idx ) {
							case 7:
							case 8:
								// 数値項目はカンマ編集で右寄せ
								$("<td></td>").appendTo(tr)
									.text(value.number_format())
									.css({"text-align": "right" });
								break;

							default:
								$("<td></td>").appendTo(tr)
									.text(value);
						}

					} )
				} )
			});

			// 上記イベントを発動するための処理( this.files[i] は blob )
			if (this.files[i]) {
				// CSV は通常 shift_jis なので、指定します
				reader.readAsText(this.files[i],"shift_jis");
			}
		}
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});
</script>
</head>
<body>
	<div id="head">
		<input type="file" id="fire_reader" name="fire_reader">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>


</body>
</html>

ソースコード( ドラッグ & ドロップ )

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
	font-size:16px;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
#list {
	border-collapse: collapse;
}
#list td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
#file_drop {
	height:30px;
	padding:10px;
	text-align: center;
	margin-bottom:8px;
	border: solid #000000 1px;
}
</style>
</head>
<body>
<div id="file_drop">ここにドロップ</div>
<table id="list"></table>
<script>

$("#file_drop").on("dragenter", function(e){
	e.stopPropagation();
	e.preventDefault();

	$(this).css("background-color","#ddd");

	console.log("dragenter");
	
} );
$("#file_drop").on("dragover", function(e){
	e.stopPropagation();
	e.preventDefault();	

} );
$("#file_drop").on("dragleave", function(e){
	e.stopPropagation();
	e.preventDefault();	

	$(this).css("background-color","#fff");
} );
$("#file_drop").on("drop", function(e){
	e.stopPropagation();
	e.preventDefault();		

	$(this).css("background-color","#fff");

	var files = e.originalEvent.dataTransfer.files;
	for( i = 0; i < files.length; i++ ) {

		// FileReader は毎回作成(同時に複数のファイルを扱えない)
		var reader = new FileReader();

		// FileReader に画像が読み込まれた時のイベント
		var token1 = "";
		var token2 = "";
		var tr = null;
		$(reader).on("load", function () {
			token1 = this.result.split("\n");
			$.each( token1, function( idx, value ){
				// 空行を無視
				if ( value == "" ) {
					return;
				}
				token2 = value.split(",");
				// 行を作成
				tr = $("<tr></tr>").appendTo("#list");
				$.each( token2, function( idx, value ){
					// TD を追加して、テキストをセット
					$("<td></td>").appendTo(tr)
						.text(value);
				} )
			} )
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (files[i]) {
			reader.readAsText(files[i],"shift_jis");
		}
	}
	
} );

$(document).on('dragenter', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('dragover', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('drop', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});


</script>
</body>
</html>

関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

オンラインで実行

※ version: 1.1.2 - 2017/04/30 を使用して調整してます

画像を使用するので、文字列と共存する為に手動で調整が必要です。その為、実際に DIV 内にコンテンツを作成して調整終了後、display:none で非表示にします。そして、jQuery の .html() で HTML 定義を取得して、contents プロパティにセットします。

tipSize は、0 に設定しないと、吹き出し用の三角部分が表示されて動作がおかしくなる可能性があります。

その為プラグイン側の処理は単純になっており、殆どは CSS の定義に依存しています

▼ マウスオーバーでバルーンが表示されます
プラグインダウンロードページ












▼ コンテンツ用( 実際は display:none で非表示にしておく )

	

		
画像吹き出し内
の中央に文章を配置
しています
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/jquery.balloon112.js"></script>
<style type="text/css">
/* 画像用のコンテナです */
.balloonbox {
	/* 背景画像のみ指定しています */
	background: url(https://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	/* 画像サイズに合わせています */
	width: 323px;
	height: 278px;

	/* vertical-align を指定できるようにする為に必要 */
	display: table-cell;

	/* 内部文字列を縦方向に中央に表示する為 */
	vertical-align:middle;
}
/* 文字列部分のコンテナです  */
.ballooninbox {
	/* 幅を設定します。高さは文字列に依存します */
	width: 300px;

	/* border の太さを0にすると、点線が消えます */
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 24px;
}
/* 文字列部分の配置用クラスです  */
.balloonalign {
	/* 文字列を中央に */
	text-align: center;

	/* PRE 全体を DIV 内で中央にして、上下調整を 30px で行っています */
	margin: 30px auto 0;
}
</style>
<script type="text/javascript">
$(function() {
	$('#image_balloon').balloon(
		{
			html: true,
			contents: $("#balloon_contents").html(),
			position: "bottom",
			offsetX: 100,
			tipSize: 0,
			css: null
		}
	);
});
</script>
<pre>
▼ マウスオーバーでバルーンが表示されます
<a id="image_balloon" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">プラグインダウンロードページ</a>






















▼ コンテンツ用( 実際は display:none で非表示にしておく )
<div id="balloon_contents" style='border:solid 1px #c0c0c0;width:323px;'>
	<div class='balloonbox'>
		<pre class='ballooninbox balloonalign'>画像吹き出し内<br>の中央に文章を配置<br>しています</pre>
	</div>
</div>






</pre>

上下配置の為に 『display:table-cell』 と 『vertical-align:middle』を使用しているのですが、本来の contents エリアは内部的に position:absolute の為、display:table-cell が適用されないので、ラッパーをコンテンツ内に配置し、文章はさらにその中の PRE 要素で設定しています。

上下位置の微調整の為、.balloonalign 内の margin でさらに調整して画像の中央に文字列を配置しています。

関連する記事

CSSの 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方

CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

display:table-cell は、IE は IE8 以降で使用できます。そもそも、ブロック要素を簡単に横並びにできるので便利ですが、内部の要素を『vertical-align: middle』で上下で中央に配置する事もでき、とてもこのような表示にうってつけです。

さらに、内部で浮島のように浮いた状態のブロック要素を 『margin:30px auto 0』と設定しなおして画像のデザインに合わせて微調整しています。

また、浮島内のテキストの振る舞いは、『text-align』で決定します。

吹き出し内の中央に文章を配置しています

吹き出し内
の中央に文章を配置
しています

<style>
.box {
	background: url(https://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	border: solid 1px #000;
	display: table-cell;
	vertical-align: middle;
}
.inbox {
	width: 200px;
	border: dashed 1px #B8561D;
	margin: auto;
	font-weight: bold;
	font-size: 18px;
}

.center {
	text-align: center;
	margin: 30px auto 0;
}
</style>
<div class="box">
	<div class="inbox">
	吹き出し内の中央に文章を配置しています
	</div>
</div>
<div class="box">
<pre class="inbox center">吹き出し内
の中央に文章を配置
しています</pre>
</div>

以下は、その様子を左側の BOX について、順番に jQuery で実装していったものです。( 順次実行していくと、Firefox の挙動が少し変です / 最終的には同じですが・・・ )

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.inbox_base {
	width: 200px;
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 18px;
}
</style>

<script type="text/javascript">

$(function(){

	// ボタン1
	$("#add_attr1")
		.attr("type", "button")
		.val("エリア定義")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"background" : "url(https://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat",
					"width": "323px",
					"height": "278px",
					"border": "solid 1px #000"
				});
		});

	// ボタン2
	$("#add_attr2")
		.attr("type", "button")
		.val("table-cellで横並び")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"display" : "table-cell"
				});
		});

	// ボタン3
	$("#add_attr3")
		.attr("type", "button")
		.val("内部DIV追加")
		.click(function(){
			$("<div id='inbox_001'></div>").appendTo( $(".div_add_attr1") )
				.text("吹き出し内の中央に文章を配置しています")
				.addClass("inbox_base");
		});

	// ボタン4
	$("#add_attr4")
		.attr("type", "button")
		.val("内部DIVに margin:auto で左右均等")
		.click(function(){
			$("#inbox_001")
				.css({
					"margin" : "auto"
				});
		});

	// ボタン5
	$("#add_attr5")
		.attr("type", "button")
		.val("外側DIVに vertical-align: middle で上下均等")
		.click(function(){
			$(".div_add_attr1")
				.css({
					"vertical-align" : "middle"
				});
		});

	// ボタン6
	$("#add_attr6")
		.attr("type", "button")
		.val("内部DIV内のテキストを中央揃え")
		.click(function(){
			$("#inbox_001")
				.css({
					"text-align" : "center"
				});
		});
});

</script>
<input id="add_attr1">
<input id="add_attr2">
<input id="add_attr3">
<br>
<input id="add_attr4">
<input id="add_attr5">
<br>
<input id="add_attr6">
<div class="div_add_attr1"></div>
<div class="div_add_attr2"></div>