js 实现 单/多选题选项自定义添加/删除
用到的主知识点：
HTML DOM Table 对象的insertRow()方法和deleteRow()方法
单/多选题选项 A/B/C/D 是用 ol 实现的
演示地址：
http://www.vkill.net/demo/ol_add_and_del/ol_add_and_del.html
主代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单/多选题选项自定义添加/删除</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ol {
list-style-type: upper-alpha;
list-style-position: inside;
}
p {
clear: both;
}
#ol {
width: 30px;
float: left;
}
#ol li {
margin: 4px 0px 5px 0px;
}
#table {
width: 200px;
float: left;
}
</style>
</head>
<body>
<p>
<ol id="ol"></ol>
<table id="table"></table>
</p>
<a href="javascript: add()">增加</a>
<script type="text/javascript">
for (i=0; i<=4; i++) {
add(i);
}
function $(id) {
return document.getElementById(id);
}
function str_repeat(str,n) {
rstr = '';
for (i=0; i<n; i++) {
rstr+=str;
}
return rstr;
}
function add(n) {
if (!n) {
n = $('table').rows.length;
}
var r = $('table').insertRow($('table').rows.length)
r.id = 'row_'+n
var c0 = r.insertCell(0)
c0.innerHTML = '<input type="text" />';
var c1 = r.insertCell(1)
c1.innerHTML = '<a href="javascript: del(' + n + ')">删除</a>'
$('ol').innerHTML = str_repeat('<li></li>',$('table').rows.length)
}
function del(n) {
id = 'row_'+n;
$('table').deleteRow($(id).rowIndex)
$('ol').innerHTML = str_repeat('<li></li>',$('table').rows.length)
}
</script>
</body>
</html>
Last modified by vkill on2009/04/18 00:27
用到的主知识点：
HTML DOM Table 对象的insertRow()方法和deleteRow()方法
单/多选题选项 A/B/C/D 是用 ol 实现的
演示地址：
http://www.vkill.net/demo/ol_add_and_del/ol_add_and_del.html
主代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单/多选题选项自定义添加/删除</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ol {
list-style-type: upper-alpha;
list-style-position: inside;
}
p {
clear: both;
}
#ol {
width: 30px;
float: left;
}
#ol li {
margin: 4px 0px 5px 0px;
}
#table {
width: 200px;
float: left;
}
</style>
</head>
<body>
<p>
<ol id="ol"></ol>
<table id="table"></table>
</p>
<a href="javascript: add()">增加</a>
<script type="text/javascript">
for (i=0; i<=4; i++) {
add(i);
}
function $(id) {
return document.getElementById(id);
}
function str_repeat(str,n) {
rstr = '';
for (i=0; i<n; i++) {
rstr+=str;
}
return rstr;
}
function add(n) {
if (!n) {
n = $('table').rows.length;
}
var r = $('table').insertRow($('table').rows.length)
r.id = 'row_'+n
var c0 = r.insertCell(0)
c0.innerHTML = '<input type="text" />';
var c1 = r.insertCell(1)
c1.innerHTML = '<a href="javascript: del(' + n + ')">删除</a>'
$('ol').innerHTML = str_repeat('<li></li>',$('table').rows.length)
}
function del(n) {
id = 'row_'+n;
$('table').deleteRow($(id).rowIndex)
$('ol').innerHTML = str_repeat('<li></li>',$('table').rows.length)
}
</script>
</body>
</html>
Last modified by vkill on2009/04/18 00:27
网友评论(0)：
