黑马毕向东Java课程笔记（35天day34-1——34-13）DOM（文档对象模型）+BOM（浏览器对象模型）：part2
1、DOM示例——新闻字体
新闻字体修改的示例如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档title><style type="text/css">/*超链接访问前，访问后样式一致。使用伪元素选择器，超链接点击前后样式一致.*/a：link,a:visited{color:#0044ff;text-decoration:none; }a:hover{color:#ff8800;}/*对新闻内容div进行定义*/#newstext{width:500px;border:#00ff00 1px solid;padding:10px;}/*预定义一些样式封装到选择器。一般使用类选择器。注意类选择器的优先级没有id选择器的优先级高，因此我们定义一些与id选择器不同的样式来区分开发中如果样式加载不出来，很有可能是样式优先级定义冲突。*/.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><script type="text/javascript">//定义改变 字体的方法。function changeFont2(size,color){//先获取div对象var oNewsText = document.getElementById(newstest);//通过div的style对象的color样式与fontSize样式修改字体大小与颜色oNewsText.style.color = color;oNewsText.style.fontSize = size;/*查询API文档——样式的时候，“样式标签属性”指的是CSS代码，而另一行“样式属性”是DOM节点对象能够调用的属性我们这里调用的时候应该使用DOM代码，而在设置style属性的时候应该使用CSS代码（35-34-1-24解析）另外，查询API——标签属性-属性的时候，左边“标签属性”是HTML代码，右边“属性”是DOM代码*/}/** 如果根据用户点击所需要的效果不唯一,仅通过传递多个参数虽然可以实现效果，但是* 1、传参过多，阅读性差；* 2、js代码和css代码耦合性高；* 3、不利于扩展。* * 解决：* 将多个所需的样式封装选择器中，只要给指定的标签加载不同的而选择器就可以了。*///我们现在外部定义多种字体的class选择器样式，然后设置选择的方法//并通过超链接来引用选择的方法，这样就可以在点击超链接的时候调用方法，、//传入不同的class名，在changeFont方法中修改class名，从而选择相应选择器修改新闻内容样式function changeFont(selectClassName){//先通过id获取div新闻区域的对象var oNewsText = document.getElementById("newstest");//修改div区域的class名，以达到改变选择器的效果，使用className属性： 设置或获取对象的类。//CLASS(HTML) className(DOM或者说是JS代码) 设置或获取对象的类。 oNewsText.className = selectClassName;}script><h1>这是一个新闻标题h1><hr/><a href="javascript:void(0)" onclick="changeFont('max')">大字体a><a href="javascript:void(0)" onclick="changeFont('norm')">中字体a><a href="javascript:void(0)" onclick="changeFont('min')">小字体a><div id="newstest" class="norm">这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容div>body>
html>
2、DOM示例——展开闭合列表
相应的代码如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档title><style type="text/css">dl dd{margin:0px;/*将dd行的缩进设置为0，既行前没有空格。这里设置的其实是外边距*/}dl{height:21px;/*将dl的高度设置为21px，那么在Chrome浏览器中，我们将overflow设置为hidden，那么我们下面的3个dl标签只能显示dt部分的文字，而由于dd部分的文字超过dl的高度，他们就被隐藏。这样我们也可以在dt上设置函数，控制列表的展开与闭合*//*overflow:hidden;当然可以在这里指定对多出高度的处理方式，不指定会默认显示*/}dl dt{color:#ff8000; }/*预定义一些样式，类选择器，便于给标签进行样式的动态加载。 */.open{overflow:visible;}.close{overflow:hidden;}style>head><body><script type="text/javascript">//列表展开闭合效果。//overflow 设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。(35-34-3-6.04，查阅CSS文档)//我们设置一个标签来判断是否隐藏——这个值必须设置在函数外，否则每次进入flag都会是truevar flag = true;function list(){/** 思路：* 1、无非就是将dl属性的overflow的值改成visible即可。* 2、要先获取dl节点。* 3、改变该节点的style.overflow的属性。*///1、获取dl节点，通过标签名获得——注意，这里获得的是数组，需要定义哪一个调用数组var oDlNode = document.getElementsByTagName("dl")[0];//2、修改style样式属性中的overflow属性值。——注意这里是js代码//oDlNode.style.overflow = "visible";//我们在点击dl的时候就会执行list函数，我们设置点击一下就可以显示或者隐藏列表 if(flag){//如果flag=true，我们设置visitedoDlNode.style.overflow = "visible";flag = false;//将flag设置为flag，下次再点击就会判断并隐藏}else{oDlNode.style.overflow = "hidden";flag = true;}}//重新定义list。降低js和css的耦合性。//将样式封装到dl的class选择器中，我们通过css设置dl的class名（只有dl才有class名）的样式function list2(node){//1，获取dl节点。//var oDlNode = document.getElementsByTagName("dl")[0];//不使用上面的方法获取dl，直接从dt中传入其节点，再获取dt的父节点//（为什么这样35-34-4-5.00）如果有多个dl，一个一个操作起来很麻烦，不如直接操作this//alert(node.nodeName)var oDlNode = node.parentNode;//通过设置dl的class值，就可以设置高出dl的部分是隐藏还是显示if(oDlNode.className == "close")//注意关系运算符判断是“==”，小细节要注意{oDlNode.className = "open"}else{oDlNode.className = "close"}}/** 在多个列表下，一次只需要展开一个列表其他列表都关闭。怎么保证开一个，而关其他呢？* 思路：* 1、获取所有的dl节点。* 2、遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作。*/function list3(node){//获取当前点击的列表的dl对象var oDlNode = node.parentNode;//获取所有的dl节点。var collDlNodes = document.getElementsByTagName("dl");for(var x=0; x<collDlNodes.length ;x++){//如果遍历到的dl节点是当前点击的节点，执行展开与闭合操作//如果遍历到的不是当前点击的节点，就保存闭合if(collDlNodes[x]==oDlNode){if(collDlNodes[x].className == "close"){collDlNodes[x].className = "open";}else{collDlNodes[x].className = "close";}}else{collDlNodes[x].className = "close";}}} script><dl class="close"><dt onclick="list3(this)">显示条目一dt><dd>展开列表内容1dd><dd>展开列表内容1dd><dd>展开列表内容1dd><dd>展开列表内容1dd>dl><dl class="close"><dt onclick="list3(this)">显示条目二dt><dd>展开列表内容2dd><dd>展开列表内容2dd><dd>展开列表内容2dd><dd>展开列表内容2dd>dl><dl class="close"><dt onclick="list3(this)">显示条目三dt><dd>展开列表内容3dd><dd>展开列表内容3dd><dd>展开列表内容3dd><dd>展开列表内容3dd>dl>body>
html>
3、DOM示例——好友菜单
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档title><style type="text/css">/*对表格中的ul进行样式定义，1、去除无序列表的样式。2、将列表的外边距取消。虽然table与ul之间有很多层表格，但是也可以直接关联（表示table中的ul）*/table ul{list-style:none;margin:0px;background-color:#26e356;border:#ff0000 3px solid;padding:0px;display:none;/*这里将ul的display属性设置为node，既不渲染，那么列表ul就不展开（注意我们需要展开闭合的是列表，因此要设置ul的display属性）*/}/** 对表格框线进行定义。* 以及单元格的框线进行定义。 */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;}/*预定一些样式display 设置或获取对象是否要渲染。 */.open{display:block;}.close{display:none;}style>head><body><script type="text/javascript">function list(node){//事件源：a，事件：οnclick="list"，要处理的节点：ul//获取被操作的节点ul：先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。var oTdNode = node.parentNode;//我们发现td想要获取它的子节点，只有getElementsByTagName 获取基于指定元素名称的对象集合。 //既它获得的子节点都是一组，以数组保存。我们此处只有一个，取数组第一个即可var oUlNode = oTdNode.getElementsByTagName("ul")[0];//获取表格中所有的ul。//先通过id获取表格节点对象。var oTabNode = document.getElementById("goodlist");var collUlNodes = oTabNode.getElementsByTagName("ul");//变量找到当前点击的超链接for(var x=0 ; x<collUlNodes.length ;x++){if(collUlNodes[x] == oUlNode){//这里同样通过class来设定ul的样式，原来的ul没有设定class，我们可以在这里为其指定if(collUlNodes[x].className == "open"){collUlNodes[x].className = "close";}else{collUlNodes[x].className = "open";}}else{collUlNodes[x].className = "close";}}}script><table id="goodlist"><tr><td><a href="javascript:void(0)" onclick="list(this)">好友菜单a><ul><li>一个好友li><li>一个好友li><li>一个好友li><li>一个好友li>ul>td>tr><tr><td><a href="javascript:void(0)" onclick="list(this)">好友菜单a><ul><li>一个好友li><li>一个好友li><li>一个好友li><li>一个好友li>ul>td>tr><tr><td><a href="javascript:void(0)" onclick="list(this)">好友菜单a><ul><li>一个好友li><li>一个好友li><li>一个好友li><li>一个好友li>ul>td>tr>table>body>
html>
4、DOM示例——创建表格
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档title><link rel="stylesheet" type="text/css" href="table.css"/><style type="text/css">/*@import url("table.css"); 在Chrome中才有效果，在IE中没有效果*/style>head><body> <script type="text/javascript">function crtTable(){/** 思路：可以通过之前学过的createElement创建元素的形式来完成。* 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");//通过innerHTML属性指定td的内容oTdNode.innerHTML = "这是单元格";//按从内到外的顺序逐个添加oTrNode.appendChild(oTdNode);oTbdNode.appendChild(oTrNode);oTabNode.appendChild(oTbdNode);//获取最外层的div节点的对象并添加其表格子对象document.getElementsByTagName("div")[0].appendChild(oTabNode);}/** 上面的方法很麻烦。* 既然操作的是表格， * 那么最方便的方式就是使用表格节点对象的方法来完成。* * 表格是由行组成。表格节点对象中 insertRow方法就完成了创建行并添加的动作。* 行是由单元格组成。通过tr节点对象的insertCell来完成。*/function crtTable2(){//先创建一个表格对象，并使用setAttribute方法设置其id值//setAttribute 设置指定标签属性的值。 var oTabNode = document.createElement("table");oTabNode.setAttribute("id","tabid");//接下来通过我们通过的text区域的name的值获得该text的input标签，而该text（input）的值就是要设置的行列数//获取的值是字符串，保守起见将其转换为数字类型var rowVal = parseInt(document.getElementsByName("rownum")[0].value);var colVal = parseInt(document.getElementsByName("colnum")[0].value);//接下来根据要设置的行列数来循环，外循环为table添加tr行，内循环为tr添加单元格td
//insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。
//insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。 for(var x=1; x<=rowVal ;x++)//!!!这里rowVal与colVal本身就是一个数，所以不需要再求length，直接使用{var oTrNode = oTabNode.insertRow();//为表格添加tr对象for(var y=1; y<=colVal ;y++){var oTdNode = oTrNode.insertCell();oTdNode.innerHTML = x+"--"+y;}}//将表格节点添加到div中。document.getElementsByTagName("div")[0].appendChild(oTabNode);//注意添加的时候需要在text里面先指定要添加的行列数目//disabled 设置或获取控件的状态。这个属性为true时，按钮点击一次失效//我们在这里通过按钮的name获取按钮对象，并将其disabled属性设置为truedocument.getElementsByName("crtBut")[0].disabled = true; }//删除行。function delRow(){//先获取通过id（之前创建的时候已经设置）表格对象var oTabNode = document.getElementById("tabid");//判断表格是否为空，为空警报并退出函数（不需要删除）if(oTabNode == null){alert("表格不存在");return;} //接下来通过name属性获取”删除文本区域“指定的要删除的行的位置var rowVal = document.getElementsByName("delrow")[0].value;//如果指定的删除行的位置大于等于1且小于等于table中原有的行数，我们使用//deleteRow 从表格及 rows 集合中删除指定行(tr)。 进行删除某一行//其中，rows是一个集合，通过length属性可以获得rows的对象数目//rows 获取来自于 table 对象的 tr (表格行)对象的集合。 if(rowVal>=1 && rowVal<=oTabNode.rows.length){oTabNode.deleteRow(rowVal-1);//注意该方法是删除某一行，下标记得减一，因为我们是想删除某一行，而这一行的下标必须是我们指定行数减一}else{alert("要删除的行不存在！");}}//删除列，其实就是在删除每一行中同一位置的单元格。function delCol(){//同样通过id获取表格节点对象var oTabNode = document.getElementById("tabid");//同样判断表格是否存在if(oTabNode == null){alert("表格不存在");return;}//接下来，通过“删除列文本区域”的name获取其value，获取指定的要删除列的位置var colVal = document.getElementsByName("delcol")[0].value//同样先判断要删除的列位置是否超出，由于每一行的列数都是一样的，我们通过第一行判断即可//cells 获取表格行或整个表格中所有单元格的集合。 if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length){//我们通过循环来删除每一行的相对位置的单元格来删除列for(var x=0; x<oTabNode.rows.length ;x++){oTabNode.rows[x].deleteCell(colVal-1);//删除某一行的指定表格，注意表格位置需-1}}else{alert("要删除的列不存在！");}}script>行：<input type="text" name="rownum"/>列：<input type="text" name="colnum"/><input type="button" value="创建表格" name="crtBut" onclick="crtTable2()"/><hr/><input type="text" name="delrow" /><input type="button" value="删除行" onclick="delRow()"/><br/><input type="text" name="delcol" /><input type="button" value="删除列" onclick="delCol()"/><div>div>body>
html>
5、DOM示例——行颜色间隔显示并高亮
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档title><link rel="stylesheet" type="text/css" href="table.css"/><style type="text/css">.one{background-color:#e1e16a; }.two{background-color:#75f094;}.over{background-color:#f9360d;}style><script type="text/javascript">var name;//设置一个全局变量，用于改变光标悬浮于行上与离开行时的样式function trColor(){/** 思路：* 1、因为要操作行的样式，所以要先获取表格对象。* 2、获取所有被操作的行对象。* 3、遍历行并给每一行指定样式。*/var oTabNode = document.getElementById("info");var collTrNodes = oTabNode.rows;//使用table的集合属性rows获取表格所有的行对象//遍历的时候从第二行遍历。——因为第一行是姓名年龄等不变化的内容for(var x=1; x<collTrNodes.length ;x++){//对奇数与偶数行进行不同的样式设计——这部分是对奇数偶数行样式不同的设计if(x%2 == 1)//奇数{collTrNodes[x].className = "one";}else{collTrNodes[x].className = "two";}//下面通过行的时间设计鼠标光标悬浮在行上时高亮，离开又恢复（时间用函数处理）//onmouseover 当用户将鼠标指针移动到对象内时触发。 //onmouseout 当用户将鼠标指针移出对象边界时触发。 collTrNodes[x].onmouseover = function(){name = this.className;//先将当前的类选择器保存起来this.className = "over";//将类选择器改为悬浮时的类选择器}collTrNodes[x].onmouseout = function(){this.className = name;//光标离开后将选择器恢复原状}//如果我们把事件放在HTML的tr标签中，再来调用js的函数来设计事件的样式，就会很繁琐（如视频示例）//此处我们通过tr的对象直接获取其事件在JS中进行操作，这样简洁明了}}//在页面加载完毕的时候实现trcolor()函数//在页面加载完成之后再调用trColor，这样才能识别到表格标签“info”，否则代码自上而下读取，找不到“info”onload = function(){trColor();}/*
为什么不能使用trColor();直接调用——因为我们执行到这里的时候，系统会去找id为info的表格
但是代码是自上而下执行的，这样子就会找不到id为info的table（它还没有加载到）。如果要直接调用必须在页面的最底部
如果是在页面加载完毕后，就可以找到相应的id
（35-34-11-17.00）！！！！这里很重要
*/script>head><body><table id="info"><tr><th>姓名th><th>年龄th><th>地址th>tr><tr><td>张三td><td>27td><td>上海td>tr><tr><td>小强td><td>26td><td>北京td>tr><tr><td>李四td><td>29td><td>广州td>tr><tr><td>孙八td><td>23td><td>南京td>tr><tr><td>二麻子td><td>19td><td>大连td>tr><tr><td>犀利姐td><td>32td><td>青岛td>tr><tr><td>旺财td><td>19td><td>深圳td>tr><tr><td>周七td><td>42td><td>铁岭td>tr><tr><td>毕姥爷td><td>18td><td>沈阳td>tr>table>body>
html>
6、DOM示例——表格排序
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档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>head><body><script type="text/javascript">var flag = true;function sortTable(){/** 思路：* 1、排序就需要数组。获取需要参与排序的行对象数组。* 2、对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。* 3、将排好序的数组重新添加回表格。注意这里是对行的对象进行排序，而不是对某一行的表格，这样除了年龄之外的其他部分也会跟着一起改变*/var oTabNode = document.getElementById("info");//获取表格节点对象var oTrNodes = oTabNode.rows;//获取表格中所有的行对象//定义一个临时容器，存储需要排序行对象。var trArr = [];//遍历原行集合，并将需要排序的行对象存储到临时容器中。for(var x=1; x<oTrNodes.length ;x++){//注意第一行不需要获取，那么x从1开始取值trArr[x-1] = oTrNodes[x];}//对临时容器排个序。mySort(trArr);if(flag){//使用循环添加数组的行对象到表格for(var x=0 ;x<trArr.length ;x++){
//这里添加的时候，注意表格下面还有一个tbody标签，因此先添加table的第一个tbody对象，再在tbody中添加tr
//通过——childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。——来获取tbody //oTabNode.childNode[0].appendChild(trArr[x]);//这样太麻烦了，我们直接获取行对象的父对象，再添加行即可trArr[x].parentNode.appendChild(trArr[x]);}flag = false;}else{//设置flag，下一次点击超链接就会倒着排序for(var x=trArr.length-1 ;x>=0; x--){trArr[x].parentNode.appendChild(trArr[x]);}flag = true;}}function mySort(arr){//使用双层循环进行排序for(var i=0; i<arr.length-1;i++){for(var j=i+1; j<arr.length;j++){//注意将获取的表格的年龄字符串转换为数字类型，否则在排序的时候可能是根据字符串顺序来排序，从而出错。//这里每一行的第二个格存储着年龄字符串，使用cells属性获取每一行的表格集合，再使用innerHTML获取表格内的字符串数据，转换为number类型即可if(parseInt(arr[i].cells[1].innerHTML) > parseInt(arr[j].cells[1].innerHTML))//parseInt()是JS的全局方法{//将2个对象交换var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}}}script><table id="info"><tr><th>姓名th><th><a href="javascript:void(0)" onclick="sortTable()">年龄a>th><th>地址th>tr><tr><td>张三td><td>27td><td>上海td>tr><tr><td>小强td><td>26td><td>北京td>tr><tr><td>李四td><td>29td><td>广州td>tr><tr><td>孙八td><td>23td><td>南京td>tr><tr><td>二麻子td><td>19td><td>大连td>tr><tr><td>犀利姐td><td>32td><td>青岛td>tr><tr><td>旺财td><td>19td><td>深圳td>tr><tr><td>周七td><td>42td><td>铁岭td>tr><tr><td>毕姥爷td><td>18td><td>沈阳td>tr>table>body>
html>
7、DOM示例——全选商品列表
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档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);//注意获取到的value是字符串类型，转换为数字类型}}var sSum = sum+"元";//将数字类型的sum加一个字符串类型的元素变化为字符串类型//将结果sSum存储到一个span区域——通过指定span区域的innerHTML内容实现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++){//checked 设置或获取复选框或单选钮的状态。 collItemNodes[x].checked = node.checked;}}script><input type="checkbox" name="allitem" onclick="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" onclick="checkAll(this)" />全选<br/><input type="button" value="总金额是" onclick="getSum()"/><span id="sumid">span>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！