<!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>
<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>
</body>
</html>
YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto
Copyright© 矢木 浩人 All Rights Reserved.