<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
function remberMyCheckbox(id) {
alert(id);
}
function delRow() {
var checkList=document.getElementsByName("checkboxNm");
//mytable1.deleteRow(mytable1.rows.length - 1);
var checkedStr="";
for (var i=checkList.length-1;i>=0;i--) {
if(checkList[i].checked) {
if (checkedStr!="") {
checkedStr+=",";
}
checkedStr += checkList[i].id;
//Delete myTable's Row
myTable.deleteRow(checkList[i].id);
}
}
$("#text1").attr("value",checkedStr);
}
function insRow() {
var allRows = document.getElementById('myTable').rows.length;
//var x = document.getElementById('myTable').insertRow(0);
var x = document.getElementById('myTable').insertRow(allRows);
var w = x.insertCell(0);
var y = x.insertCell(1);
var z = x.insertCell(2);
w.innerHTML = "<input type='checkbox' id='"+allRows+"' name='checkboxNm' />";
y.innerHTML = "NEW CELL1"+allRows;
z.innerHTML = "NEW CELL2";
}
</script>
</head>
<body>
<input type="button" value="OpenPOP" onclick="OpenPOP();" />
<input type="button" onclick="insRow()" value="addRow">
<input type="button" onclick="delRow()" value="delRow">
<h1>delete myRow</h1>
<table id="myTable" border="1">
<tr>
<td><input type="checkbox" id="0" name="checkboxNm"
onclick="remberMyCheckbox(this.id);" /></td>
<td>Row1 cell0</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td><input type="checkbox" id="1" name="checkboxNm" /></td>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td><input type="checkbox" id="2" name="checkboxNm" /></td>
<td>Row3 cell2</td>
<td>Row3 cell2</td>
</tr>
<tr>
<td><input type="checkbox" id="3" name="checkboxNm" /></td>
<td>Row4 cell3</td>
<td>Row4 cell4</td>
</tr>
</table>
<br />
<input type="text" id="text1" />
</body>
</html>
