在每个输入框的上边缘添加数字

Z时代
2024-01-10
分类：问答

下面的代码将通过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>

回答：

跨度添加到您环绕每个输入和风格跨度格：

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>

回答：

使用背景图片：

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>

回答：

您需要添加一个计数器有细胞的总数量（见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;

回答：

在纯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>

回答：

所做的更改：

固定哟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>

以上是在每个输入框的上边缘添加数字的全部内容，来源链接： utcz.com/qa/263452.html

在每个输入框的上边缘添加数字

回答：

回答：

回答：

回答：

回答：

其他人也看了：