JavaScript 案例 购物车

 

思路：

  1、获取页面元素，本练习用的表格table实现

    2、声明一个数组，包含自己需要渲染的内容，每个内容需要声明一个默认值，便于之后用来判断是否被勾选

    3、封装渲染函数：通过遍历每一个元素，判断勾选状态，如果被勾选，就直接添加选中属性，没有则正常添加。

    4、接着遍历元素的每一个键，并分别赋值给每一个td。

    5、判断合计金额，每次遍历完成后，需要把被勾选的元素单价*数量并赋值给总价的元素。

    6、最后直接渲染到页面。

    7、页面的事件，由于都是在tbody内部，所以只需要个tbody添加事件委托，执行各项操作。

    8、“+/-”：直接或者目标元素，把对应的键值自增或者自减，直接更改原来数组的内容，然后再次调用渲染函数。

    9、如果是“-”，需要进行判断一下，如果《=0,则不能在减少了，就直接为0.

    10、勾选：点击对应勾选框时，得到对应的id，直接把当前的选中属性直接取反。

    11、判断是否全选：遍历所有的属性值，会得到一个布尔返回值，把这个值赋给全选按钮的选中属性。

    12、删除：点击删除得到对应的id，通过id得到下标，在数组中通过下标删除，再次渲染。

    13、删除勾选：遍历数组，判断数组每一个元素的默认值是否为true，选中则在数组中直接删除，删除后下标在回退一个--，直接循环结束，再次渲染。

    14、点击全选：点击按钮，遍历数组，把全选按钮的选中属性值赋给每一个元素的默认属性值，在进行渲染。

    15、手动更改数量：需要用到input事件，选中文本框得到更改后值，在得到对应id。

    16、为了让文本框持续获得焦点，需要给文本框添加一个focus()方法;

    17、把更改后值赋值给数组里对应元素的对应键值，再渲染。

html部分