Question

我用随机数创建2d数组

  <script type="text/javascript">
      function matrixArray(rows, columns) {
          var min = 0;
          var max = 10;
          var arr = new Array();
          for (var i = 0; i < rows; i++) {
              arr[i] = new Array();
              for (var j = 0; j < columns; j++) {
                  arr[i][j] = Math.floor(Math.random() * (max - min + 1)) + min;
              }
          }
          return arr;
      }
</script>

现在我不会编写在所有行中使用删除按钮创建表的函数。并且从数组中删除行并重绘表的功能。试试这样，但不能正常工作

<script>
        function createtab (arr)
        {
            var inpts = [], t = document.createElement('TABLE');
            t.cellSpacing = 0, t.cellPadding = 5, t.border = 1;
            for (var j = 0, J = arr.length; j < J; j++) {
                var ro = t.insertRow(-1),
           ce = ro.insertCell(-1),
           inpt = document.createElement('INPUT');
                inpt.type = 'button', inpt.value = 'Delete', inpt.onclick = 'rowdel(arr,'+j+')';
                inpts.unshift(ce.appendChild(inpt));
                for (var k = 0, K = arr[j].length; k < K; k++) { var ce = ro.insertCell(-1); ce.innerHTML = arr[j][k] }
            }

           var obj = document.getElementById('forTable').appendChild(t);           
        }
</script>

按钮上的删除行点击

<script>
    function rowdel(arr, i) {
        arr.splice(i, 1);
        createtab(arr);
     }
</script>

html body

<body>
<div id="forTable"></div>  
 <script>
     var arr = matrixArray(6, 7);
     createtab(arr);
 </script>
</body>

Answer 1

你不需要重绘表格。

inpt.onclick = 'rowdel(arr,'+j+',this)';

function rowdel(arr, i, input) {
    arr.splice(i, 1);
    var row = input.parentNode.parentNode;
    row.parentNode.removeChild(row);
 }

更新：onclick需要一个功能

inpt.attributes['id']=j;
inpt.onclick = function () {
                    rowdel(this);
};

function rowdel(input) {
    var i = input.attributes['id'];
    arr.splice(i, 1);
    var row = input.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

Answer 2

<强> EDITED

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var arr = matrixArray(6, 7);
        createtab(arr);
    });

    function matrixArray(rows, columns) {
        var min = 0;
        var max = 10;
        var arr = new Array();
        for (var i = 0; i < rows; i++) {
            arr[i] = new Array();
            for (var j = 0; j < columns; j++) {
                arr[i][j] = Math.floor(Math.random() * (max - min + 1)) + min;
            }
        }
        return arr;
    }

    function createtab (arr)
    {
        var inpts = [], t = document.createElement('TABLE');
        t.cellSpacing = 0, t.cellPadding = 5, t.border = 1;
        for (var j = 0, J = arr.length; j < J; j++) {
            var ro = t.insertRow(-1),
       ce = ro.insertCell(-1),
       inpt = document.createElement('INPUT');
            inpt.type = 'button', inpt.value = 'Delete',inpt.attributes['id']=j, inpt.onclick =function() { rowdel(arr,this)};
            inpts.unshift(ce.appendChild(inpt));
            for (var k = 0, K = arr[j].length; k < K; k++) { var ce = ro.insertCell(-1); ce.innerHTML = arr[j][k];
    //alert(j);
             }
        }

       var obj = document.getElementById('forTable').appendChild(t);           
    }

  function rowdel(arr,input) {
     var i = input.attributes['id'];
        arr.splice(i, 1);
        $('#forTable').empty();
    createtab(arr);
 }


    </script>

    <body>
    <div id="forTable"></div>  

    </body>

Answer 3

你可以定义像这样的del函数。

var  dele = function rowdel(arr, i) {
        return function(){
          arr.splice(i, 1);
          createtab(arr);
        }

     }

并像封闭一样使用它。

inpt.type = 'button', inpt.value = 'Delete', inpt.onclick = dele(arr, j);

在javascript中使用2d数组

3 个答案: