<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#table1 th{
border: 0.5px solid;
width: 100px;
}
#table1 td{
border: 0.5px solid;
text-align: center;
width:120px;
}
</style>
</head>
<body>
商品名称:<input type="text" id="t1" class="ipt"/><span class="sp"></span> <br />
单  价:<input type="text" id="t2" class="ipt"/><span class="spp1"></span> <br />
数  量:<input type="text" id="t3"/ class="ipt"><span class="spp2"></span> <br /> <br />
<input type="button" value="添加" onclick="add()" class="ys">
<input type="button" value="删除" class="sc">
<br/>
省份:<select id="sheng"></select>
市区:<select id="shi"></select><br />
<input type="text" name="" id="ssk1" value="" /> <button id="ssk2">搜索</button>
<hr />
<table cellspacing="0" cellpadding="5" id="table1">
<tr>
<th>序列号</th>
<th><input type="checkbox" class="quanxuan" />全选</th>
<th>时间</th>
<th>商品名称/姓名</th>
<th>单价 班级</th>
<th>数量 成绩</th>
<th>省份</th>
<th>市区</th>
<th>操作</th>
</tr>
</table>
<p class="price">总计 :</p>
</body>
<script>
//获取th
var ths = document.getElementsByTagName("th");
//获取input
var ipt = document.getElementsByClassName("ipt");
//获取tbody
var tb = document.getElementsByTagName("tbody")[0];
var sp=document.getElementsByClassName("sp")[0];
var spp1=document.getElementsByClassName("spp1")[0];
var spp2=document.getElementsByClassName("spp2")[0];
function add(){
//创建存放td的数组
var tds=[];
//根据th的数量,来循环创建td
for(var i = 0; i < ths.length; i++){
tds[i] = document.createElement("td");
}
//根据input的值,给前两个td赋值
for(var j = 0; j < 2; j++){
tds[j+3].innerHTML = ipt[j].value;
}
//给小计设置一个class名,方便之后的总计获取它
tds[tds.length-2].className = "xj";
//tds[3]添加一类名
tds[3].className="sskclass";
//数量
var sp1 = document.createElement("span");
sp1.innerHTML = ipt[2].value;
//创建+号
var add_xiao = document.createElement("button");
add_xiao.innerHTML = "+";
add_xiao.onclick = function(){
var a = parseInt(sp1.innerHTML);
sp1.innerHTML = ++a;
zj();
}
//减号
var sub_xiao = document.createElement("button");
sub_xiao.innerHTML = "-";
sub_xiao.onclick = function(){
var a = parseInt(sp1.innerHTML);
if(a>0){
sp1.innerHTML = --a;
}
}
tds[5].appendChild(sp1);
//创建存放td的 tr
var tr = document.createElement("tr");
tr.className = "tr_new";
for(var k = 0; k < tds.length; k++){
tr.appendChild(tds[k]);
}
//创建单行删除按钮;
var but = document.createElement("button");
but.innerHTML = "删除";
//给按钮添加删除整行的功能
but.onclick = function(){
this.parentNode.parentNode.remove();
xh();
}
//将删除按钮 添加到最后一个td
tr.lastElementChild.appendChild(but);
//创建 全选设置
var quanxuan=document.getElementsByClassName("quanxuan")[0];
var ip=document.createElement("input");
ip.type="checkbox";
//ip添加到tds里
tds[1].appendChild(ip);
//给ip创建一个class标签 名
ip.className="fxk";
//获取fxk
var fxk1=document.getElementsByClassName("fxk");
//设置
tr1=document.getElementsByTagName("tr");
//给全选设置整列的全选功能
//点击事件
quanxuan.onclick=function(){
for(var i=0; i<fxk1.length; i++){
if (quanxuan.checked) {
//方法一
// console.log(tr1[i]);
// tr1[i].firstElementChild.firstElementChild.checked=true; 此方法要把循环改为 i<tr1.length
//方法二
fxk1[i].checked = true;
}else{
//方法一
// tr1[i].firstElementChild.firstElementChild.checked=false;
//方法二
fxk1[i].checked = false;
}
}
}
//总的删除按钮 获取删除按钮
var sc=document.getElementsByClassName("sc")[0];
sc.onclick=function(){
for (var i=0; i<fxk1.length; i++) {
if (fxk1[i].checked==true) {
fxk1[i].parentElement.parentElement.remove();
--i;
}
}
//调用序列号
xh();
}
//将tr添加到页面已有的tbody中
tb.appendChild(tr);
//调用序列号
xh();
//设置颜色 设置隔行换色的颜色
var xj = document.getElementsByClassName("xj");
if ((xj.length%2)==0) {
tr.style.backgroundColor="aquamarine";
} else{
tr.style.backgroundColor="cyan";
}
//添加设置时间
var date=new Date();
var datea1=date.getFullYear();//获取年份
var datea2=date.getMonth(); //获取月份
var datea3=date.getDate(); //获取天份
var datea4=date.getHours(); //获取小时
var datea5=date.getMinutes(); //获取分钟
var datea6=date.getSeconds(); //获取秒份
tds[2].innerText=datea1+"年"+datea2+"月"+datea3+"日"+datea4+"时"
+datea5+"分"+datea6+"秒";
// console.log(tds[2].innerText);
//添加省
sheng=document.getElementById("sheng");
tds[6].innerHTML=sheng.value;
//添加市
shi=document.getElementById("shi");
tds[7].innerHTML=shi.value;
}//添加点击框
var shengfen=["河南","北京","山东","河北"];
var shifen=[
["漯河","南阳","郑州","安阳"],
["朝阳","延庆","大兴","昌平"],
["济南","青岛","日照","新东方"],
["石家庄","涿州","保定","雄安"]
];
//获取省的select元素
var sel=document.getElementsByTagName("select")[0];
//将省的数组元素添加到sel
for(var i=0; i<shengfen.length; i++){
var opt=document.createElement("option");
opt.innerHTML=shengfen[i];
sel.appendChild(opt);
}
//获取市的select元素
var selshi=document.getElementsByTagName("select")[1];
sel.onchange=function(){
change();
}
change();
function change(){
//储存当前数组下标
var selIndex=sel.selectedIndex
console.log
selshi.innerHTML="";
for (var j=0; j<shifen[selIndex].length; j++) {
var opt=document.createElement("option");
opt.innerHTML=shifen[selIndex][j];
selshi.appendChild(opt);
}
}
//搜索框部分
var ssk2=document.getElementById("ssk2");
//按姓名搜索
ssk2.onclick=function(){
var ssk1=document.getElementById("ssk1").value;
//根据th的数量,来循环创建td
var tdss = document.createElement("td");
// tr2=document.getElementsByTagName("tr");
var sskclass=document.getElementsByClassName("sskclass");
for (i=0; i<sskclass.length; i++){
if (sskclass[i].innerText == ssk1){
console.log(sskclass[i].innerText);
sskclass[i].parentElement.style.display=null;
}else{
sskclass[i].parentElement.style.display=none;
}
}
}
//总计 单独封装
function zj(){
var xj = document.getElementsByClassName("xj");
var sum = 0;
for(var i = 0; i < xj.length; i++){
sum += parseInt(xj[i].innerHTML);
}
var zj = document.getElementsByClassName("price")[0];
zj.innerHTML = "总计 : " + sum;
}
//序号 单独封装
function xh(){
// var tr1=document.getElementsByTagName("tr");
for (var i=1; i<tr1.length; i++) {
tr1[i].firstElementChild.innerHTML=i;
}
}
</script>
</html>
js 购物车(原生)
猜你喜欢
转载自blog.csdn.net/weixin_46146313/article/details/104153502
今日推荐
周排行