[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
<html>
<head>
<title>お薬一覧</title>
<script language="javascript">
<!--
// クラス定義
var RowInfo = function(sortKey, rowObj) {
this.sortKey = sortKey;
this.rowObj = rowObj;
this.toString = function() {
window.alert(this.sortKey + " " + this.rowObj.innerText);
};
}
function sample(tableName){
this.table = document.getElementById(tableName);
this.tbody = this.table.getElementsByTagName('tbody')[0];
this.rows = this.tbody.getElementsByTagName('tr');
this.cells = this.tbody.getElementsByTagName('td');
this.thead = this.table.getElementsByTagName('thead')[0];
this.headers = this.thead.getElementsByTagName('th');
for(i=0; i<this.headers.length; i++){
alert(1);
alert(this.headers[i].innerText);
// this.headers[i].addEvent('click', function(i){alert(i)});
alert(2);
// this.headers[i].addEvent('mouseover',function(i){this.headers[i].addClass(this.options.overCl)}.pass(i,this));
// this.headers[i].addEvent('mouseout',function(i){this.headers[i].removeClass(this.options.overCl)}.pass(i,this));
// this.headers[i].setStyle('cursor','pointer');
}
alert(3);
// ヘッダーにonClickを埋め込む
// for(i=0; i<this.headers.length; i++){
// var header = this.headers[i];
// alert(header.innerText);
// var onClickAttr = document.createAttribute("onclick");
// onClickAttr.nodeValue ="alert()";
// header.setAttributeNode(onClickAttr);
// alert(77777);
// }
// オブジェクトの配列
var rowObjList = new Array();
// 全行の情報をリストにつめる
for(i=0; i<this.rows.length; i++){
var row = this.rows[i];
// カラムの2つ目の値を取得する。
var cellValue = row.getElementsByTagName('td')[0];
rowObjList.push(new RowInfo(cellValue.innerText, row));
}
// ソート処理を実施
rowObjList.sort(compare);
for(i =0; i<rowObjList.length; i++){
var newRow = rowObjList[i].rowObj;
this.tbody.appendChild(newRow);
}
}
//数値を取得
function getNum(num){
if( num.match(/^(\-?((\d{1,3}(,\d\d\d)+)|\d+)(\.\d+)?)(.*)$/i) ){
nn = RegExp.$1;
nv = RegExp.$6;
if(nn == ''){
nn = '0';
}
return(new Array(nn,nv));
}else{
return(new Array('0',num));
}
}
function compare(a1, b1){
if(1){
a1 = Number(a1.sortKey);
b1 = Number(b1.sortKey);
}else{
a1 = String(a1.sortKey);
b1 = String(b1.sortKey);
}
if(0){
return a1 > b1 ? -1 : a1 < b1 ? 1 : 0;
}else{
return a1 < b1 ? -1 : a1 > b1 ? 1 : 0;
}
}
//-->
</script>
</head>
<body>
<input type="button" name="add" value="追加" onclick="sample('tableId')">
<table id="tableId" border="1">
<thead>
<tr>
<th>No</th><th>名前</th><th>単価</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td><td>りんご</td><td>500</td>
</tr>
<tr>
<td>5</td><td>みかん</td><td>250</td>
</tr>
<tr>
<td>3</td><td>ぶどう</td><td>750</td>
</tr>
<tr>
<td>10</td><td>とまと</td><td>150</td>
</tr>
<tr>
<td>a</td><td>白菜</td><td>800</td>
</tr>
</tbody>
</table>
</body>
</html>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<html>
<head>
<title>お薬一覧</title>
<style type="text/css">
<!--
#suggest div{
position: absolute;
background-color: #FFFFFF;
border: 1px solid #CCCCFF;
width: 252px;
}
#suggest div.div {
padding: 1px;
display: block;
width: 250px;
overflow: hidden;
white-space: nowrap;
}
#suggest div.div.select{
color: #FFFFFF;
background-color: #3366FF;
}
#suggest div.div.over{
background-color: #99CCFF;
}
#suggest div.strong{
font-weight: bold;
}
-->
</style>
<script type="text/javascript" src="./js/suggest.js"></script>
<script language="javascript"><!--
// テーブルのレコード数を保持
var rowCount = 0;
// Suggestを作成
<bean:define id="jsonMedicineList" name="registInventoryForm" property="jsonMedicineList"/>
var list = <%=jsonMedicineList%>;
function createRowObj(cellLists){
var table = document.getElementById("table");
var row = table.insertRow(-1);
for (var i=0; i<cellLists.length; i++) {
var cellName = cellLists[i];
var cell = row.insertCell(-1);
var text = document.createElement("input");
text.type = "text";
text.id = cellName+rowCount;
text.name = "medicineData["+rowCount+"]."+cellName;
cell.appendChild(text);
}
// Suggestを作成する
var row2 = table.insertRow(-1);
var cell3 = row2.insertCell(-1);
var div = document.createElement("div");
div.id = "suggest"+rowCount;
cell3.appendChild(div);
aaaa(rowCount);
rowCount++;
}
function addItem() {
var cellLists = new Array("name", "num");
createRowObj(cellLists);
// var table = document.getElementById("table");
// var row = table.insertRow(-1);
// var cell1 = row.insertCell(-1);
// 名前カラムのテキストボックスを追加する
// var text1 = document.createElement("input");
// text1.type = "text";
// text1.name = "medicineData["+rowCount+"].name";
// cell1.appendChild(text1);
// var cell2 = row.insertCell(-1);
// 単価カラムのテキストボックスを追加する
// var text2 = document.createElement("input");
// text2.type = "text";
// text2.name = "medicineData["+rowCount+"].num";
// cell2.appendChild(text2);
// Suggestを作成する
// var row2 = table.insertRow(-1);
// var cell3 = row2.insertCell(-1);
// var div = document.createElement("div");
// div.id = "suggest"+rowCount;
// cell3.appendChild(div);
//
// aaaa(rowCount);
// rowCount++;
}
function delItem() {
var table = document.getElementById("table");
table.deleteRow(-1);
}
function aaaa(num){
new Suggest.Local("name"+num, "suggest"+num, list, {ignoreCase: false, prefix: true, highlight: true});
}
function sss() {
// var rowCount = <%= request.getAttribute("count")%>;
// 空行を作成する
addItem();
}
//-->
</script>
</head>
<body onload="sss()">
<html:form action="/medicine" >
<input type="button" name="add" value="追加" onclick="addItem()">
<input type="button" name="delete" value="削除" onclick="delItem()">
<div id="suggest">
<table id="table" border="1">
<tr>
<th>名前</th>
<th>単価</th>
</tr>
</table>
</div>
<input type="submit" name="send" value="送信">
</html:form>
</body>
</html>
document.form.name.value
idでもnameでも、どっちでも指定できる。
でもnameの場合、同じnameを指定しているものが２つ以上ある場合、
document.form.name[1].value
上記のようにnameのうしろに、何番目のnameを指定しているのか書く必要がある。
同じnameの指定がformの中に1つしかなければ、[1]の部分は書かなくても指定できる。
