html生成自定义表格,自定义表格.html

创建多行多列表格

html,body {

height: 100%;

margin: 0;

padding: 0;

font-size: 0;

background-color: #000;

}

.tool {

display: none;

position: fixed;

top: 20%;

left: 40%;

padding: 20px;

width: 250px;

height: 550px;

border: 1px solid #FFB6C1;

border-radius: 5px;

font-size: 16px;

z-index: 2;

}

#blue {

height: 100%;

}

table {

border-color: blue;

}

input[type='text'] {

width: 100%;

height: 100%;

background: transparent;

border: none;

cursor: pointer;

}

input[type='text']:focus {

width: 100%;

height: 100%;

background: transparent;

border: none;

visibility: hidden;

cursor: pointer;

}

tr td {

/* flex: 1; */

cursor: pointer;

}

.heng {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 2px;

background-color: green;

pointer-events: none;

}

.zong {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 2px;

height: 100%;

background-color: green;

pointer-events: none;

}

请输入：

选择颜色：

浅粉红

深兰花紫

板岩暗蓝灰色

红色

黑色

橙色

棕色

蓝色

石板灰

深天蓝

纯绿

巧克力

边框颜色：

纯绿

蓝色

行数：

列数：

倍数：

const Rows = [3.387,3.296,3.204,3.121,3.043,2.969,2.9,2.835,2.774,2.716,2.662,2.611,2.563,2.518,2.475,2.435,2.398,2.363,2.329,2.298,2.269,2.242,2.217,2.193,2.172,2.151,2.133,2.116,2.1,2.086,2.073,2.062,2.051,2.043,2.035,2.029,2.024,2.02,2.018,2.017,2.017, 2.018, 2.02, 2.024, 2.029, 2.035, 2.043, 2.051, 2.062, 2.073, 2.086, 2.1, 2.116, 2.133, 2.151, 2.172, 2.193, 2.217, 2.242, 2.269, 2.298, 2.329, 2.363, 2.398, 2.435, 2.475, 2.518, 2.563, 2.611, 2.662, 2.716, 2.774, 2.835, 2.9, 2.969, 3.043, 3.121, 3.204, 3.296, 3.387, 3.477, 3.477, 3.477]

const Cols = [5.981,5.7,5.442,5.204,4.985,4.781,4.593,4.418,4.256,4.105,3.964,3.833,3.71,3.595,3.488,3.387,3.293,3.204,3.121,3.043,2.969,2.9,2.835,2.774,2.716,2.662,2.611,2.563,2.518,2.475,2.435,2.398,2.363,2.329,2.298,2.269,2.242,2.217,2.193,2.172,2.151,2.133,2.116,2.1,2.086,2.073,2.062,2.051,2.043,2.035,2.029,2.024,2.02,2.018,2.07, 2.07, 2.018, 2.02, 2.024, 2.029, 2.035, 2.043, 2.051, 2.062, 2.073, 2.086, 2.1, 2.116, 2.133, 2.151, 2.172, 2.193, 2.217, 2.242, 2.269, 2.298, 2.329, 2.363, 2.398, 2.435, 2.475, 2.518, 2.563, 2.611, 2.662, 2.716, 2.774, 2.835, 2.9, 2.969, 3.043, 3.121, 3.204, 3.293, 3.387, 3.488, 3.595, 3.71, 3.833, 3.964, 4.105, 4.256, 4.418, 4.593, 4.781, 4.985, 5.204, 5.442, 5.7, 5.981]

function addTable(rows,col,times,Color,style){

var position = document.getElementById("blue");//定义table生成的位置

var objTable = document.createElement("table");

// let h=85.038,w=141.73,main=0

// let steph = (2 * 28.346) / y,stepw = (4 * 28.346) / x

objTable.border="1";

objTable.style.borderColor = Color

for(var i=0;i

{

var objTr = document.createElement("tr");

if (rows > Rows.length) {

return alert('请输入小于83的行数')

}

objTr.style.height = Rows[i] * 28.346 * times + 'px'

// if(i > rows/2) {

// h += steph

// } else {

// h -= steph

// }

for(var j=0;j

{

var objTd = document.createElement("td");

// main += Cols[j]

// objTd.className = style.class

objTd.innerHTML = ``

var objInput = objTd.querySelector('input')

if (col > Cols.length) {

return alert('请输入小于110的列数')

}

objInput.style.width = Cols[j] * 28.346 * times + 'px'

// if(j > col/2) {

// w += stepw

// } else {

// w -= stepw

// }

objTr.appendChild(objTd);

}

// objTable.style.width = main + 'px'

objTable.appendChild(objTr);

}

position.appendChild(objTable);

}

var rows = document.querySelector('.rows')

var col =document.querySelector('.col')

var Btn =document.querySelector('.btn')

var times = document.querySelector('.times')

var select = document.querySelector('#select1')

var select2 = document.querySelector('#select2')

var Heng = document.querySelector('.heng')

var Zong = document.querySelector('.zong')

let i = 0

let SetHight = 0,SetWidth = 0

Btn.addEventListener('click',() => {

let x= Math.floor(col.value/2),y=Math.floor(rows.value/2)

var index2 = select2.selectedIndex

$('table').remove()

addTable(rows.value,col.value,times.value,select2.options[index2].value,{class: 'hvr-hollow'})

$('.tool').addClass('bounceOut')

setTimeout(() => {

$('.tool').removeClass('bounceOut').css('display','none')

},1000)

$('td').css("background-color","black")

// console.log(select.options[index].value)

SetHight = $('tr').eq(y).find('td').eq(x).offset().top + Math.floor($('tr').eq(y).find('td').eq(x).height()/2)

SetWidth = $('tr').eq(y).find('td').eq(x).offset().left + Math.floor($('tr').eq(y).find('td').eq(x).width()/2)

Heng.style.top = SetHight + 1 + 'px'

Heng.style.width = $(document).width() + 'px'

Zong.style.left = SetWidth - 1 + 'px'

Zong.style.height = $(document).height() + 'px'

if(select2.options[index2].value === '#008000') {

Heng.style.backgroundColor = '#0000FF'

Zong.style.backgroundColor = '#0000FF'

} else if (select2.options[index2].value === '#0000FF') {

Heng.style.backgroundColor = '#008000'

Zong.style.backgroundColor = '#008000'

}

// console.log(SetHight)

})

$(document).on('click', 'td',function () {

var index = select.selectedIndex

$('td').css("background-color","black")

$(this).css("background-color",select.options[index].value)

// console.log($(this).parent().index() + ' ' + $(this).index())

i = ($(this).parent().index() * col.value) + ($(this).index() +1)

// console.log(i)

// cols = $(this).index()

// row = $(this).parent().index()

})

$(document).keydown(function(e){

var index = select.selectedIndex

// if (event.target.nodeName == 'AREA' || event.target.nodeName == 'INPUT') {

// return;

// };

if(!e) var e = window.event;

// if(e.preventDefault){

// e.preventDefault();

// }else{

// window.event.returnValue = false;

// }

if(e.keyCode==32 && $('table').length){

e.preventDefault();

if(i == $('td').length) {

i = 0

}

$('td').css("background-color","black")

// console.log($('td').eq(i))

$('td').eq(i).css("background-color",select.options[index].value)

// $('tr').eq(row).find('td').eq(cols).css("background-color",select.options[index].value)

// $("td input[type='text']").eq(i).val(i);

$("td input[type='text']").eq(i).focus();

// console.log($("td input[type='text']").eq(i).val())

i++

}

});

function hotkey() {

var a=window.event.keyCode;

if((a==81)&&(event.ctrlKey)) {

$(".tool").animate({},function(){

$(".tool").show().addClass('bounceIn')

setTimeout(() => {

$('.tool').removeClass('bounceIn')

},500)

})

}

}// end hotkey

document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数

一键复制

编辑

Web IDE

原始数据

按行查看

历史