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

MyMemoWiki

MEMO

提供: MyMemoWiki
ナビゲーションに移動 検索に移動 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <link href="../css/style.css" type="text/css" rel="stylesheet">
  6. <style type="text/css">
  7. </style>
  8. <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
  9. <script type="text/javascript" src="../js/jquery.chromatable.js"></script>
  10. <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
  11. <script type="text/javascript"><!-- 
  12.     $(document).ready(function() {
  13.     
  14.         $("#tbl1").chromatable({
  15.             width:  "300px",
  16.             height: "100px",
  17.             scrolling: "no"
  18.         });
  19.             
  20.         $("#addbtn").click(function() {
  21.             var item = Object();
  22.             item.name = $("#item_name").val();
  23.             
  24.             var row_id = "tr_" + item.name;
  25.             
  26.             $("#tbl1 tbody").append("<tr id='" + row_id + "'></tr>");
  27.             var tr = $("#" + row_id);
  28.             
  29.             var td_id = "td_" + item.name;
  30.             tr.append("<td id='" + td_id + "'>" + item.name + "</td>");
  31.             
  32.             var td_head = $("#" + td_id);
  33.             td_head.click(function(){alert(row_id);});
  34.             
  35.             tr.append("<td><input type='text' style='width:90px;'/></td>");
  36.             tr.append("<td><select></select></td>");
  37.         });
  38.     }); 
  39. //--></script>
  40. <title></title>
  41. </head>
  42. <body>
  43.  
  44. <div>
  45.     name:<input type="text" id="item_name"/><br/>
  46.     <input type="button" id="addbtn" value="add row"/>
  47. </div>
  48. <table id="tbl1" style="table-layout:fixed;width:300px;">
  49.     <col width="100px">
  50.     <col width="100px">
  51.     <col width="100px">
  52.     <thead>
  53.         <th>f1</th>
  54.         <th>f2</th>
  55.         <th>f3</th>
  56.     </thead>
  57.     <tbody>
  58.     </tbody>
  59. </table>
  60.  
  61.  
  62. </body>
  63. </html>
「https://www.typea.info/tips_/index.php?title=MEMO&oldid=6356」から取得

© 2006 矢木浩人