第83题 动态生成4x4表格，每个表格中有坐标(0,0)-(3,3)点击格增加次数，次数互不干扰，次数通过弹窗显示

    <style>
      #container{
        width: 200px;
        height: 200px;
        border-radius: 5px;
        background: purple;
      }
      #container > div{
        width:40px;
        height:40px;
        background:#fff;
        margin-top:8px;
        margin-left:8px;
        float: left;
        border-radius: 4px;
        line-height:40px;
        text-align: center;
        cursor: pointer
      }
    </style>
    <div id="container"><div>

    // 次数互不干扰，我们可以想到利用闭包来实现次数的储存累加
    // 方案1：直接给每个格子添加点击事件处理函数，每个处理函数来自一个闭包的外层函数调用的返回值，且闭包保存了一个变量n，记录当前格子的点击次数
    // 缺点：每个格子的n完全隔离，每个格子的n和n之间进行计算等操作
    
    var container = document.getElementById('container')
    // 动态添加子元素
    for(var r=0;r<4;r++) {
      for(var c=0;c<4;c++) {
        var cell = document.createElement('div')
        cell.innerHTML = `(${r},${c})`
        container.appendChild(cell)
    
        cell.onClick = (function(){
          var n = 0 // 当前格子的点击次数
          return function(){
            n++;
            alert(`点了${n}次`)
          }
        })()
      }
    }

    // 方案2 只要是二维的布局，2048或消消乐，都应该用二维数组来储存所有各个格子的值，每个格子的单击事件处理函数中只保存自己对应元素的下标的位置，当点击时，通过自己保存的行号和列号来二维数组中自己对应的元素值来修改
    
    // 使用匿名函数，保护了arr避免暴露到全局被修改
    (()=>{
      var container = document.getElementById('container')
    
      // 创建二维数组
      var arr = [
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0],
      ]
      // 动态添加子元素
      for(var r=0;r<4;r++) {
        for(var c=0;c<4;c++) {
          var cell = document.createElement('div')
          cell.innerHTML = `(${r},${c})`
          container.appendChild(cell)
    
          cell.onClick = (function(){
            return function(r, c){
              // 将二维数组中r行c列的值+1
              arr[r][c]++
              alert(`点了${arr[r][c]}次`)
            }
          })(r, c) // 将外层循环中r、c的值传入闭包中
        }
      }
    })()