1、DOM 示例，新闻字体
让一个超链接点击之后什么都不跳转：<a href = "javascript:void (0)">，但是可以引入监听点击事件，这样点击超链接之后，就会有特定的自定义效果，而不是发生跳转。
类选择器没有Id选择器优先级高。
2、新闻字体的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
/*超链接访问前，访问后样式一致*/
a:link,a:visited{
color:#0044ff;
text-decoration:none;
}
a:hover{
color:#ff8800;
}
#newstext{
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定义一些样式封装到选择器。一般使用类选择器。*/
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ffffff;
font-size:12px;
background-color:#f1b96d;
}
</style>
</head>
<body>
<!--
需求：新闻字体的大中小样式改变。
思路：
1，先有新闻数据，并用标签封装。
2，定义一些页面样式。静态的样式和预定义的样式(用于动态效果，方便于事件处理时的样式加载。)
3，确定事件源和事件，以及处理方式中被处理的节点。
事件源：a标签，事件：onclick。
被处理的节点 div-newstext
既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
可以使用给href设置：javascript:void(0)来完成。
4，用js处理页面的行为。
-->
<script type="text/javascript">
//定义改变 字体的方法。
function changeFont2(size,clr){
/*
* 既然要对div newstext中的文本字体进行操作。
* 必须要先获取div节点对象。
*
*/
var oNewsText = document.getElementById("newstext");
//获取oNewText节点的style样式属性对象。
oNewsText.style.fontSize = size;
oNewsText.style.color = clr;
}
/*
* 如果根据用户点击所需要的效果不唯一。
* 仅通过传递多个参数虽然可以实现效果，
* 但是
* 1，传参过多，阅读性差，
* 2，js代码和css代码耦合性高。
* 3，不利于扩展。
*
* 解决：
* 将多个所需的样式进行封装。
* 封装到选择器中，只要给指定的标签加载不同的而选择器就可以了。
*/
function changeFont(selectorName){
var oNewsText = document.getElementById("newstext");
oNewsText.className = selectorName;
}
</script>
<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" οnclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" οnclick="changeFont('norm')">中字体</a>
<a href="javascript:void(0)" οnclick="changeFont('min')">小字体</a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
</body>
</html>
3、DOM示例之展开闭合列表。
使用<dt><dd>标签可以实现列表的形式，<dt>是标题，<dd>是下面具体的内容，因为<dd>带缩进。
<dl>表示列表的范围，<dt>表示列表的大标题，<dd>表示大标题下的小标题。列表一行的高度就是16px,所以这里设置为16px，只显示最上面一行，将overflow设为visible后，就可以显示出被隐藏的内容，也就相当于展开了隐藏的内容。预定义的样式，类选择器都是放在css中的。
之前不同的列表带着不同的标号，以便产生对应的效果。但是有时列表顺序一旦变化，就可能导致产生错误，因此最好的方法是点击时，把被点击的当前对象传回去，进行事件的处理。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:16px;
}
/*
预定义一些样式，类选择器，便于给标签进行样式的动态加载。
*/
.open{
overflow:visible;;
}
.close{
overflow:hidden;
}
dl dt{
color:#ff8000;
}
</style>
</head>
<body>
<!--
思路：
1,标签封装数据，html
2,定义样式 css
3,明确事件源，事件，以及要处理节点，dom。
4,明确具体的操作方式，其实就是事件的处理内容。 js。
-->
<script type="text/javascript">
var flag = true;
//列表展开闭合效果。
function list2(){
/*
* 思路：
* 1,无非就是将dl属性的overflow的值改成visible即可。
* 2,要先获取dl节点。
* 3,改变该节点的style.overflow的属性。
*/
//1，获取dl节点。
var oDlNode = document.getElementsByTagName("dl")[0];
//2,修改style样式属性中的overflow属性值。
// oDlNode.style.overflow = "visible";
if(flag){
oDlNode.style.overflow = "visible";
flag = false;
}else{
oDlNode.style.overflow = "hidden";
flag = true;
}
}
//重新定义list。降低js和css的耦合性。
function list3(node){
// alert(node.nodeName);//dt
//1，获取dl节点。
// var oDlNode = document.getElementsByTagName("dl")[0];
var oDlNode = node.parentNode;
// alert(oDlNode.nodeName);
//2，设置dl的className属性值。
// oDlNode.className = "open";
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}
/*
* 在多个列表下，一次只需要展开一个列表其他列表都关闭。
* 怎么保证开一个，而关其他呢？
* 思路：
* 1，获取所有的dl节点。
* 2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作。
*/
function list(node){
//获取对当前的dl节点。
var oDlNode = node.parentNode;
//获取所有的dl节点。
var collDlNodes = document.getElementsByTagName("dl");
//遍历所有dl。
for(var x=0; x<collDlNodes.length; x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}else{
collDlNodes[x].className = "close";
}
}
}
</script>
<dl class="close">
<dt οnclick="list(this)">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl class="close">
<dt οnclick="list(this)">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl class="close">
<dt οnclick="list(this)">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
下去可以多练习下这个，保证能实现点那个哪个打开和只有点的那个打开，其余的全保持关闭。
padding 就是内容与边框的距离；margin 就是边框与其他元素的距离。
<li>表示列表项。<ul>表示无序排列，<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表，而在<ol> </ol>中写入<li>构成的是一个有序列表
<dl> 定义列表。ul: unordered lists
ol: ordered lists
li: Listsol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入 ol ul li和p
<dt> 定义列表中的项目。
<dd>定义列表中项目的描述。
格式如下：
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<ul>与<ol>作用相同，但是结果不一样。
<ol> 是用来标签定义有序列表。举例如下：
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
简单的说就是<dl><dd>
<ul> 是用来标签定义无序列表。举例如下：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
跨浏览器平台的通用好友菜单程序如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
/*
对表格中的ul进行样式定义，
1，去除无序列表的样式。
2，将列表的外边距取消。
*/
table ul{
list-style:none;
margin:0px;
background-color:#26e356;
display:none;
/*border:#ff0000 1px solid;*/
padding:0px;
}
/*
* 对表格框线进行定义。
* 以及单元格的框线进行定义。
*/
table{
border:#8080ff 1px solid;
width:80px;
}
table td{
border:#8080ff 1px solid;
background-color:#f3c98f;
padding:0px;
}
/*
* 单元格中的超链接样式。
*/
table td a:link,table td a:visited{
color:#1f6df1;
text-decoration:none;
}
table td a:hover{
color:#df4011;
}
/*预定一些样式*/
.open{
display:block;
}
.close{
display:none;
}
</style>
</head>
<body>
<!--
完成一个好友菜单.
展开闭合效果。
而且要求一次开一个而关其他。
-->
<script type="text/javascript">
function list(node){
//获取被操作的节点ul。
/*
* 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。
*/
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//获取表格中所有的ul。
//先获取表格节点对象。
var oTabNode = document.getElementById("goodlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");
for(var x=0; x<collUlNodes.length; x++){
if(collUlNodes[x]==oUlNode){
if(oUlNode.className == "open"){
oUlNode.className = "close";
}else{
oUlNode.className = "open";
}
}else{
collUlNodes[x].className = "close";
}
}
// alert(oUlNode.nodeName);//oUlNode.className
}
</script>
<table id="goodlist">
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
显示效果如下：
css中padding和margin的区别
|
margin 外边距 border 边框 padding 内边距 也就是说 设置margin 那么他所占据的空白地方会是在边框外面 设置padding 他所占据的空白地方是在边框里面，图解一下就更清楚了。
如上图,A,B两个方框,A代码padding,B代表margin,现在我们看A箭头与蓝色边框的距离,这就是padding叫做内边距,下面再来看看B外面的箭头与B之前的距离就是我们所说的margin的,叫做外间距,哈哈你现在应该明白了,什么是padding,什么是margin吧？呵呵 事例二： 看看css盒模型，下图！margin是 DIV与周边元素的距离padding是 DIV里边内容与这个DIV的距离 |
css单独文件要导入到html文件中的语句和js文件导入html文件的语句不同。
css导入语句:<style type="text/css">@import url(table.css)</style>或者写成<link ref="stylesheet" type ="text/css" href = "table.css " />
js导入语句：<script type = "text/javascript" src = "table.js"><script>
另外css中颜色样式等的设定语句为：
8、<input type = “text" name = "rownum">，创建一个文本框，这个标签还有一个隐含的属性就是value,就是文本框里面输入的值，由于标签里没有写value这一项，也就是说游览器里生成的就是一个空白框，如果标签里面有value=hah,那么浏览器解析之后就会有一个文本框里显示hah，如果再重新往里面写东西，value属性值就会变成输入的内容。
10、创建表格的行和列
创建表格时可以给表格创建一个id
设置方法有2种，效果是一样的。一个是直接调用id属性赋值，另一种是调用setAttribute("id","tabid")的方法
11、创建表格，删除行或者列的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="table.css" />
<style type="text/css">
/*@import url("table.css"); @错误提示？？*/
</style>
</head>
<body>
<!--
在页面中创建一个5行6列的表格。
1，事件源，比如按钮。
2，必须有一个生成的表格节点存储位置。
-->
<script type="text/javascript">
function crtTable2(){
/*
* 思路：
* 可以通过之前学过的createElement创建元素的形式来完成。
*/
//1,创建表格节点。
var oTabNode = document.createElement("table");
//2,创建tBody节点。
var oTbdNode = document.createElement("tbody");
//3，创建行节点tr。
var oTrNode = document.createElement("tr");
//4，创建单元格节点 td
var oTdNode = document.createElement("td");
oTdNode.innerHTML = "这是单元格";
//让这些节点有关系。进行指定层次的节点添加。
oTrNode.appendChild(oTdNode);
oTbdNode.appendChild(oTrNode);
oTabNode.appendChild(oTbdNode);
document.getElementsByTagName('div')[0].appendChild(oTabNode);
}
/*
* 上面的方法很麻烦。
* 既然操作的是表格，
* 那么最方便的方式就是使用表格节点对象的方法来完成。
*
* 表格是由行组成。表格节点对象中 insertRow方法就完成了创建行并添加的动作。
*
* 行是由单元格组成。通过tr节点对象的insertCell来完成。
*/
function crtTable(){
var oTabNode = document.createElement("table");
// oTabNode.id = "tabid";
oTabNode.setAttribute("id","tabid");
var rowVal = document.getElementsByName("rownum")[0].value;
var colVal = document.getElementsByName("colnum")[0].value;
for (var x = 1; x <= rowVal; x++) {
var oTrNode = oTabNode.insertRow();
for (var y = 1; y <= colVal; y++) {
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"--"+y;
}
}
//将表格节点添加到div中。
document.getElementsByTagName('div')[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled = true;
}
//删除行。
function delRow(){
//获取表格对象。
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在！");
return;
}
//获取要删除的表格行数。
var rowVal = document.getElementsByName("delrow")[0].value;
if(rowVal>=1 && rowVal<=oTabNode.rows.length)
oTabNode.deleteRow(rowVal-1);
else
alert("要删除的行不存在！");
}
//删除列，其实就是在删除每一行中同一位置的单元格。
function delCol(){
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在！");
return;
}
var colVal = document.getElementsByName("delcol")[0].value;
if (colVal >= 1 && colVal <= oTabNode.rows[0].cells.length) {
for (var x = 0; x < oTabNode.rows.length; x++) {
oTabNode.rows[x].deleteCell(colVal - 1);
}
}else{
alert("要删除的列不存在！");
}
}
</script>
行：<input type="text" name="rownum" />列：<input type="text" name="colnum" />
<input type="button" value='创建表格' name="crtBut" οnclick="crtTable()"/>
<hr/>
<input type="text" name="delrow" /><input type="button" value="删除行" οnclick="delRow()"/><br/>
<input type="text" name="delcol" /><input type="button" value="删除列" οnclick="delCol()"/>
<hr/>
<div></div>
</body>
</html>
为了避免重复创建多个表格：可以用disable设置下按钮，创建按钮变成一次性的，按完之后就不能再点了。（除非你刷新下页面，又可以重新创建表格了）。也可以通过在标签里添加flag标志的方法，来判断是否执行创建表格的代码，只要执行过后创建，就将标志位flag置为0，不在允许被执行创建表格的代码。<img src="https://img-blog.csdn.net/20141023170113781?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVha2FpYmE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
12、表格排序的程序如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>
<script type="text/javascript">
var flag = true;
function sortTable(){
/*
* 思路：
* 1，排序就需要数组。获取需要参与排序的行对象数组。
* 2，对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。
* 3，将排好序的数组重新添加回表格。
*/
var oTabNode = document.getElementById("info");
var collTrNodes = oTabNode.rows;
//定义一个临时容器，存储需要排序行对象。
var trArr = [];
//遍历原行集合，并将需要排序的行对象存储到临时容器中。
for(var x=1; x<collTrNodes.length; x++){
trArr[x-1] = collTrNodes[x];
}
//对临时容器排个序。
mySort(trArr);
//将排完序的行对象添加会表格。
if (flag) {
for (var x = 0; x < trArr.length; x++) {
//oTabNode.childNodes[0].appendChild(trArr[x]);
// alert(trArr[x].cells[0].innerHTML);
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = false;
}else{
for (var x = trArr.length-1; x >=0; x--) {
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = true;
}
// alert("over");
}
function mySort(arr){
for(var x=0; x<arr.length-1; x++){
for(var y=x+1; y<arr.length; y++){
//按照年龄数值排序，并转成整数。
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
// arr[x].swapNode(arr[y]);
}
}
}
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>6</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
注意这里在比较时应该比较的是年龄的大小，而.innerHTML直接得到的是字符串形式的年龄，所以要先用parseInt将其转换为数值再比较。<pre name="code" class="html">if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML))要实现表格排序，本质是把表格里每一行的内容都先取出来放在数组里，在数组里排完序之后再添加回表格中，新加入的都在最后一行。
在数组里排完序重新添加回表格的过程如下：
//将排完序的行对象添加会表格。
if (flag) {
for (var x = 0; x < trArr.length; x++) {
//oTabNode.childNodes[0].appendChild(trArr[x]);
// alert(trArr[x].cells[0].innerHTML);
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = false;
}else{
for (var x = trArr.length-1; x >=0; x--) {
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = true;
}
// alert("over");
}
13、checkbox就是复选框，打钩表示选中的意思。
<br/>是换行标签的意思。
checkbox有个属性是checked是boolean类型的。
商品复选框全选的程序如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function getSum(){
/*
* 获取所有的名称为item的复选框。
* 判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
if(collItemNodes[x].checked){
sum += parseInt(collItemNodes[x].value);
}
}
var sSum = sum+"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
}
//全选。
function checkAll(node){
/*
* 将全选的box的checked状态赋值给所有的itembox的checked。
*/
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
collItemNodes[x].checked = node.checked;
}
}
</script>
<input type="checkbox" name="allitem" οnclick="checkAll(this)" />全选<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="allitem" οnclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额是" οnclick="getSum()"/><span id="sumid"></span>
</body>
</html>
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
