<!DOCTYPE html>
<html>
<head>
<title>表のサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="button">
<!--
<INPUT id="text1" type="text" value="jquery try" cols=40>
<textarea id="area1" cols=40 rows=10></textarea>
-->
<p>テーブル幅 テーブル高さ</p>
<div class="row">
<INPUT id="text1" type="text" value="100" cols=20>
<input type="radio" name="size-h" value="px" checked>px
<input type="radio" name="size-h" value="%">%
<INPUT id="text2" type="text" value="100" cols=20>
<input type="radio" name="size-w" value="px" checked>px
<input type="radio" name="size-w" value="%">%
</div>
<div class="row">
<p>テーブル行 テーブル列</p>
<INPUT id="text3" type="text" value="2" cols=20>
<INPUT id="text4" type="text" value="2" cols=20>
</div>
<div class="row">
<p>セル幅 セル高さ</p>
<INPUT id="text5" type="text" value="50" cols=20>
<input type="radio" name="c-size-h" value="px" checked>px
<input type="radio" name="c-size-h" value="%">%
<INPUT id="text6" type="text" value="50" cols=20>
<input type="radio" name="c-size-w" value="px" checked>px
<input type="radio" name="c-size-w" value="%">%
</div>
<div class="row">
<p>セル余白</p>
<INPUT id="text7" type="text" value="10" cols=20>
<input type="radio" name="c-margin" value="px" checked>px
<input type="radio" name="c-margin" value="%">%
<div class="row">
<p>画像</p>
<INPUT id="text8" type="text" value="画像" cols=20>
<input type="radio" name="p-switch" value="1" checked>有
<input type="radio" name="p-switch" value="0">無
</div>
<div class="row">
<p>テキスト</p>
<INPUT id="text9" type="text" value="テキスト" cols=20>
<input type="radio" name="t-switch" value="1" checked>有
<input type="radio" name="t-switch" value="0">無
</div>
<button id="button1" >OK</button>
</div>
<div id="elementID">
</div>
<script type="text/javascript">
$(function(){
<!--- button1 の click 時の処理 --->
$('#button1').click(function () {
var h = $('input[name="size-h"]:checked').val();
var w = $('input[name="size-w"]:checked').val();
var ch = $('input[name="c-size-h"]:checked').val();
var cw = $('input[name="c-size-w"]:checked').val();
var ch = $('input[name="c-margin"]:checked').val();
var cm = $('input[name="c-margin"]:checked').val();
var ps = $('input[name="p-switch"]:checked').val();
var ts = $('input[name="t-switch"]:checked').val();
var tbHt = $('#text1').val() + h;
var tbWd = $('#text2').val() + w;
var row = $('#text3').val();
var col = $('#text4').val();
var clHt = $('#text5').val() + ch;
var clWd = $('#text6').val() + cw;
var clMg = $('#text7').val() + cm;
$('#elementID').empty();
$('#elementID').append('<table id="table1"></table>');
$('#table1').css({'width':tbHt,'height':tbWd});
$('#table1').css('border','solid');
//.attr('id','xxxx'); id追加
for(var i = 0; i < row; i++){
$('#table1').append('<tr></tr>');
$('tr').last().attr('id','row'+i);
$('tr').last().css('border','solid');
for(var t = 0; t < col; t++){
$('#table1 tr').last().append('<td></td>');
$('td').last().attr('id','col'+t);
$('td').last().css({'width':clHt,'height':clWd});
$('td').last().css('border','solid');
$('td').last().css('padding',clMg);
}
}
});
});
</script>
</body>
</html>
More than 5 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme