cijfers plaatsen bij inputs dynamische tabel
Gemaakt met dynamische tabel (zonder tbody; eventueel wel met id: tableD).
Deze kent een opacity: 0.5.
Daaronder ligt mijn tabel (id: tableB), maar dan met afbeeldingen.
Ik gebruik dus alle functies van de bovenste Sudoku.
Dat werkt allemaal prima.
Ik heb echter nu een probleem.
Als ik een cijfer (1-9) bij inputs doe bij de gewenste td
dan wordt alles goed verwerkt na de keyup.
Maar de row, col, en value, heb ik al uit de afbeelding bepaald.
Als ik echter die functie gebruik dan wordt het cijfer wel geplaats in de td.
Maar niet in de betreffende input.
Ben hier al poos mee bezig.
Maar vindt geen goede oplossing.
Als referentie voor de bestaande Sudoku kun je denk ik het beste kijken via de link:
https://codepen.io/Mobius1/pen/EmJEoJ
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function help(bgp){
document.getElementById("divVal").innerHTML = bgp;
$("#tableD td").keydown(function(e) {
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
var firstRow = document.getElementById('tableD').rows[row_num];
firstRow.cells[column_num].textContent = bgp;
alert(column_num);
alert(row_num);
alert(firstRow.cells[column_num].textContent);
})
}
document.getElementById("divVal").innerHTML = bgp;
$("#tableD td").keydown(function(e) {
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
var firstRow = document.getElementById('tableD').rows[row_num];
firstRow.cells[column_num].textContent = bgp;
alert(column_num);
alert(row_num);
alert(firstRow.cells[column_num].textContent);
})
}
Iemand die me op weg kan helpen?
Toevoeging op 02/02/2024 00:36:42:
Ik heb denk ik toch nog oplossing gevonden.
Deze werkt vooralsnog.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function help(bgp)
{
//document.getElementById("divVal").innerHTML = bgp;
$(':input', '#tableD td').each(function () {
this.value= bgp;
});
}
{
//document.getElementById("divVal").innerHTML = bgp;
$(':input', '#tableD td').each(function () {
this.value= bgp;
});
}
Toevoeging op 02/02/2024 12:26:01:
Ik heb de tabellen even gescheiden boven elkaar geplaatst. met oorspronkelijke css.
Daardoor toch foutje ontdekt.
Werkt toch niet helemaal... de tabel geeft nu op alle inputs td de value, die is bedoeld is voor slechts 1 input uiteraard.
De juiste afbeeldingen worden wel goed geplaatst.
Ik moet het dus nog ombouwen, zodat het triggert op de bedoelde input.
Gewijzigd op 02/02/2024 13:02:00 door Hans De Ridder
Het enige dat ik kan bedenken is dit. Kijk hoe anderen het doen. Je kunt op internet voorbeelden vinden van mensen die het al helemaal in JavaScript hebben gemaakt, zelfs met het automatisch invullen van de Sudoku:
https://itznur07.medium.com/solving-sudoku-puzzles-a-step-by-step-guide-with-javascript-code-examples-55199474de7e
Hopelijk brengt je dat op het goede spoor?
Ik gebruikte al een bestaande Sudoku matrix.
Maar ik heb er een foto-sudoku van gemaakt.
Probleem is inmiddels opgelost.
Wat andere trefwoorden gebruikt bij zoeken.
Ik had verwezen naar de TD i.p.v. Input.
Daarnaast was er een probleem met de triggering.
$("#tableD td").keydown(function() {
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
var firstRow = document.getElementById('tableD').rows[row_num];
firstRow.cells[column_num].children[0].value = bgp;
if(bgp == "")
{
var firstRow = document.getElementById('tableB').rows[row_num];
firstRow.cells[column_num].innerHTML = bgp;
}
});
Hans De Ridder op 07/02/2024 12:14:21:
Probleem is inmiddels opgelost.
Wat andere trefwoorden gebruikt bij zoeken.
Wat andere trefwoorden gebruikt bij zoeken.
Fijn dat het is gelukt.