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
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
Mondaywewnątrz funkcjiremoveElem. OP szuka sposobu na przekazanie tych informacji od programu obsługionClick, aby można było usunąć dowolny dzień tygodnia.