テーブル挿入行と削除行の例
4749 ワード
<html>
<head>
<title> </title>
<script type="text/javascript">
// [ Id, , , Id]
function clickInsert(inputTable,rowId,titleRow,inputForm){
var oForm=document.getElementById(inputForm);
var oTable=document.getElementById(inputTable);
var obj =window.event.srcElement;
var oTd = obj.parentElement;
var oTr = oTd.parentElement;
var oRow = oTr.rowIndex;
var oTr1 = oTable.insertRow(oRow+1);
var oCells = oTr.cells;
for(i=0;i<oCells.length;i++){
var cell = oCells[i].innerHTML;
var cell1 = oTr1.insertCell(i);
cell1.innerHTML=cell;
}
oForm.flag[oRow+1-titleRow].value="1";
//alert(oForm.flag[oRow+1-titleRow].value="1");
}
// [ Id, , Id]
function clickDelete(inputTable,titleRow,inputForm){
var oForm=document.getElementById(inputForm);
var oTable=document.getElementById(inputTable);
var obj =window.event.srcElement;
var oTd = obj.parentElement;
var oTr = oTd.parentElement;
var oRow = oTr.rowIndex;
oTr.style.display="none";
oForm.flag[oRow-titleRow].value="2";
// alert(oForm.flag[oRow-titleRow].value);
}
function submitForm(){
var flags= inputForm.flag;
for(i=0;i<flags.length;i++){
alert(flags[i].value);
}
}
</script>
</head>
<body>
<form action="" name="inputForm" id="inputForm">
<table id="inputTable" width="50%" align="center" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr style="display: none;">
<td>
<input type="hidden" name="flag" id="flag" value="-1" />
<select id="studentId">
<option value="01">
</option>
<option value="02">
</option>
</select>
</td>
<td>
<select id="courseId">
<option value="01">
</option>
<option value="02">
</option>
</select>
</td>
<td>
<input type="button" name="insertButton" value=" " />
</td>
<td>
<input type="button" name="deleteButton" value=" " />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="flag" id="flag" value="1" />
<select id="studentId">
<option value="01">
</option>
<option value="02">
</option>
</select>
</td>
<td>
<select id="courseId">
<option value="01">
</option>
<option value="02">
</option>
</select>
</td>
<td>
<input type="button" name="insertButton" value=" "
onclick="clickInsert('inputTable',1,1,'inputForm')" />
</td>
<td>
<input type="button" name="deleteButton" value=" "
onclick="clickDelete('inputTable',1,'inputForm')" />
</td>
</tr>
</table>
<br />
<center><input type="button" name="submitButton" value=" " onclick="submitForm()" /></center>
</form>
</body>
</html>