cijfers plaatsen bij inputs dynamische tabel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Hans De Ridder

Hans De Ridder

01/02/2024 22:38:52
Quote Anchor link
Ik gebruik oud Javascript van Sudoku.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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);

})
}


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)
PHP script in nieuw venster Selecteer het PHP script
1
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;

});
}


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
 
PHP hulp

PHP hulp

23/02/2024 15:41:51
 
Ad Fundum

Ad Fundum

07/02/2024 07:56:05
Quote Anchor link
Ik kan niet de hele code zien waardoor ik niet kan zeggen waar het hem in zit.

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?
 
Hans De Ridder

Hans De Ridder

07/02/2024 12:14:21
Quote Anchor link
bedankt Ad voor je reactie.
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;

}

});
 
Ad Fundum

Ad Fundum

08/02/2024 08:44:03
Quote Anchor link
Hans De Ridder op 07/02/2024 12:14:21:
Probleem is inmiddels opgelost.
Wat andere trefwoorden gebruikt bij zoeken.

Fijn dat het is gelukt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.