- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在使用 JavaScript 生成一个 4 列的 HTML 表格,但是当表格变得非常大(例如超过 1000 行)时,用户可能会在他们的交互(例如悬停在一行上、滚动或单击东西)和网页的响应。
这是显示我的问题的演示,请全屏运行它,您会注意到(如果您的计算机足够快,则不会注意到...)当您在行之间快速移动鼠标时,悬停效果会出现小的滞后:
/**
* @namespace Start the project called 'stck'
*/
var stck = {};
/**
* Variable to save stock loaded
*/
stck.stockInfo = [];
/**
* Load the item informaction acording the SKU
* @private
* @param {string} SKU The SKU of the item
*/
stck.loadItemInformation = function(SKU) {
var descriptionsTable = document.getElementById('descriptionsTable');
for (var rowsLength = descriptionsTable.rows.length - 1; --rowsLength; ) {
descriptionsTable.deleteRow(1);
}
var pricesTable = document.getElementById('pricesTable');
for (var rowsLength = pricesTable.rows.length - 1; --rowsLength; ) {
pricesTable.deleteRow(1);
}
document.getElementById('tableHeader').style.cssText = '';
document.getElementById('tableContent').style.cssText = '';
// Load data with AJAX and process here
document.getElementById('addItemButton').className = 'hidden';
document.getElementById('saveButton').className = document.getElementById('cancelButton').className = '';
document.getElementById('tables').className = 'hidden';
document.getElementById('editItem').className = 'active';
};
/**
* Show row to the 'tableContent' table.
* @public
* @param {number} showQuantity The quantity that will be loaded
* @param {boolean} isLoadNewStock Define if the quantity that are going to be show are lower than stock, will load new stock information or not
*/
stck.showRow = function(showQuantity, isLoadNewStock) {
var stock = stck.stockInfo;
var tableContent = document.getElementById('tableContent');
var tableContentRowsLength = tableContent.rows.length;
var stockInfoLength = stck.stockInfo.length;
var toIndex = tableContentRowsLength + showQuantity;
if (toIndex > stockInfoLength) {
if (isLoadNewStock && stck.loadStock(10, true, false)) {
return;
} else {
toIndex = stockInfoLength;
}
}
for (var i = tableContentRowsLength, row, rowNumber, cellIndex, SKUCell, descriptionCell, stockCell, clickHandler; i < toIndex; ++i) {
row = tableContent.insertRow(i);
rowNumber = document.createElement('TH');
rowNumber.innerText = i + 1;
row.appendChild(rowNumber);
cellIndex = 0;
SKUCell = row.insertCell(++cellIndex);
SKUCell.innerHTML = stock[i][0];
descriptionCell = row.insertCell(++cellIndex);
descriptionCell.innerHTML = stock[i][1];
stockCell = row.insertCell(++cellIndex);
stockCell.className = 'stock';
stockCell.innerHTML = stock[i][2];
clickHandler = function(row) {
return function() {
stck.loadItemInformation(stock[row][0]);
};
};
row.onclick = clickHandler(i);
}
};
/**
* This code is for test
*/
for (var i = 0; i < 10000; ++i) {
stck.stockInfo.push(['TESTSKU', 'A test item', i]);
}
stck.showRow(10000, false)
html{height:100%;background-color:#FFF;background:-webkit-gradient(linear,left top,left bottom,from(#EEE),to(#FFF));background:-webkit-radial-gradient(#FFF,#FFF 35%,#EEE);background:-moz-radial-gradient(#FFF,#FFF 35%,#EEE);background:radial-gradient(#FFF,#FFF 35%,#EEE);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;cursor:default}
::-moz-selection,::selection{background:transparent}
::-moz-focus-inner{border:none}
body{margin:0;background-color:transparent;overflow:hidden}
body,th,td,input,textarea{color:#333;font:13px/1.2 Arial,Helvetica,sans-serif;-webkit-border-radius:0;text-rendering:optimizelegibility}
a{outline:none}
img{border:none;behavior:url(/i/iepngfix.htc)}
table{border-spacing:0;border-collapse:collapse}
article,aside,hgroup,footer,header,nav,section{display:block}
input,select{margin:2px 0;padding:3px;-webkit-border-radius:0;-webkit-box-shadow:none;-webkit-appearance:none;border:1px solid #B8ADA5;overflow:visible}
input[type="number"]::-webkit-outer-spin-button{display:none}
input:hover,select:hover{border-color:#4A0}
input:focus,select:focus{border-color:#4A0;-webkit-box-shadow:0 0 3px #4A0;-moz-box-shadow:0 0 3px #4A0;box-shadow:0 0 3px #4A0;outline:none}
input::-moz-focus-inner{border:0;padding:0}
.b{clear:both;margin-top:10px;padding:0 4px;border-top:1px dashed #CCC;text-align:right}
.b input{width:auto;min-width:54px;height:29px;margin:6px 0 6px 6px;padding:0 8px;border:1px solid #3079ED;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);color:#FFF;font-weight:700;text-decoration:none;line-height:27px;-webkit-transition:0.1s ease-in-out;-moz-transition:0.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:0.1s ease-in-out;text-align:center;cursor:pointer}
.b input:hover{background-color:#357AE8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));background-image:-moz-linear-gradient(top,#4D90FE,#357AE8);background-image:-o-linear-gradient(top,#4D90FE,#357AE8);background-image:linear-gradient(top,#4D90FE,#357AE8)}
.b input:active,.b input:focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}
input:disabled,textarea:disabled{color:#999;cursor:not-allowed}
textarea:disabled::-webkit-input-placeholder{color:#F9F9F9}
.b input:disabled{color:#EEE;cursor:not-allowed}
.b input:disabled:hover{background-color:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#gpanel{position:fixed;top:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:43px;padding:0 5px;-moz-border-radius:0 1px;border-bottom:1px solid #000;background-color:rgba(0,0,0,.85);line-height:46px;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:.1s ease-in-out;overflow:hidden;z-index:10}
#gpanel.hidden{top:-44px}
#gpanel ul{list-style:none;margin:0;padding:0}
#gpanel li{float:left;overflow:hidden}
#gpanel a{display:block;padding:0 10px;color:#DDD;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:.1s ease-in-out}
#gpanel a:hover{background-color:rgba(204,204,204,.4);color:#FFF}
@-webkit-keyframes loading {
0% {background-color:rgba(204,204,204,.4)}
50% {background-color:rgba(119,187,68,.9)}
100% {background-color:rgba(204,204,204,.4)}
}
@-moz-keyframes loading {
0% {background-color:rgba(204,204,204,.4)}
50% {background-color:rgba(119,187,68,.9)}
100% {background-color:rgba(204,204,204,.4)}
}
#gpanel a:active,#gpanel a:focus{background-color:rgba(119,187,68,.9);-webkit-animation:loading .5s infinite linear;-moz-animation:loading .5s infinite linear}
#gnav{float:left;overflow:hidden}
#gmanager{float:right;margin-right:4px}
#body{margin-top:44px;overflow:auto}
#overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(127,127,127,0.5);background:-webkit-radial-gradient(rgba(127,127,127,.5),rgba(127,127,127,.5) 35%,rgba(0,0,0,.7));background:-moz-radial-gradient(rgba(127,127,127,.5),rgba(127,127,127,.5) 35%,rgba(0,0,0,.7));-webkit-transition:opacity .25s linear;-moz-transition:opacity .25s linear;transition:opacity .25s linear;opacity:1;overflow-y:auto;z-index:15}
#overlay.hidden{opacity:0;visibility:hidden}
#overlay .hidden{display:none}
#overlay form{position:absolute;top:50%;left:50%;border:1px solid #BCC1D0;-webkit-border-radius:2px;-moz-border-radius:2px;-webkit-box-shadow:0px 5px 80px #505050;-moz-box-shadow:0px 5px 80px #505050;background:#FFF url(../image/lightbox.png) bottom repeat-x;text-align:left}.window p{margin:5px 0}.window label{display:block;text-transform:uppercase;font:700 10px Tahoma,Geneva,sans-serif;zoom:1}.window input[type="text"],.window input[type="number"],.window input[type="password"],.window textarea{padding:2px;border:1px solid;border-color:#999 #333 #333 #999;background:#FFF}.window table{margin:0;border-spacing:0;border-collapse:collapse}.window th,.window td{border:none;border-bottom:1px solid #CCC;background:none}.window select{width:65px}#code,#desc,#desc_cn,#password,#largedescription{width:350px}#price{width:100px}.window input[type="submit"]{padding:5px 10px;border:1px solid;border-color:#FC0 #F60 #F60 #FC0;background:#F90}.window input[type="reset"]{padding:5px 10px;border:1px solid;border-color:#EEE #333 #333 #EEE;background:#CCC}
#overlay h1,#body h1{margin:0;padding:10px 20px 5px;border-bottom:1px solid #CCC;color:#848589;font:400 30px 'Segoe UI',Arial,Helvetica,sans-serif}
#overlay h1{font-size:24px}
#overlay .contentArea{padding:10px 15px 5px}
#overlay label{font-weight:700}
form#addItemPage{width:500px;margin:-126px 0 0 -251px}
#addItemPage .contentArea p{overflow:auto}
#addItemPage .contentArea label{display:block;width:470px;line-height:28px}
#addItemPage .contentArea input{float:right;width:330px;margin-right:3px}
#body h1{height:41px}
#stock a{color:#FFF;background-color:#7B4}
#functions{padding:13px 10px;float:right}
#functions ul{list-style:none;margin:0;padding:0}
#functions li{display:inline-block;min-width:54px;height:27px;margin-left:6px;padding:0 8px;border:1px solid #3079ED;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);color:#FFF;font-weight:700;text-decoration:none;line-height:27px;cursor:pointer}
#functions li:hover{background:#357AE8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));background-image:-moz-linear-gradient(top,#4D90FE,#357AE8);background-image:-o-linear-gradient(top,#4D90FE,#357AE8);background-image:linear-gradient(top,#4D90FE,#357AE8)}
#functions li:active,#functions li:focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}
#functions li.hidden{display:none}
#tables{position:absolute;top:101px;bottom:0;width:100%;-webkit-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear;overflow-y:scroll}
#tables.hidden{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}
#tables:focus{outline:none}
::-moz-focus-inner{border:none}
#tables table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#tableHeader{top:101px}
.indexCol{width:50px}
.SKUCol{width:115px}
.brandCol{width:105px}
.stockCol{width:85px}
tr#noItem{text-align:center;cursor:default}
tr#noItem:hover{background:#FFF}
.stock{text-align:right}
#tables th,#tables td{padding:9px 6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}
#tables tbody th{font-weight:700;text-overflow:none}
#tables tbody tr{background:#FFF;cursor:pointer}
#tables tbody tr:nth-child(even){background:#F8F9FC}
#tables tbody tr:hover{background:#CDE}
#editItem{position:fixed;top:101px;bottom:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 20px;visibility:hidden;opacity:0;-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:scale(2);-webkit-transition:.3s linear;-moz-transition:.3s linear;-o-transition:.3s linear;transition:.3s linear}
#editItem.active{visibility:visible;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
#editItem header{height:51px;overflow:auto}
#editItem h2{float:left;margin:0 20px 0 0;padding:10px 0;color:#7B4;font:400 20px 'Seoge UI',Arial,Helvetica,sans-serif}
#editItem ul{list-style:none;margin:10px 0;padding:0;border-bottom:1px solid #7B4}
#editItem li{display:inline-block;margin:0 5px;padding:8px 10px 7px;color:#7B4;cursor:pointer;text-transform:uppercase;-webkit-transition:.15s linear;-moz-transition:.15s linear;transition:.15s linear}
#editItem li:hover{background:rgba(204,204,204,.4);color:#000}
#editItem li.active{background-color:#7B4;color:#FFF;font-weight:700;cursor:default}
#editItem .container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden}
#editItem .tabs{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
#editItem section{width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:auto}
#editItem section div{float:left;width:50%;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem label{float:left;width:20%;min-width:50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem table{width:100%;table-layout:fixed}
#descriptionsTable{margin-top:5px;border-top:1px solid #DDD}
#editItem th{font-weight:700;text-align:left}
#editItem th, #editItem td{padding:5px 2px}
#editItem img{display:block;margin:0 auto;opacity:.5;cursor:pointer}
#editItem tr:hover img{opacity:1}
#inputsTable .labelCol{width:100px}
#inputsTable label{float:none;display:block;width:100%;height:100%}
#editItem input, #editItem select{width:100%;height:26px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem .languageCol{width:190px}
#editItem .deleteCol{width:25px}
#editItem #statusInput{width:auto;height:auto;margin:4px 4px 4px 0;-webkit-appearance:checkbox}
#editItem label[for="statusInput"]{display:inline;width:auto;height:auto}
#editItem textarea{box-sizing:border-box;width:100%}
#newDescriptionRow select{visibility:hidden}
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="/s/master.css">
<link rel="stylesheet" media="screen" href="/s/stock.css">
<title>Existencia | HDX</title>
<body>
<header id="gheader"><nav id="gpanel"><ul id="gnav"><li id="stock"><a href="/76091132/existencia/">Existencia</a></ul><ul id="gmanager">
<li id="user"><a href="/76091132/">Tester</a>
<li id="exit"><a href="/76091132/salir">Salir</a>
</ul>
</nav>
</header><div id="overlay" class="hidden">
<form id="addItemPage" class="hidden">
<h1>Agregar un artículo</h1>
<div class="contentArea">
<p><label>SKU<input type="text" id="newSKUInput" maxlength="20" autocomplete="off"></label>
<p><label>Descripción<input type="text" id="newDescriptionInput" maxlength="100" autocomplete="off"></label>
<p><label>Precio unitario<input type="number" id="newUnitPriceInput" min="1" value="1" autocomplete="off"></label>
</div>
<div class="b">
<input type="submit" value="Agregar"><input type="reset" value="Cancelar">
</div>
</form>
</div>
<div id="body"><header>
<div id="functions">
<ul>
<li id="addItemButton">Agregar un artículo
<li id="cancelButton" class="hidden">Cancelar
<li id="saveButton" class="hidden">Guardar
</ul>
</div>
<h1 class="fn">Existencia</h1>
</header>
<div id="tables" tabindex="0">
<table id="tableHeader">
<colgroup>
<col class="indexCol">
<col class="SKUCol">
<col>
<col class="stockCol">
</colgroup>
<thead>
<tr><th>#<th>SKU<th>Descripción<th>Existencia
</thead>
</table>
<table id="tableContent">
<colgroup>
<col class="indexCol">
<col class="SKUCol">
<col>
<col class="stockCol">
</colgroup>
<tbody></tbody>
</table>
</div>
</div>
<div id="editItem">
<header>
<h2>Editar artículo</h2>
<nav>
<ul id="tabsLabels">
<li id="generalTabButton" class="active">General
<li id="stockTabButton">Existencia
<li id="facturationTabButton">Facturación
<li id="optionsTabButton">Opciones
</ul>
</nav>
</header>
<div id="tabsContainer" class="container">
<div id="tabsContents" class="tabs">
<section id="generalTab">
<div>
<table id="inputsTable">
<colgroup>
<col class="labelCol">
</colgroup>
<tr><th><label for="SKUInput">SKU</label><td><input type="text" id="SKUInput" autocomplete="off">
</table>
<table id="descriptionsTable">
<colgroup><col><col class="languageCol"><col class="deleteCol"></colgroup>
<tr><th>Descripción<th>Idioma<th>
<tr id="newDescriptionRow"><td><input type="text" id="descriptionInput" placeholder="Escriba aquí para una descripción nueva en otro idioma" autocomplete="off"><td><select id="languageSelect"><option value="aa">afar<option value="ab">abjaso<option value="ae">avéstico<option value="af">afrikaans<option value="ak">akano<option value="am">amárico<option value="an">aragonés<option value="ar">árabe<option value="as">asamés<option value="av">avar<option value="ay">aimara<option value="az">azerí<option value="ba">baskir<option value="be">bielorruso<option value="bg">búlgaro<option value="bh">bhojpurí<option value="bi">bislama<option value="bm">bambara<option value="bn">bengalí<option value="bo">tibetano<option value="br">bretón<option value="bs">bosnio<option value="ca">catalán<option value="ce">checheno<option value="ch">chamorro<option value="cn">chino<option value="co">corso<option value="cr">cree<option value="cs">checo<option value="cu">eslavo eclesiástico antiguo<option value="cv">chuvasio<option value="cy">galés<option value="da">danés<option value="de">alemán<option value="dv">maldivo<option value="dz">dzongkha<option value="ee">ewe<option value="el">griego<option value="en">inglés<option value="eo">esperanto<option value="es">español<option value="et">estonio<option value="eu">euskera<option value="fa">persa<option value="ff">fula<option value="fi">finés<option value="fj">fiyiano<option value="fo">feroés<option value="fr">francés<option value="fy">frisón<option value="ga">irlandés<option value="gd">gaélico escocés<option value="gl">gallego<option value="gn">guaraní<option value="gu">guyaratí<option value="gv">manés<option value="ha">hausa<option value="he">hebreo<option value="hi">hindi<option value="ho">hiri motu<option value="hr">croata<option value="ht">haitiano<option value="hu">húngaro<option value="hy">armenio<option value="hz">herero<option value="ia">interlingua<option value="id">indonesio<option value="ie">occidental<option value="ig">igbo<option value="ii">yi de Sichuán<option value="ik">inupiaq<option value="io">ido<option value="is">islandés<option value="it">italiano<option value="iu">inuktitut<option value="ja">japonés<option value="jv">javanés<option value="ka">georgiano<option value="kg">kongo<option value="ki">kikuyu<option value="kj">kuanyama<option value="kk">kazajo<option value="kl">groenlandés<option value="km">camboyano<option value="kn">canarés<option value="ko">coreano<option value="kr">kanuri<option value="ks">cachemiro<option value="ku">kurdo<option value="kv">komi<option value="kw">córnico<option value="ky">kirguís<option value="la">latín<option value="lb">luxemburgués<option value="lg">luganda<option value="li">limburgués<option value="ln">lingala<option value="lo">lao<option value="lt">lituano<option value="lu">luba-katanga<option value="lv">letón<option value="mg">malgache<option value="mh">marshalés<option value="mi">maorí<option value="mk">macedonio<option value="ml">malayalam<option value="mn">mongol<option value="mr">maratí<option value="ms">malayo<option value="mt">maltés<option value="my">birmano<option value="na">nauruano<option value="nb">noruego bokmål<option value="nd">ndebele del norte<option value="ne">nepalí<option value="ng">ndonga<option value="nl">neerlandés<option value="nn">nynorsk<option value="no">noruego<option value="nr">ndebele del sur<option value="nv">navajo<option value="ny">chichewa<option value="oc">occitano<option value="oj">ojibwa<option value="om">oromo<option value="or">oriya<option value="os">osético<option value="pa">panyabí<option value="pi">pali<option value="pl">polaco<option value="ps">pastú<option value="pt">portugués<option value="qu">quechua<option value="rm">retorrománico<option value="rn">kirundi<option value="ro">rumano<option value="ru">ruso<option value="rw">ruandés<option value="sa">sánscrito<option value="sc">sardo<option value="sd">sindhi<option value="se">sami septentrional<option value="sg">sango<option value="sh">serbocroata<option value="si">cingalés<option value="sk">eslovaco<option value="sl">esloveno<option value="sm">samoano<option value="sn">shona<option value="so">somalí<option value="sq">albanés<option value="sr">serbio<option value="ss">suazi<option value="st">sesotho<option value="su">sundanés<option value="sv">sueco<option value="sw">suajili<option value="ta">tamil<option value="te">telugú<option value="tg">tayiko<option value="th">tailandés<option value="ti">tigriña<option value="tk">turcomano<option value="tl">tagalo<option value="tn">setsuana<option value="to">tongano<option value="tr">turco<option value="ts">tsonga<option value="tt">tártaro<option value="tw">twi<option value="ty">tahitiano<option value="ug">uigur<option value="uk">ucraniano<option value="ur">urdu<option value="uz">uzbeko<option value="ve">venda<option value="vi">vietnamita<option value="vo">volapük<option value="wa">valón<option value="wl">walisiano<option value="wo">wolof<option value="xh">xhosa<option value="yi">yídish<option value="yo">yoruba<option value="za">chuan<option value="zh">chino<option value="zu">zulú</select><td>
</table>
</div>
<div>
<table id="inputsTable">
<colgroup>
<col class="labelCol">
</colgroup>
<tr><th>Estado<td><input type="checkbox" id="statusInput" value="1"><label for="statusInput">Activo</label>
<!--<tr><th><label for="departmentSelect">Departamento</label><td><select></select>
<tr><th><label for="categorySelect">Categoría</label><td><select></select>
<tr><th><label for="noteTextArea">Notas</label><td><textarea></textarea>-->
</table>
</div>
</section>
<section id="stockTab">
<div>
<table id="stadisticTable">
<tr><th>Inventario<td>0
<tr><th>Cantidad vendido<td>0
<tr><th>Última fecha de modificación<td>
</table>
</div>
</section>
<section id="facturationTab">
<div>
<table id="pricesTable">
<colgroup><col><col><col><col><col class="deleteCol"></colgroup>
<tr><th>Código<th>Unidad<th>Cantidad equivalente<th>Precio<th>
<tr id="newPriceRow"><td><input type="text" id="codeInput" autocomplete="off"><td><input type="text" id="unitInput" autocomplete="off"><td><input type="text" id="quantityInput" autocomplete="off"><td><input type="text" id="priceInput" autocomplete="off"><td>
</table>
</div>
</section>
<section id="optionsTab">
<p>Imprimir precio
</section>
</div></div>
这个问题有什么解决办法吗?
最佳答案
使循环变慢的第一件事是 .insertRow()
。您在循环的顶部执行此操作,然后向其中添加单元格。添加行后,添加每个单元格后,浏览器进行布局计算。而是使用 .createElement()
,然后在循环结束时使用 .appendChild()
。
演示:http://jsfiddle.net/ThinkingStiff/gyaGk/
替换:
row = tableContent.insertRow(i);
与:
row = document.createElement('tr');
并在循环的末尾添加:
tableContent.tBodies[0].appendChild(row);
这将解决您的加载速度问题。至于悬停,你有太多的 CSS 规则影响你使用标签选择器的 tr
和 td
元素。我删除了一些,并在一些上使用了类,悬停突出显示速度更快。具体来说,我注意到 td
元素上的 overflow: hidden
大大降低了速度。考虑组合一些规则,使用更简单的选择器,并向元素添加类以加快 CSS 处理速度。在悬停期间,布局引擎必须重新计算很多东西,CSS 规则越少越好。我在您的代码中看到的一个示例是 #tables tbody tr
,当时表中只有一个 tbody
。 #tables tr
就足够了。比这两个更好的是一个类。我在演示中使用了 .row
。
来自 Google Page Speed 的最佳实践:
table tbody tr td
body section article
(body
不需要)body *
ul li
ul > li > a
form#UserLogin
(#
已经是特定的)关于javascript - HTML 表格很大时响应缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8640692/
好的,这听起来很简单,但我已经花了几个小时在谷歌上搜索,我只是找不到解决方案,这并不复杂。 我想创建一个包含图像和文本的表格。我希望表格的每一行都具有相同的高度。我希望文本始终从顶部开始。 IE。 \
在我的网站表单上 - 我的出生日期、月份和年份菜单显示在两行上,我希望它们都显示在同一行上。 当我测试代码时,它显示在一行中,所以我相信一定存在宽度问题。 您可以在右侧表格 (incomeprotec
我们需要跟踪和审核生产,本质上我们有很多订单,但我们似乎在途中丢失了一些产品(废品等)。 为了阻止这种情况,我们现在已在 Google 表格上下了订单,并列出了应有的数量,然后员工会写下收到的数量。
我正在转换我的应用程序,以便它适用于 iOS 7。在应用程序的一部分,我有两个搜索栏,每个搜索栏都有一个与之关联的 UISearchDisplayController。当我搜索 UISearchDis
正如标题所说,非固定表格布局是否与类似的 HTML 表格具有相同的性能问题? 最佳答案 非固定表格的问题在于,要确定一列的宽度,必须加载该列的所有单元格。这仅在...... …您有一个包含几千字节或几
我在使用 Javascript 遍历表格并从一行的第一个单元格获取文本时遇到问题。我想获取此单元格的文本,以便我可以将它与其他内容进行比较,如果文本匹配则删除该行。但是,当我尝试获取文本时,实际出现的
我经常发现自己想要制作一个表格表格——一堆行,每一行都是一个单独的表格,有自己的字段和提交按钮。例如,这是一个宠物店应用程序示例——假设这是一个结帐屏幕,您可以选择更新所选宠物的数量和属性,并在结帐前
看过许多UBB代码,包括JS,ASP,JSP的,一直没发现表格的UBB,虽然可以直接用HTML模式实现相同表格功能,但对于某些开放的站点来说开放HTML模式终究是不合适的,故一直想实现表格的UBB。
表格由 table 标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格
我有一个 HTML 与 border-radius和使用 position: sticky 的粘性标题看起来像这样: https://codepen.io/muhammadrehansaeed/pen
对于 iPhone 应用程序,我需要以网格格式显示只读表格数据。该数据可能有许多行和列。 我可以使用 UITableView,但问题是数据很可能会非常宽并且需要滚动。 有没有办法将 UITableVi
我知道这里有类似的问题,但我找不到适合我的答案。 我想要的是显示表单“默认”是选择了某些选项(在这种情况下,除了“Ban Appeal”或“Ban Appeal(西类牙语)”之外的所有内容,我希望仅在
天啊! 我想在Flutter中创建以下非常简单的表。基本上是两列文字,左列右对齐,右列左对齐。如果右列具有多个名称,则每一行都将顶部对齐。 左列应自动调整为最大项目的大小(因为每个标题都有翻译字符串)
我们开始构建 SSAS 表格模型,并想知道大多数人是否拥有一个或多个模型。如果有多个,您是否复制每个所需的表,或者是否有办法在模型之间共享表?我想我知道答案,但我希望那些有更多经验的人能够证实我们的发
tl;博士 如何将任意数量的单词分成两列,总是在最后一列中只有最后一个单词,在第一列中包含所有其他单词? =IFS( LEN(C2)-LEN(SUBSTITUTE(C2," ",""))=1, SP
你们知道一个图表或dable,它可以提供一个简短而简洁但仍然完整且相对最新的现有协议(protocol)及其细节的 View ? (即:ZeroMQ、Rendez-Vous、EMS、...所有这些!:
我才刚刚开始开发MFC应用程序,我希望对整个“控件”概念更加熟悉。我在Visual Studio中使用对话框编辑器,到目前为止,我无法找到添加简单表/网格的功能。这对我来说似乎很基础,但是我什至找不到
我需要对一个非常大的表或矩阵执行计算和操作,大约有 7500 行和 30000 列。 矩阵数据将如下所示: 文件编号|字1 |字 2 |字 3 |... |字 30000 |文档类 0032 1 0
我正在使用设计非常糟糕的数据库,我需要在编写查询之前重新调整表格。 以下是我的常见问题: 时间戳已分为两列(一列用于日期,另一列用于时间)。 一些字符串列也被拆分成多个列。 大多数字符串都有固定长度和
我正在尝试显示 $row["name"] 通过 HTML Table 的形式,如下所示: echo " ".$row["name"]." "; 我也从这里获取行变量: $que
我是一名优秀的程序员,十分优秀!