如何在javascript中通过url发布二维对象数组元素的索引？答案

【问题标题】：How to post index of 2 dimensional object array element via url in javascript?如何在javascript中通过url发布二维对象数组元素的索引？
【发布时间】：2020-04-10 11:26:39
【问题描述】：

无法通过 javascript 中的 url post 发布二维对象数组元素的索引。这个想法是通过单击每个数组元素的 REMOVE 选项来删除当前元素并在文档正文上显示刷新的数组。

我的代码在这里：

<div id="result"></div>
<script>
  var arr = {
    Monday: [
      ["web programming", "class", "11:50"],
      ["web programming II", "class", "13:40"],
      ["programming", "class", "17:50"]
    ],
    Tuesday: [
      ["web programming I", "class", "10:50"],
      ["programming II", "class", "15:40"],
      ["programming", "class", "17:50"]
    ],
    Wednesday: [
      ["web tech I", "class", "11:50"],
      ["web programming II", "class", "18:40"],
      ["functional programming", "class", "17:50"]
    ],
    Thursday: [
      ["DBMS", "class", "11:50"],
      ["web tech", "class", "13:40"],
      ["linear programming", "class", "17:50"]
    ]
  };

  disp();

  function removeElm(index_no) {
    //function removeElm(row_no, index_no){
    //console.log(row_no, index_no);
    var newarr = arr.Monday.splice(index_no, 1); // Instead of Monday need to put 'ROW' itself
    console.log(arr);
    disp();
  }

  function disp() {
    var str = "";
    for (row in arr) {
      str += "<h3>" + row + "</h3><div>";
      for (elem in arr[row]) {
        str += arr[row][elem] + "</sup><a href=# onClick='return removeElm(" + arr[row].indexOf(arr[row][elem]) + ")'>REMOVE</a>";
        //str += arr[row][elem] + "</sup><a href=# onClick='return removeElm(" + arr[row].indexOf(arr[row][elem]) + "," + row + ")'>REMOVE</a>";
      }
      str += "</div>";
    }
    document.getElementById('result').innerHTML = str;
  }
</script>

【问题讨论】：

什么不起作用？
它大部分都在工作，但 OP 不想在 Monday 函数内的 Monday 中硬编码。 OP 正在寻找一种从 onClick 处理程序传递此信息的方法，以便可以删除一周中的任何一天。

标签： javascript arrays object multidimensional-array

【解决方案1】：

答案：

您需要将row 作为字符串传递给您的onclick 函数。为此，您需要在更改的标记中转义引号：

   str += arr[row][elem] + 
                "</sup><a href=# onClick='return removeElm(\"" + 
                row + 
                "\"," + arr[row].indexOf(arr[row][elem]) + 
                ")'>REMOVE</a>";

然后修改函数以接收一个附加参数：

    function removeElm(row, index_no){
        var newarr = arr[row].splice(index_no,1); // Instead of Monday need to put 'ROW' itself
        disp();
    }

示例：

var arr = {
                        Monday: [
                                    ["web programming", "class", "11:50"],
                                    ["web programming II", "class", "13:40"],
                                    ["programming", "class", "17:50"]
                                ],
                        Tuesday: [
                                    ["web programming I", "class", "10:50"],
                                    ["programming II", "class", "15:40"],
                                    ["programming", "class", "17:50"]
                                ],
                        Wednesday: [
                                    ["web tech I", "class", "11:50"],
                                    ["web programming II", "class", "18:40"],
                                    ["functional programming", "class", "17:50"]
                                ],
                        Thursday: [
                                    ["DBMS", "class", "11:50"],
                                    ["web tech", "class", "13:40"],
                                    ["linear programming", "class", "17:50"]
                                ]
            };

        disp();

        function removeElm(row, index_no){
            var newarr = arr[row].splice(index_no,1); // Instead of Monday need to put 'ROW' itself
            disp();
        }

        function disp(){
            var str = "";
            for(row in arr){
                str += "<h3>" + row + "</h3><div>";
                for(elem in arr[row]){
                    str += arr[row][elem] + 
                    "</sup><a href=# onClick='return removeElm(\"" + 
                    row + 
                    "\"," + arr[row].indexOf(arr[row][elem]) + 
                    ")'>REMOVE</a>";
                }
                str += "</div>";
            }
            document.getElementById('result').innerHTML = str;
        }

&lt;div id="result"&gt;&lt;/div&gt;

除此之外 - 其他更改：

值得注意的是，通常使用onclick 不允许编写干净的代码，但尤其是当您以编程方式生成函数调用时。

基本上，这段代码很难维护，也不是很容易阅读。

更好的解决方案是：

利用 JavaScript 添加事件和监听器
在代码中创建显式区域

例如，在下面的例子中，在设计之后你只需要担心初始化，它看起来像这样：

let parent = document.querySelector("#result");
display(data, parent);

示例：

var data = {
   Monday: [["web programming", "class", "11:50"], ["web programming II", "class", "13:40"], ["programming", "class", "17:50"]],
   Tuesday: [["web programming I", "class", "10:50"], ["programming II", "class", "15:40"], ["programming", "class", "17:50"]],
   Wednesday: [["web tech I", "class", "11:50"], ["web programming II", "class", "18:40"], ["functional programming", "class", "17:50"]],
   Thursday: [["DBMS", "class", "11:50"], ["web tech", "class", "13:40"], ["linear programming", "class", "17:50"]]
};

function display(data, parent) {
   // HELPER FUNCTIONS / SETUP
   let create = (tag, options = {}) => Object.assign(document.createElement(tag), options),
       _container = () => create("div", { className: "classContainer" }),
       _heading = textContent => create("h3", { textContent }),
       _class = info => create("span", { textContent: info.join(" ") + "\t" }),
       
       _removeButton = (day, item) => {
          // create button
          let removeBtn = create("button", { textContent: "Remove" });
          
          // add event listener
          removeBtn.addEventListener("click", function (event) {
            
            let btn = event.currentTarget;
            data[day].splice(item, 1);

            btn.parentNode.parentNode.removeChild(btn.parentNode);
      });
      return removeBtn;
   };

   // WORK
   
   Object.entries(data).forEach(function ([day, _classes]) {
      // add heading
      parent.append(_heading(day));
      
      // add each class and remove button
      _classes.forEach((classInfo, classIndex) => {
         let container = _container();
         container.append(_class(classInfo), _removeButton(day, classIndex));
         parent.append(container);
      });
      
   });
}

// INIT

let parent = document.querySelector("#result");
display(data, parent);

&lt;div id="result"&gt;&lt;/div&gt;

【讨论】：

亲爱的 zfrisch，感谢您的帮助和建议。

【解决方案2】：

removeElm 需要两个参数，对象键和数组索引。

var arr = {
  Monday: [
    ["web programming", "class", "11:50"],
    ["web programming II", "class", "13:40"],
    ["programming", "class", "17:50"]
  ],
  Tuesday: [
    ["web programming I", "class", "10:50"],
    ["programming II", "class", "15:40"],
    ["programming", "class", "17:50"]
  ],
  Wednesday: [
    ["web tech I", "class", "11:50"],
    ["web programming II", "class", "18:40"],
    ["functional programming", "class", "17:50"]
  ],
  Thursday: [
    ["DBMS", "class", "11:50"],
    ["web tech", "class", "13:40"],
    ["linear programming", "class", "17:50"]
  ]
};

disp();

function removeElm(row_no, index_no) {
  arr[row_no].splice(index_no, 1);
  console.log(arr);
  disp();
}

function disp() {
  var str = "";
  for (row in arr) {
    str += "<h3>" + row + "</h3><div>";
    for (elem in arr[row]) {
      str += arr[row][elem] + "</sup><a href=# onClick='return removeElm(\"" + row + "\", " + arr[row].indexOf(arr[row][elem]) + ")'>REMOVE</a>";
      //str += arr[row][elem] + "</sup><a href=# onClick='return removeElm(" + arr[row].indexOf(arr[row][elem]) + "," + row + ")'>REMOVE</a>";
    }
    str += "</div>";
  }
  document.getElementById('result').innerHTML = str;
}

&lt;div id="result"&gt;&lt;/div&gt;

【讨论】：

就是这样，正是我想要的。所以解决方案是，像字符串一样传递行参数。非常感谢您的帮助。
@Maxim 见what to do when someone answers my question?。支持或接受答案，而不是在评论中说“谢谢”。