技術標籤：jsjavascript

.selfimg {
width: 100%;
}

table,
th {
border: 1px solid red;
}

th:nth-of-type(1) {
width: 61px;
}

tbody td:nth-of-type(2) {
width: 437px;
display: flex;
}

td:nth-of-type(3),
td:nth-of-type(4),
td:nth-of-type(6) {
width: 99px;
}

td:nth-of-type(5) {
width: 124px;
}

td:nth-of-type(7) {

td:nth-of-type(2)>img {
height: 80px;
}

p {
margin: 0;
}

tfoot td:nth-of-type(2) {
text-align: right;
}

tfoot td:nth-of-type(2)>img {
width: 80px;
height: 25px;
}

您的位置 首頁》 我的淘寶》 我的購物車

全選	店鋪寶貝	獲積分	單價（元）	數量	小記（元）	操作

<script >
    let arr = [{
    shop: '纖巧百媚時尚鞋坊',
    seller: '纖巧百媚',
    img: "./img/taobao_cart_01.jpg",
    intro: '日韓流行風時尚美眉最愛獨特米字拼圖金屬坡跟公主靴子黑色',
    color: '棕色',
    size: '37',
    icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
    point: 5,
    price: 138,
    count: 1,
    state: false
},
{
    shop: '香港我的美麗日記',
    seller: 'lokemick2009',
    img: "./img/taobao_cart_02.jpg",
    intro: 'chanel/香奈兒/香奈兒炫亮魅力脣膏3.5g',
    icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
    icon2: "./img/taobao_icon_02.jpg",
    point: 12,
    price: 265,
    count: 1,
    state: false
},
{
    shop: '實體經營',
    seller: '林顏店鋪',
    img: "./img/taobao_cart_03.jpg",
    icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
    icon2: "./img/taobao_icon_02.jpg",
    intro: '蝶妝海蜇精華粉底液10#（象牙白）',
    point: 3,
    price: 138,
    count: 1,
    state: false
},
{
    shop: '紅痘痘的小屋',
    seller: 'taobao豆豆',
    img: "./img/taobao_cart_04.jpg",
    intro: '相宜促銷專供 daS推薦 最好用LilyBell化妝棉',
    icon1: "",
    icon2: "./img/taobao_icon_01.jpg",
    point: 12,
    price: 12,
    count: 2,
    state: false
}
 

];
let tbEle = document.getElementsByTagName(“tbody”)[0];

function renderArr(inputIndex) {
tbEle.innerHTML = “”;
let str = “”;
let money = 0;
let point = 0;
let i = 1;
arr.map((item, index) => {
console.log(i++, item.state);
str += <tr> <td>店鋪：</td> <td>${item.shop}</td> <td>${item.seller}</td> <td><img src="./img/taobao_relation.jpg" alt="${index}"></td> </tr>

    str += `<td>
            <img src="${item.img}" alt="${index}">
            <div>
                <p>${item.intro}</p>
                <p>顏色：${item.color}尺碼：${item.size}</p>`;

    str += `保障`
    item.icon1.split(",").map(item =>
        str += `<img src="${item}">`
    )
    str += `</div>
        </td>
        <td>${item.point}</td>
        <td>${item.price}</td>
        <td>
            <span data-index=${index}>-</span> 
            <input type="text" style="width:40px" data-index=${index} value="${item.count}" >
            <span data-index=${index}>+</span>
        </td>
        <td>${item.price*item.count}</td>
        <td><span data-index=${index} >刪除</span></td>
   </tr>`;
    //合計與積分只累加被選中的商品
    if (item.state) {
        money += item.price * item.count;
        point += item.point * item.count;
    }
});
tbEle.innerHTML = str;
let pEles = document.querySelectorAll("tfoot p");
pEles[0].innerHTML = `商品總價（不含運費）:${money}元`;
pEles[1].innerHTML = `可獲得積分${point}點`;

//當數量是手動輸入時，重新獲取焦點
if (inputIndex != undefined) {
    let inputEles = document.querySelectorAll("input[type='text']");
    inputEles[inputIndex].value = "";
    inputEles[inputIndex].value = arr[inputIndex].count;
    inputEles[inputIndex].focus();
}

}

renderArr();
let tableEle = document.querySelector(“table”);

//table後代節點被點選觸發
tableEle.addEventListener(“click”, e => {
//獲取所有多選框（除全選）
let inputEles = document.getElementsByClassName(“check”);
let allEle = document.querySelector(".all");
let event = e || window.event;
//刪除單個商品
if (event.target.innerText == “刪除”) {
arr.splice(event.target.dataset.index, 1);
renderArr();
}
//刪除單個或多個商品
if (event.target.value == “刪除所選”) {
//遍歷所有的被選中的多選框，原資料中state為true;
[…inputEles].map((item, index) => {
if (item.checked) {
arr[index].state = true;
}
})
arr = arr.filter(item => !item.state);
allEle.checked = false;
renderArr();
}
//選中或取消所有商品
if (event.target.className == “all”) {
if (event.target.checked) {
[…inputEles].map((item, index) => {
item.checked = true;
arr[index].state = true;
});
} else {
[…inputEles].map((item, index) => {
item.checked = false;
arr[index].state = false;
});
}
}
//判定每個多選框是不是都被選中
allEle.checked = ([…inputEles].every(item => item.checked) && […inputEles].length != 0) ? true : false;
//判定加數量
if (event.target.innerText == “+”) {
arr[event.target.dataset.index].count = ++event.target.previousElementSibling.value;
arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
console.log(event.target.dataset.index);
renderArr();
console.log(arr);
}
if (event.target.innerText == “-” && event.target.nextElementSibling.value > 1) {
arr[event.target.dataset.index].count = --event.target.nextElementSibling.value;
arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
renderArr();
}
//設定被選中商品元資料的state為true
if (event.target.className == “check”) {
[…inputEles].map((item, index) => {
arr[index].state = item.checked ? true : false;
});
renderArr();
}
});

//手動輸入數量觸發
tableEle.addEventListener(“input”, e => {
let event = e || window.event;
if (event.target.type == “text”) {
arr[event.target.dataset.index].count = event.target.value;
renderArr(event.target.dataset.index);
}
})