在每個輸入框的上邊緣添加數字

下面的代碼將通過javascript函數創建一個填字表格，但爲了簡化用戶，我需要在每個框的左上角添加每個框的數字。如何爲左上角的所有輸入框創建數字？任何建議在每個輸入框的上邊緣添加數字

我需要在每個框的邊緣不是佔位符的數字;我需要它固定

var currentTextInput; 
 
var puzzelArrayData; 
 
//Loads the Crossword puzzel 
 
function initializeScreen() { 
 
    var puzzelTable = document.getElementById("puzzel"); 
 
    puzzelArrayData = preparePuzzelArray(); 
 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
 
    var row = puzzelTable.insertRow(-1); 
 
    var rowData = puzzelArrayData[i]; 
 
    for (var j = 0; j < rowData.length; j++) { 
 
     var cell = row.insertCell(-1); 
 
     if (rowData[j] != 0) { 
 
     var txtID = String('txt' + '_' + i + '_' + j); 
 
     cell.innerHTML = ' <input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">'; 
 
     } 
 
     else { 
 
      cell.style.backgroundColor = "black"; 
 
     } 
 
     } 
 
    } 
 
    addHint(); 
 
    } 
 

 

 
    //Adds the hint numbers 
 
    function addHint() { 
 
    document.getElementById("txt_0_0").placeholder = "1"; 
 
    document.getElementById("txt_0_7").placeholder = "2"; 
 
//  document.getElementById("txt_1_5").placeholder = "3"; 
 
    document.getElementById("txt_4_5").placeholder = "8"; 
 
    document.getElementById("txt_6_0").placeholder = "6"; 
 
    } 
 

 
    //Returns Array 
 
    function preparePuzzelArray() { 
 
    var items = [ 
 
     ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
 
     ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
 
     ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
 
     ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
 
     ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
 
     ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
 
     ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
 
     [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
 
     [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
 
     [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
 
     ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
 
     ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
 
    ]; 
 
    return items; 
 
    } 
 
    window.onload = initializeScreen;

tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
#leftBox { 
 
    float: left; 
 
    text-transform: uppercase; 
 
} 
 

 
#puzzel { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    /* \t border: 1px solid black; */ 
 
} 
 

 
.inputBox { 
 
    width: 37px; 
 
    height: 37px; 
 
    border: 1px solid white; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
}

<div id="leftBox"> 
 
    <table id="puzzel"> 
 
    </table> 
 
</div>

來源

2017-12-18 Mufleh

我創建一個片段。輸入1.5不存在 – mplungjan

跨度添加到您環繞每個輸入和風格跨度格：

var currentTextInput; 
 
var puzzelArrayData; 
 
//Loads the Crossword puzzel 
 
function initializeScreen() { 
 
    var puzzelTable = document.getElementById("puzzel"); 
 
    puzzelArrayData = preparePuzzelArray(); 
 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
 
    var row = puzzelTable.insertRow(-1); 
 
    var rowData = puzzelArrayData[i]; 
 
    for (var j = 0; j < rowData.length; j++) { 
 
     var cell = row.insertCell(-1); 
 
     if (rowData[j] != 0) { 
 
     var txtID = String('txt' + '_' + i + '_' + j); 
 
     cell.innerHTML = '<div class="cell"><input type="text" class="inputBox" maxlength = "1" style = "display:relative; font-size:16px;text-transform: uppercase; font-weight: 700; " ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'" + ')">'+ 
 
     ' <span class="number">5</span></div>'; 
 
     } else { 
 
     cell.style.backgroundColor = "black"; 
 
     } 
 
    } 
 
    } 
 
    addHint(); 
 
} 
 

 

 
//Adds the hint numbers 
 
function addHint() { 
 
    document.getElementById("txt_0_0").placeholder = "1"; 
 
    document.getElementById("txt_0_7").placeholder = "2"; 
 
//  document.getElementById("txt_1_5").placeholder = "3"; 
 
    document.getElementById("txt_4_5").placeholder = "8"; 
 
    document.getElementById("txt_6_0").placeholder = "6"; 
 
} 
 

 
//Returns Array 
 
function preparePuzzelArray() { 
 
    var items = [ 
 
    ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
 
    ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
 
    ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
 
    ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
 
    ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
 
    ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
 
    ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
 
    [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
 
    [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
 
    [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
 
    ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
 
    ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
 
    ]; 
 
    return items; 
 
} 
 
initializeScreen();

tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
#leftBox { 
 
    float: left; 
 
    text-transform: uppercase; 
 
} 
 

 
#puzzel { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    /* \t border: 1px solid black; */ 
 
} 
 

 
.inputBox { 
 
    width: 37px; 
 
    height: 37px; 
 
    border: 1px solid white; 
 
    text-align: center; 
 
    padding: 0; 
 
    z-index: 1; 
 
    float: left; 
 
} 
 

 
.cell { 
 
    position: relative; 
 
} 
 

 
.number { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
    float: left; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
}

<div id="leftBox"> 
 
    <table id="puzzel"> 
 
    </table> 
 
</div>

來源

2017-12-18 12:59:33

我想一些解釋會很好 –

非常感謝，它的工作 – Mufleh

使用背景圖片：

var currentTextInput; 
 
var puzzelArrayData; 
 
//Loads the Crossword puzzel 
 
function initializeScreen() { 
 
    var puzzelTable = document.getElementById("puzzel"); 
 
    puzzelArrayData = preparePuzzelArray(); 
 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
 
    var row = puzzelTable.insertRow(-1); 
 
    var rowData = puzzelArrayData[i]; 
 
    for (var j = 0; j < rowData.length; j++) { 
 
     var cell = row.insertCell(-1); 
 
     if (rowData[j] != 0) { 
 
     var txtID = String('txt' + '_' + i + '_' + j); 
 

 
     cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' + 
 
     'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'" + ')">'; 
 
     } 
 
     else { 
 
      cell.style.backgroundColor = "black"; 
 
     } 
 
     } 
 
    } 
 
    addHint(); 
 
    } 
 

 

 
    //Adds the hint numbers 
 
    function addHint() { 
 
    document.getElementById("txt_0_7").style.backgroundImage="url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+EGAQswAPUjKVAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABu0lEQVRYw+3XT4hNYRjH8Y8xSixETbZSGnZW0yiKhcKKQha2krJQLMTCz5+VbCiNmYWFKIUkZaOR7EwTVsqKFGqkFNFMjbF5p2Zj6tzr3HsX51enp/f0vud8z3Pe8zy/Q6NGjRo16mktaWdxkkEcxg5sxCpM4z2eYyTJ244DJlmPK9hbrjGDD/iJNVhXps7hOk4mmWnlXv0twB3ETazEBC7jSZLfC+asxRGcxXEM4FDtGSxwdzGLU7iWZG6R+UN4Vh7mQJL7VQH7Ks4fx2vsT3J1MbgCOIGLZXiilQz2VczgNwwleVRh2Z0Sh5L01Z1BSWYrLpkqcVk56gVsQZvnQZNM9xRgkqW4VIYPat+DFeGW4zZ24hPO9QxgkmG8LLXvM/Yk+drxVvePund6QYd5jKNJvnSlFy8A240z2FpOvcCFJOPdNgsbMFrMwq+y50aSvOm6m0myD7ewAjdwPsnU/97P/W3A3cMP7ErytGf8YJJNmCxWanuSyTpraSsZHC2v9VjdcK2YhWFsw0eMdcLyVy3U86bzYZI/vQi4pcRXPfnTVMrIAN7hexttsLaPZHWJg80PcaNGjRp1Rn8BzIeD3BWBBisAAAAASUVORK5CYII=)" 
 
    
 
    } 
 

 
    //Returns Array 
 
    function preparePuzzelArray() { 
 
    var items = [ 
 
     ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
 
     ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
 
     ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
 
     ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
 
     ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
 
     ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
 
     ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
 
     [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
 
     [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
 
     [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
 
     ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
 
     ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
 
    ]; 
 
    return items; 
 
    } 
 
    window.onload = initializeScreen;

tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
#leftBox { 
 
    float: left; 
 
    text-transform: uppercase; 
 
} 
 

 
#puzzel { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    /* \t border: 1px solid black; */ 
 
} 
 

 
.inputBox { 
 
    width: 37px; 
 
    height: 37px; 
 
    border: 1px solid white; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
}

<div id="leftBox"> 
 
    <table id="puzzel"> 
 
    </table> 
 
</div>

來源

2017-12-18 13:08:31 mplungjan

您需要添加一個計數器有細胞的總數量（見JS totalCells VAR）。而你需要在HTML中插入這個coutner。該計數器已添加到您單元格的innerHTML中（請注意反向樣式變量插入的格式）。輸入欄和這個新的計數器被放置在一個相對定位的div內，然後將計數器放置在絕對位置的左上角。

這裏的工作筆https://codepen.io/anon/pen/opbpZm 和這裏的HTML：

<div id="leftBox"> 
    <table id="puzzel"> 
    </table> 
</div>

CSS：

tr { 
    margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
} 

td { 
    height: 30px; 
    width: 30px; 
} 

#leftBox { 
    float: left; 
    text-transform: uppercase; 
} 

#puzzel { 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    /* border: 1px solid black; */ 
} 

.inputBox { 
    width: 37px; 
    height: 37px; 
    border: 1px solid white; 
    text-align: center; 
    padding: 0; 
} 

table { 
    border-collapse: collapse; 
} 

table, 
th, 
td { 
    border: 2px solid black; 
    padding: 0; 
} 


/* some changes */ 
.input_container { 
    position:relative; 
} 
.input_counter { 
    position:absolute; 
    display:block; 
    left:2px; 
    top:0; 
    font-size:80%; 
    font-weight:bold; 
    z-index:100; 
} 
.input_container input { 
}

JS：

var currentTextInput; 
var puzzelArrayData; 
//Loads the Crossword puzzel 
function initializeScreen() { 
    var puzzelTable = document.getElementById("puzzel"); 
    puzzelArrayData = preparePuzzelArray(); 
    var totalCells = 0; 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
    var row = puzzelTable.insertRow(-1); 
    var rowData = puzzelArrayData[i]; 
    for (var j = 0; j < rowData.length; j++) { 

     var cell = row.insertCell(-1); 
     if (rowData[j] != 0) { 
     totalCells++; 
     var txtID = String('txt' + '_' + i + '_' + j); 
    cell.innerHTML = `<div class="input_container"><input type="text" class="inputBox" maxlength = "1" style = "display:relative; font-size:16px;text-transform: uppercase; font-weight: 700;" id="${txtID}"  onfocus="textInputFocus(${txtID})"><span class="input_counter">${totalCells}</span></div>`; 
     } 
     else { 
      cell.style.backgroundColor = "black"; 
     } 
     } 
    } 
    addHint(); 
    } 


    //Adds the hint numbers 
    function addHint() { 
    document.getElementById("txt_0_0").placeholder = "1"; 
    document.getElementById("txt_0_7").placeholder = "2"; 
    document.getElementById("txt_1_5").placeholder = "3"; 
    document.getElementById("txt_4_5").placeholder = "8"; 
    document.getElementById("txt_6_0").placeholder = "6"; 
    } 

    //Returns Array 
    function preparePuzzelArray() { 
    var items = [ 
     ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
     ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
     ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
     ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
     ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
     ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
     ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
     [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
     [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
     [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
     ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
     ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
    ]; 
    return items; 
    } 
    window.onload = initializeScreen;

來源

2017-12-18 13:18:11 sashaikevich

在純CSS，使用計數器。

每個單元格上增加並用於「僞」之後。

body{ counter-reset: hints; } 
td{ counter-increment: hints; } 
td{ position:relative;} 
td::after{ content:counter(hints); position:absolute; left:0; z-index:1}

如果你不想算黑細胞改變增量從TD輸入：

input{counter-increment: hints; }

var currentTextInput; 
 
var puzzelArrayData; 
 
//Loads the Crossword puzzel 
 
function initializeScreen() { 
 
    var puzzelTable = document.getElementById("puzzel"); 
 
    puzzelArrayData = preparePuzzelArray(); 
 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
 
    var row = puzzelTable.insertRow(-1); 
 
    var rowData = puzzelArrayData[i]; 
 
    for (var j = 0; j < rowData.length; j++) { 
 
     var cell = row.insertCell(-1); 
 
     if (rowData[j] != 0) { 
 
     var txtID = String('txt' + '_' + i + '_' + j); 
 
     cell.innerHTML = ' <input type="text" class="inputBox" maxlength="1" style="display:relative; font-size:16px;text-transform: uppercase; font-weight:700;" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">'; 
 
     } 
 
     else { 
 
      cell.style.backgroundColor = "black"; 
 
     } 
 
     } 
 
    } 
 

 
    } 
 

 

 

 
    //Returns Array 
 
    function preparePuzzelArray() { 
 
    var items = [ 
 
     ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
 
     ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
 
     ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
 
     ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
 
     ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
 
     ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
 
     ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
 
     [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
 
     [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
 
     [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
 
     ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
 
     ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
 
    ]; 
 
    return items; 
 
    } 
 
    window.onload = initializeScreen;

tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
#leftBox { 
 
    float: left; 
 
    text-transform: uppercase; 
 
} 
 

 
#puzzel { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    /* \t border: 1px solid black; */ 
 
} 
 

 
.inputBox { 
 
    width: 37px; 
 
    height: 37px; 
 
    border: 1px solid white; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
} 
 

 
body{counter-reset: hints; } 
 
td{counter-increment: hints; } 
 
td{position:relative;} 
 
td::after{content:counter(hints);position:absolute;left:0;z-index:1}

<div id="leftBox"> 
 
    <table id="puzzel"> 
 
    </table> 
 
</div>

來源

2017-12-18 13:18:14

我需要另一個幫助，寫完所有的信後如何顯示反饋信息「已完成」，任何想法 – Mufleh

所做的更改：

固定喲ur cell.innerHTML。
增加了一個索引計數器，以增加每個塊的索引號。該變量在頂部var index=1;處聲明並使用index++遞增。
加入用於塊和號碼的CSS是：

.block { 
    position: relative; 
} 

.number { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

document.addEventListener("DOMContentLoaded", function(event) { 
 
    var currentTextInput; 
 
    var puzzelArrayData; 
 
    var index = 1; 
 
    //Loads the Crossword puzzel 
 
    function initializeScreen() { 
 
    var puzzelTable = document.getElementById("puzzel"); 
 
    puzzelArrayData = preparePuzzelArray(); 
 
    for (var i = 0; i < puzzelArrayData.length; i++) { 
 
     var row = puzzelTable.insertRow(-1); 
 
     var rowData = puzzelArrayData[i]; 
 
     for (var j = 0; j < rowData.length; j++) { 
 
     var cell = row.insertCell(-1); 
 

 
     if (rowData[j] != 0) { 
 
      var txtID = String('txt' + '_' + i + '_' + j); 
 
      cell.innerHTML = "<div class='block'><input type='text' class='inputBox' maxlength = '1' style = 'display:relative; font-size:16px;text-transform: uppercase; font - weight: 700;' id=" + txtID + "onfocus= textInputFocus(" + txtID + ")> <div class='number'>" + (index++) + "</div></div>"; 
 
     } else { 
 
      cell.style.backgroundColor = "black"; 
 
     } 
 
     } 
 
    } 
 
    addHint(); 
 
    } 
 

 

 
    //Adds the hint numbers 
 
    function addHint() { 
 
    document.getElementById("txt_0_0").placeholder = "1"; 
 
    document.getElementById("txt_0_7").placeholder = "2"; 
 
    document.getElementById("txt_1_5").placeholder = "3"; 
 
    document.getElementById("txt_4_5").placeholder = "8"; 
 
    document.getElementById("txt_6_0").placeholder = "6"; 
 
    } 
 

 
    //Returns Array 
 
    function preparePuzzelArray() { 
 
    var items = [ 
 
     ['a', 0, 'e', 'n', 0, 'a', 'g', 'e', 0, 0, 'i', 0], 
 
     ['t', 'r', 'y', 0, 'e', 0, 0, 'g', 'a', 'm', 'e', 's'], 
 
     ['t', 0, 0, 0, 't', 'v', 0, 'g', 0, 'e', 0, 'i'], 
 
     ['r', 'a', 0, 0, 0, 'i', 'a', 0, 0, 'm', 0, 'm'], 
 
     ['a', 0, 0, 'a', 'u', 'd', 'i', 'o', 0, 'o', 0, 'p'], 
 
     ['c', 0, 0, 's', 0, 'e', 0, 0, 0, 'r', 0, 'l'], 
 
     ['t', 'e', 'c', 'h', 0, 'o', 'l', 'o', 'g', 'y', 0, 'e'], 
 
     [0, 'l', 0, 'i', 0, 0, 'e', 0, 0, 0, 'e', 0], 
 
     [0, 'i', 0, 'd', 'r', 'e', 'a', 'm', 0, 'c', 'a', 'n'], 
 
     [0, 't', 'e', 'a', 'm', 0, 'r', 0, 'l', 0, 'r', 0], 
 
     ['s', 'e', 'e', 0, 0, 'a', 'n', 'i', 0, 'a', 't', 'e'], 
 
     ['o', 0, 'g', 'o', 0, 'h', 0, 0, 's', 0, 0, 0] 
 
    ]; 
 
    return items; 
 
    } 
 
    initializeScreen(); 
 
});

.block { 
 
    position: relative; 
 
} 
 

 
.number { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
#leftBox { 
 
    float: left; 
 
    text-transform: uppercase; 
 
} 
 

 
#puzzel { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    /* \t border: 1px solid black; */ 
 
} 
 

 
.inputBox { 
 
    width: 37px; 
 
    height: 37px; 
 
    border: 1px solid white; 
 
    text-align: center; 
 
    padding: 0; 
 
    z-index: 1; 
 
    float: left; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
}

<div id="leftBox"> 
 
    <table id="puzzel"> 
 
    </table> 
 
</div>

來源

2017-12-18 13:20:15

在每個輸入框的上邊緣添加數字

回答

相關問題