- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
/* 2010-02-04
// chromatable 行追加 戦略 1 or 2
// 1. col サイズと、thead、tbody を事前に用意しておく => 初回のみ chromatable実施
// 2. table を DIV で囲っておいて、DIV 配下を毎回 empty() にて削除、table-thead-tbody を動的に生成し、chromatable実施
*/
table {
border: solid 1px #D5D5D5;
border-collapse: collapse;
width:100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../css/style.css" type="text/css" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.chromatable.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
$("#tbl1").chromatable({
width: "300px",
height: "100px",
scrolling: "no"
});
$("#addbtn").click(function() {
var item = Object();
item.name = $("#item_name").val();
var row_id = "tr_" + item.name;
$("#tbl1 tbody").append("<tr id='" + row_id + "'></tr>");
var tr = $("#" + row_id);
var td_id = "td_" + item.name;
tr.append("<td id='" + td_id + "'>" + item.name + "</td>");
var td_head = $("#" + td_id);
td_head.click(function(){alert(row_id);});
tr.append("<td><input type='text' style='width:90px;'/></td>");
tr.append("<td><select></select></td>");
});
});
//--></script>
<title></title>
</head>
<body>
table td {
border:1px solid #D5D5D5;
font-size:12px;
padding:2px 2px;
background-color:white;
}
<div>
name:<input type="text" id="item_name"/><br/>
<input type="button" id="addbtn" value="add row"/>
</div>
<table id="tbl1" style="table-layout:fixed;width:300px;">
<col width="100px">
<col width="100px">
<col width="100px">
<thead>
<th>f1</th>
<th>f2</th>
<th>f3</th>
</thead>
<tbody>
</tbody>
</table>
table th {
background-color:#EEE;
border-right:1px solid #D5D5D5;
font-size:13.5px;
/*line-height:120%;*/
font-weight:normal;
padding:2px 2px;
text-align:left;
}
.ui-resizable {
position:relative;
}
.ui-resizable-handle {
display:block;
font-size:0.1px;
position:absolute;
z-index:99999;
}
.ui-resizable-s {
background:#EEEEEE url(../images/grippie.png) no-repeat scroll center 2px;
border-top:1px solid #CCCCCC;
bottom:-5px;
cursor:s-resize;
height:14px;
left:0;width:100%;
}
body {
background-color : #F5F5F5;
color : black:;
font-size : small;
font-family : Courier New;
}
h1 {
text-align : left;
font-size : 140%;
color : black;
}
h2 {
text-align : left;
font-size : 120%;
font-weight : normal;
color : black;
padding-left : 1em;
border-bottom : silver 1px dotted;
}
h3 {
text-align : left;
font-size : 110%;
font-weight : normal;
color : black;
padding-left : 2em;
border-bottom : silver 1px dotted;
}
A:link {
color : midnightblue;
text-decoration : none;
}
A:visited {
color : midnightblue;
text-decoration : none;
}
A:hover {
color : #004284;
text-decoration : underline;
}
</body>
</html>
