| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

MEMO

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
<!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>