| ページ一覧 | ブログ | 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/…」)
 
 
(同じ利用者による、間の1版が非表示)
1行目: 1行目:
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD [[HTML]] 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  <html>
+
  &lt;html&gt;
  <head>
+
  &lt;head&gt;
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  <link href="../css/style.css" type="text/css" rel="stylesheet">
+
  &lt;link href="../css/style.css" type="text/css" rel="stylesheet"&gt;
  <style type="text/css">
+
  &lt;style type="text/css"&gt;
  </style>
+
  &lt;/style&gt;
  <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
+
  &lt;script type="text/javascript" src="../js/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="../js/jquery.chromatable.js"></script>
+
  &lt;script type="text/javascript" src="../js/jquery.chromatable.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
+
  &lt;script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript"><!--  
+
  &lt;script type="text/javascript"&gt;&lt;!--  
 
     $(document).ready(function() {
 
     $(document).ready(function() {
 
      
 
      
24行目: 24行目:
 
             var row_id = "tr_" + item.name;
 
             var row_id = "tr_" + item.name;
 
              
 
              
             $("#tbl1 tbody").append("<tr id='" + row_id + "'></tr>");
+
             $("#tbl1 tbody").append("&lt;tr id='" + row_id + "'&gt;&lt;/tr&gt;");
 
             var tr = $("#" + row_id);
 
             var tr = $("#" + row_id);
 
              
 
              
 
             var td_id = "td_" + item.name;
 
             var td_id = "td_" + item.name;
             tr.append("<td id='" + td_id + "'>" + item.name + "</td>");
+
             tr.append("&lt;td id='" + td_id + "'&gt;" + item.name + "&lt;/td&gt;");
 
              
 
              
 
             var td_head = $("#" + td_id);
 
             var td_head = $("#" + td_id);
 
             td_head.click(function(){alert(row_id);});
 
             td_head.click(function(){alert(row_id);});
 
              
 
              
             tr.append("<td><input type='text' style='width:90px;'/></td>");
+
             tr.append("&lt;td&gt;&lt;input type='text' style='width:90px;'/&gt;&lt;/td&gt;");
             tr.append("<td><select></select></td>");
+
             tr.append("&lt;td&gt;&lt;select&gt;&lt;/select&gt;&lt;/td&gt;");
 
         });
 
         });
 
     });  
 
     });  
  //--></script>
+
  //--&gt;&lt;/script&gt;
  <title></title>
+
  &lt;title&gt;&lt;/title&gt;
  </head>
+
  &lt;/head&gt;
  <body>
+
  &lt;body&gt;
 
   
 
   
  <div>
+
  &lt;div&gt;
     name:<input type="text" id="item_name"/><br/>
+
     name:&lt;input type="text" id="item_name"/&gt;&lt;br/&gt;
     <input type="button" id="addbtn" value="add row"/>
+
     &lt;input type="button" id="addbtn" value="add row"/&gt;
  </div>
+
  &lt;/div&gt;
  <table id="tbl1" style="table-layout:fixed;width:300px;">
+
  &lt;table id="tbl1" style="table-layout:fixed;width:300px;"&gt;
     <col width="100px">
+
     &lt;col width="100px"&gt;
     <col width="100px">
+
     &lt;col width="100px"&gt;
     <col width="100px">
+
     &lt;col width="100px"&gt;
     <thead>
+
     &lt;thead&gt;
         <th>f1</th>
+
         &lt;th&gt;f1&lt;/th&gt;
         <th>f2</th>
+
         &lt;th&gt;f2&lt;/th&gt;
         <th>f3</th>
+
         &lt;th&gt;f3&lt;/th&gt;
     </thead>
+
     &lt;/thead&gt;
     <tbody>
+
     &lt;tbody&gt;
     </tbody>
+
     &lt;/tbody&gt;
  </table>
+
  &lt;/table&gt;
 
   
 
   
 
   
 
   
  </body>
+
  &lt;/body&gt;
  </html>
+
  &lt;/html&gt;

2020年2月16日 (日) 04:29時点における最新版

<!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>