Insert stand-alone text into text field for Sudoku viewing

I am currently working on creating a Killer Sudoku grid with jigsaw bold lines inside regular 3x3 squares. Each cell needs to display a number and an operation at the top right. I have set up a table with each cell as a textbox. However, I'm struggling to add text in the top left corner that cannot be removed or deleted without disrupting the table format. Despite my knowledge of basic javascript, html, and css, inserting disabled buttons and background images has not solved this issue.

Here is an image of the table I've been working on.

I have code snippets here

I also have some CSS code snippets here
...

And this is the target I'm aiming for.

javascripthtmlcsstextbox

Answer №1

Adjust the positioning of the td element by making it relative, and then place an absolutely positioned span within it to display small numbers; To achieve this, apply the following two styles and ensure that a span containing the small number is placed just before each input tag within the td element.

td {
  position: relative;
}

td span {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
}


var an = [1, 6, 2, 3, 5, 4,... // (Continued code snippets)
// (The JavaScript functions continue here)

#submit {
  margin-left: -63px;  
// (More CSS styles go here for formatting)
}
<head>
  <div id="p1">
    <a href="#" class="button" onclick="return sh('0','p1','p3','p2','p4');">HOME</a><br>
    <table style: "align: center;"> 
      <center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
      <tr>
        <td>
          <span>31</span>
          <input type="text" id="c11">
        </td>
        <td>
          <span></span>
          <input type="text" id="c12">
        </td>
        <td>
          <span>27</span>
          <input type="text" id="c13">
        </td>
        <td>
          <span></span>
          <input type="text" id="c14">
        </td>
         // (Table rows continue with inputs and spans)
     </div>//(Other elements on the page continued below)  
  </div>
</head>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Despite the correct value being displayed in the console.log, the Textfield is not responding to the Reducer

I am currently working on a project to create a tool that can iterate through the pupils of a school class. In order to achieve this, I have implemented a text field in a react component that displays a value: <input className="form-control" onChange={ ...

javascriptreactjsreduxreact-reduxflux

There was an issue in the v-on handler that resulted in an error: "TypeError: The property '$createElement' cannot be read because it is undefined."

I am encountering an issue with some basic input/output code. The task at hand is to receive input in Newick format and use it to create a tree. However, I am struggling to even receive the input correctly. Below is the HTML code snippet I am using: ...

htmlvue.js

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

I am struggling with the following html code: <div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"></div> </div> The "co ...

htmlcss

The output is displaying an Object instead of a numerical value in JSON

When I try running the URL in Chrome, the output I receive is: { "Train_score": { "0": 0.9892473118 }, "Test_score": { "0": 0.9831932773 } } However, when I attempt to use the following code to retrieve the JSON data using Javascript, co ...

javascriptjsonobjectvisual-studio-codeweb-development-server

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

create a word with only **one** bold letter in the word ionic-angularjs

Can someone please guide me on how to style only a specific letter within a word using angularJS? Specifically, I want to make the first letter bold while keeping the rest of the word in normal font. For instance, if I have an array of words like: var Wor ...

javascriptcssangularjshtml

Assistance in changing an onClick function in JavaScript to onLoad

I've been working on updating a JavaScript function to trigger both on page load and window resize instead of just a click event. In the code snippet below, I've made adjustments by commenting out the section related to the click event, added "wi ...

javascriptjqueryresizewindowonload

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

htmlcss

Tips for optimizing your writing productivity with AngularJS ng-route to generate a large volume of pages

I need to add about 100 more pages to my code. Is there a shortcut to avoid writing the "when" statement 100 times? I want to simplify the code. Here is the existing code: var module = angular.module("sampleApp", ['ngRoute']); module.config([&a ...

javascriptangularjs

Attempting to conceal the select input and footer components of the Calendar component within a React application

I am currently working on customizing a DatePicker component in Antd and my goal is to display only the calendar body. Initially, I attempted to use styled components to specifically target the header and footer of the calendar and apply display: none; st ...

javascriptreactjsstyled-componentsantd

Determine the variance among time stamps

After creating a registration page, I implemented functionality where when a user clicks the submit button, an activation link is sent to their email and a timestamp is stored in the database. To ensure security, I need to verify if the activation link was ...

phphtmldatabasecodeignitertimestamp

Using AngularJS to open a link in a new tab and dynamically change the ng-show value

Currently, I am working on developing an AngularJS website. A coworker has raised a concern about the dynamic functionality of the site. They mentioned that when you open a button in a new tab, such as the "About Us" tab, it redirects you back to the initi ...

javascriptjqueryhtmlangularjstabs

Utilizing external objects within the data() function of Vue: A comprehensive guide

When it comes to defining data in a Vue component, the typical approach is to use the data function as shown below: data() { return { a: 0 } } But I have a question: instead of defining the data object after return, is it possible to defin ...

javascriptvue.jsvue-component

Utilize regular expressions to substitute content with HTML tags within a directive

While working with Angular JS to iterate through Twitter tweets using ng-repeat, I encountered the need to highlight certain parts of the tweet string such as @tag and #hash. To achieve this, it was suggested to utilize replace method to wrap these element ...

javascripthtmlangularjsregex

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

The hiding/showing of elements is not being executed correctly by jQuery

My web template includes HTML and jQuery code for a project I'm working on. During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning". The code properly ...

javascriptjqueryhtmlcss

Retrieving data from an array in VueJS

As a newcomer to Vue, I'm facing some difficulties in extracting a single value from an array. My Axios get request returns an array of users with fields such as name, display_name, role, and more. I have successfully retrieved all these values and di ...

javascriptlaravelvue.js

Is there a way to disable default tooltips from appearing when hovering over SVG elements?

Looking for a way to display an interactive SVG image on an HTML page without default tooltips interfering. While I'm not well-versed in javascript/jQuery, I've managed to implement customized tooltips using PowerTip plugin. However, these custom ...

javascriptjquerysvgtooltip

What is preventing targeting a class in React?

I'm having trouble targeting className in react. I attempted to target it using div className="navbar"> and .navbar { align-items: center; } but it's not working. div{ display: block; background-color: rgb(211, 57, 57); ...

javascriptreactjsnavbar

Struggling with converting 11-line toy neural network code into JavaScript

I'm preparing to deliver a brief presentation on neural networks this coming Tuesday to my fellow web developer students. My plan was to convert this code (found under Part 1, a tiny toy neural network: 2 layer network) into JavaScript so that it woul ...

javascriptpythonnumpyneural-networkmathjs