Nie można przesłać indeksu dwuwymiarowego elementu tablicy obiektów za pośrednictwem adresu URL w javascript. Pomysł polega na kliknięciu opcji USUŃ dla każdego elementu tablicy, aby usunąć bieżący element i wyświetlić odświeżoną tablicę w treści dokumentu.

Mój kod jest tutaj:

<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>
0
Maxim 18 grudzień 2019, 01:33
Co nie działa?
 – 
zfrisch
18 grudzień 2019, 01:39
W większości działa, ale OP nie chce zakodować na sztywno Monday wewnątrz funkcji removeElem. OP szuka sposobu na przekazanie tych informacji od programu obsługi onClick, aby można było usunąć dowolny dzień tygodnia.
 – 
ggorlen
18 grudzień 2019, 01:45

2 odpowiedzi

Najlepsza odpowiedź

removeElm potrzebuje dwóch argumentów, klucza obiektu i indeksu tablicy.

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;
}
<div id="result"></div>
0
Barmar 18 grudzień 2019, 01:50
To jest to, czego dokładnie szukam. Więc rozwiązaniem jest przekazanie argumentu wiersza jak łańcucha. Dziękuję bardzo za Twoją pomoc.
 – 
Maxim
18 grudzień 2019, 10:10
Zobacz co zrobić, gdy ktoś odpowie na moje pytanie?. Zagłosuj za lub zaakceptuj odpowiedź, zamiast mówić „dziękuję” w komentarzu.
 – 
ggorlen
22 grudzień 2019, 07:48

Odpowiedź:

Musisz przekazać row jako ciąg do funkcji onclick. Aby to zrobić, musisz pominąć cytaty w zmienionym znaczniku:

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

A następnie zmień funkcję, aby otrzymać dodatkowy parametr:

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

Przykład:

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;
        }
<div id="result"></div>

Na bok – dodatkowe zmiany:

Warto zauważyć, że używanie onclick ogólnie nie pozwala na czysty kod, ale szczególnie, gdy programowo generujesz wywołanie funkcji.

Zasadniczo ten kod jest trudny w utrzymaniu i niezbyt łatwy do odczytania.

Lepszym rozwiązaniem byłoby wykonanie następujących czynności:

  • Użyj JavaScript, aby dodać zdarzenia i słuchaczy
  • Twórz wyraźne obszary w swoim kodzie

Na przykład w poniższym przykładzie po zaprojektowaniu musisz się tylko martwić o inicjalizację, która wygląda po prostu tak:

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

Przykład:

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);
<div id="result"></div>
0
zfrisch 18 grudzień 2019, 02:30
Drogi zfrisch, dziękuję za pomoc i sugestię.
 – 
Maxim
18 grudzień 2019, 10:13