<html>
<head>
<title>JavaScriptで動態Tableを生成</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8;">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
#DIVSCROLL{position:relative;height:542px;width:1157;overflow:auto;overflow-x:hidden;}
table{border-collapse:collapse;}
td{font-size:12px;}
.t_td{border:solid #999999 1px; background-color:#DCDCDC;}
-->
</style>
<script type="text/javascript">
var iC=1;
function getOption(){
return "<option value='' selected>選択...</option><option value='1'>1</option><option value='2'>2</option>";
}
//追加ボタン
function BtnAddList(){
trNode=document.createElement("tr");
td01Node=document.createElement("td");
td02Node=document.createElement("td");
td03Node=document.createElement("td");
td04Node=document.createElement("td");
td05Node=document.createElement("td");
td06Node=document.createElement("td");
td01Node.style.border="solid #999999 1px";
td02Node.style.border="solid #999999 1px";
td03Node.style.border="solid #999999 1px";
td04Node.style.border="solid #999999 1px";
td05Node.style.border="solid #999999 1px";
td06Node.style.border="solid #999999 1px";
td06Node.style.textAlign="center";
td01Node.innerHTML="<select name='sel1"+iC+"' style='width:60px;'>"+getOption("")+"</select>";
td02Node.innerHTML="<input type='text' name='txt2"+iC+"' style='width:70px;ime-mode:disabled; maxlength='5' value=''>";
td03Node.innerHTML="<select name='sel3"+iC+"' style='width:90px;'>"+getOption("")+"</select>";
td04Node.innerHTML="<input type='text' name='txt4"+iC+"' style='width:75px;ime-mode:disabled;maxlength='5' value=''>";
td05Node.innerHTML="<input type='text' name='txt5"+iC+"' style='width:150px;maxlength='10' value=''>";
td06Node.innerHTML="<input type='checkbox' name='chk6"+iC+"' style='width:27px;' id='chk6"+iC+"'>";
trNode.appendChild(td01Node);
trNode.appendChild(td02Node);
trNode.appendChild(td03Node);
trNode.appendChild(td04Node);
trNode.appendChild(td05Node);
trNode.appendChild(td06Node);
var element=document.getElementById("tblList");
element.appendChild(trNode);
document.getElementById("sel1"+iC).focus();
iC++;
}
</script>
</head>
<body>
<input type="button" name="insertBtn" value="追加" onclick="BtnAddList();"><br><br>
<!--タイトル -->
<TABLE style="table-layout:fixed; border-collapse:collapse;" frame="box">
<THEAD>
<TR>
<TD class="t_td" style="width:62px;"> 確認</TD>
<TD class="t_td" style="width:73px;">履歴</TD>
<TD class="t_td" style="width:93px;">顧客ｺｰﾄﾞ</TD>
<TD class="t_td" style="width:78px;">検収日</TD>
<TD class="t_td" style="width:153px;">件名</TD>
<TD class="t_td" style="width:30px;" align="center">削除</TD>
</TR>
</THEAD>
</TABLE>
<!-- 本体 -->
<DIV id="DIVSCROLL"><TABLE frame="box" ><TBODY id="tblList"></TBODY></TABLE></DIV>
</body>
</html>
没有评论:
发表评论