فرز الجدول البسيط
يمكنك النقر نقرًا مزدوجًا لتحرير القواعد المعدلة المخصصة
أعمدة السحب لاستبدال العمود
دفع الحدود لتوسيع نطاق عرض العمود
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> جدول </title>
</head>
<type type = "text/css">
الجسم {font-size: 12px}
#tab {الحدود: الانهيار ؛}
.edit {الارتفاع: 16px ؛ العرض: 98 ٪ ؛ خلفية اللون:#eff7ff ؛ حجم الخط: 12 بكسل ؛ الحدود: 0px ؛}
#tab thead td {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp) ؛ color:#183c94 ؛ word-break: break-all}}
#tab tbody td {overflow: hidden ؛ word-break: break-all ؛}
#tab td {الحدود: 1px solid #cecfce ؛ الارتفاع: 20px ؛ خط الارتفاع: 20px ؛ align align: middle ؛ }
#tab td.tc {text-align: center ؛}
.div {العرض: 10px ؛ الارتفاع: 6px ؛ الحدود: 1 بكسل Solid #999999 ؛ خلفية اللون: #fffff ؛ الموقف: مطلق ؛ العرض: لا شيء ؛}
.line {العرض: 2px ؛ لون الخلفية:#999999 ؛ الموقف: مطلق ؛ العرض: لا شيء}
.DR {الارتفاع: 100 ٪ ؛ العرض: 2px ؛ الخلفية: #cecfce
.r {تعويم: يمين ؛}
.l {float: left ؛}
#tab thead
</style>
<body>
<table id = "tab" cellpacing = "1" cellpadding = "0">
<head>
<tr>
<tdclass = "tc"> <span> معرف </span> <viv> </viv> </td>
<tdclass = "tc"> <span> حدد </span> <viv> </viv> </td>
<td> <span> الاسم </span> <viv> </viv> </td>
<td> <span> عيد ميلاد </span> <viv> </viv> </td>
<td> <span> ملاحظات </span> <viv> </viv> </td>
</r>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> Missy </td>
<td> 1982-05-27 </td>
<td> أكواب ، جميع الكؤوس </td>
</r>
<tr>
<td> 3 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> li si </td>
<td> 1983-06-27 </td>
<td> نعم ، لدي مهارات جيدة في Warcraft </td>
</r>
<tr>
<td> 2 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> وانغ وو </td>
<td> 1987-05-27 </td>
<td> نصل الأمير الفارسي ليس سيئًا </td>
</r>
<tr>
<td> 4 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> Zhao liu </td>
<td> 1988-05-27 </td>
<td> اسمي Zhao Liu </td>
</r>
<tr>
<td> 5 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> Zhu ba </td>
<td> 1984-05-27 </td>
<td> Sweep واذهب إلى السرير </td>
</r>
<tr>
<td> 6 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> asdorf </td>
<td> 1984-06-27 </td>
<td> Asdorf Dark Room with Lights </td>
</r>
<tr>
<td> 7 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> كوب </td>
<td> 1984-06-27 </td>
<td> العديد من الكؤوس </td>
</r>
<tr>
<td> 8 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> أواني الطعام </td>
<td> 1984-02-27 </td>
<td> العديد من أدوات المائدة </td>
</r>
<tr>
<td> 8 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> أواني الغسيل </td>
<td> 1984-08-27 </td>
<td> العديد من أواني الغسيل </td>
</r>
<tr>
<td> 9 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> الحبار مليء بالوجه </td>
<td> 1984-12-27 </td>
<td> 10 تقريبًا ليلة واحدة </td>
</r>
<tr>
<td> 10 </td>
<td> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> cialis brother </td>
<td> 1984-12-21 </td>
<td> hehe </td>
</r>
</tbody>
</table>
<script language = "javaScript">
(وظيفة (نافذة ، غير محددة) {
window.sys = function (ua) {
var b = {
ie: /msie/.test(ua) &&!/opera/.test (ua) ،
Opera: /opera/.test(ua) ،
Safari: /webkit/.test(ua) &&!/Chrome/.test (ua) ،
Firefox: /firefox/.test(ua) ،
Chrome: /Chrome/.test(ua)
} ، vmark = "" ؛
لـ (var i in b) {
if (b [i]) {vmark = "safari" == i؟ "الإصدار": أنا ؛ استراحة؛ }
}
B.Version = Varke && regexp ("(؟:" + varke + ") [///:] ([// d.] +)"). اختبار (UA)؟ regexp. $ 1: "0" ؛
B.IE6 = B.Ie && parseint (B.Version ، 10) == 6 ؛
B.IE7 = B.Ie && parseint (B.Version ، 10) == 7 ؛
B.IE8 = B.Ie && parseint (B.Version ، 10) == 8 ؛
العودة ب ؛
} (window.navigator.useragent.toLowerCase ()) ؛
window.sys.ie6 && document.execcommand ("backgroundImageCache" ، false ، true) ؛
نافذة. $ = دالة (معرف) {
return document.getElementById (id) ؛
} ؛
window.addlistener = function (element ، e ، fn) {
! element.events && (element.events = {}) ؛
element.events [e] && (element.events [e] [addListener.Guid ++] = fn) || (element.events [e] = {'0': fn}) ؛
element.addeventListener؟ element.addeventListener (e ، fn ، false): element.attachevent ("on" + e ، fn) ؛
} ؛
window.addListener.Guid = 1 ؛
window.removelistener = function (element ، e ، fn) {
var handlers = element.events [e] ، type ؛
إذا (fn) {
لـ (اكتب معالجات)
if (معالجات [type] === fn) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، FN ، false): element.detachevent ("on" + e ، fn) ؛
حذف معالجات [النوع] ؛
}
}آخر{
لـ (اكتب معالجات) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، معالجات [النوع] ، خطأ): element.detachevent ("on" + e ، معالجات [type]) ؛
حذف معالجات [النوع] ؛
}
}
} ؛
window.setStyle = function (e ، o) {
إذا (typeof o == "سلسلة")
e.style.csstext = o ؛
آخر
لـ (var i in o)
e.style [i] = o [i] ؛
} ؛
var slice = array.prototype.slice ؛
window.bind = function (كائن ، ممتع) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع () {
إرجاع المرح. apply (كائن ، args) ؛
} ؛
} ؛
window.bindaseventListener = function (الكائن ، المرح ، args) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع (الحدث) {
return fun.apply (Object ، [event || window.event] .Concat (args)) ؛
}
} ؛
// نسخة من JQ
Window.Extend = function () {
var target = mations [0] || {} ، i = 1 ، length = edation.length ، deep = true ، Options ؛
if (typeof target === "Boolean") {
عميق = الهدف ؛
الهدف = الوسائط [1] || {} ؛
أنا = 2 ؛
}
if (typeof target! == "object" && object.prototype.toString.call (target)! = "[comfort function]")
الهدف = {} ؛
لـ (؛ i <length ؛ i ++) {
if ((خيارات = الوسائط [i])! = null)
لـ (var name in Options) {
var src = target [name] ، copy = Options [name] ؛
إذا (الهدف === نسخة)
يكمل؛
if (deep && copy && typeof copy === "object" &&! copy.nodeType) {
Target [name] = enduments.callee (deep ، src || (copy.length! = null؟ []: {}) ، copy) ؛
}
آخر إذا (نسخة! == غير محددة)
الهدف [الاسم] = نسخة ؛
}
}
الهدف الإرجاع ؛
} ؛
Window.ObjPos = Function (O) {
var x = 0 ، y = 0 ؛
do {x += o.offSetLeft ؛ y += o.offsettop ؛} بينما ((o = o.offSetParent)) ؛
إرجاع {'x': x ، 'y': y} ؛
}
window.class = دالة (خصائص) {
var _class = function () {return (وسيطات [0]! == null && this.initialize && typeof (this.initialize) == 'function')؟ this.initialize.apply (هذا ، الحجج): هذا ؛} ؛
_class.prototype = الخصائص ؛
العودة _class ؛
} ؛
window.hasclass = function (العنصر ، className) {
return element.classname.match (new regexp ('(// s |^)'+className+'(// s | $)') ؛
} ؛
window.addclass = function (element ، className) {
! this.hasclass (العنصر ، className) && (element.className += "" +className) ؛
}
window.removeClass = function (element ، className) {
HasClass (element ، className) && (element.className = element.classname.replace (new regexp ('(// s |^)'+className+'(// s | $)') ، '')) ؛
}
}) (نافذة) ؛
جدول var = فئة جديدة ({
خيارات :{
Minwidth: 62
} ،
تهيئة: الدالة (علامة التبويب ، تعيين) {
this.table = علامة التبويب ؛
this.rows = [] ؛ // سجل جميع مراجع TR في ذلك
this.sortcol = null ؛ // سجل الأعمدة التي يتم فرزها
this.inputtd = null ؛ // السجل الذي يتم تحرير TD
this.editConfig = {} ؛ // قواعد ونصائح لتحرير جداول التحرير
this.tead = tab.getElementSbyTagName ('head') [0] ؛
this.headtds = tab.getElementSbyTagName ('head') [0] .getElementsByTagName ('td') ؛ // يمكن الرجوع إلى مجموعة DOM شائعة الاستخدام باستخدام خاصية.
this.tbodytds = tab.getElementSbyTagName ('tbody') [0] .getElementsByTagName ('td') ؛
this.closconfig = {
ON: خطأ ،
TD: NULL ،
TOTD: فارغة
} ؛
this.widthConfig = {
TD: NULL ،
Nexttd: NULL ،
X: 0 ،
tdwidth: 0 ،
NextTdWidth: 0
} ؛
تمديد (هذا ، this.options) ؛
// لا أعرف السبب ، إذا لم تقم بتعيينه ، فسوف تقفز بشكل عشوائي
(sys.ie6 || sys.chrome) && (tab.width = tab.offsetWidth)
// سجل مربعات الاختيار هذه ، يتم تحديد الراديو. لن يتذكر IE6 هذه الحالات عند القيام بعمليات DOM.
إذا (sys.ie6) {
this.checkbox = {} ؛
مربعات الاختيار var = tab.getElementsByTagName ('input') ، i = 0 ، l = checkboxs.length ؛
لـ (؛ i <l ؛ i ++)
(مربعات الاختيار [i] .type == "مربع الاختيار" || مربعات الاختيار [i] .type == "Radio") &&
AddListener (مربعات الاختيار [i] ، "انقر" ، ربط (هذا ، الدالة (elm ، i) {
elm.checked == true؟ (this.checkbox [i] = elm) :( حذف this.checkbox [i]) ؛
} ، مربعات الاختيار [i] ، i)) ؛
} ؛
var i = 0 ، l = set.length ، rows = tab.tbodies [0] .Rows ، d = document ، tabtads = tab.getElementSbyTagName ('td') ، length = this.theadtds.length ؛
// المدخلات المستخدمة للتحرير
this.input = d.createlement ('input') ؛
this.input.type = "text" ؛
this.input.className = 'edit' ؛
// تستخدم لعرض Dragging Div
this.div = d.body.appendChild (d.CreateElement ('div')) ؛
this.div.className = "div" ؛
// الخط العمودي المعروض عند التكبير
this.line = d.body.appendChild (d.CreateElement ('div')) ؛
this.line.className = 'line' ؛
this.line.style.top = objpos (tab) .y +"px" ؛
// السفر المجموعة لإجراء بعض الإعدادات
لـ (؛ i <l ؛ i ++) {
// ربط حدث Headhunter الذي يجب فرزه
AddListener (this.headtds [set [i] .id] ، 'click' ، bind (this ، this.sorttable ، this.headtds [set [i] .id] ، set [i] .type)) ؛
// تحديد التكوين المطلوب للعمود إلى الجدول الذي يجب تحريره
set [i] .edit && (this.editconfig [set [i] .id] = {rery: set [i] .edit.rule ، message: set [i] .edit.message}) ؛
}
// ضع كل TR في صفيف للفرز
لـ (i = 0 ، l = rows.length ؛ i <l ؛ i ++)
this.rows [i] = الصفوف [i] ؛
// السفر عبر جميع TDs وإنشاء بعض الإعدادات
لـ (i = 0 ، l = tabtads.length ؛ i <l ؛ i ++) {
// عند استخدام TD على الرأس ، يجب عليك استخدامه عند سحبه بعلامات.
i <length && tabtads [i] .SetAttribute ('clos' ، i) ؛
// إضافة سمة تحرير إلى TD التي يجب تحريرها
i> = length && this.editConfig [i ٪ length] && tabtads [i] .SetAttribute ('edit' ، i ٪ length) ؛
}
// عمليات السحب والتكبير
AddListener (this.tead ، 'mousedown' ، bindaseventListener (this ، this.dragorwidth)) ؛
// عند السحب ، ينتقل السجل إلى هذا العمود TD
AddListener (this.tead ، 'mouseover' ، bindaseventListener (this ، this.theadhover)) ؛
//حسنًا
AddListener (this.tead ، 'mouseout' ، bindaseventListener (this ، this.teadout)) ؛
// حدث تحرير الربط يحدد الجدول الذي يتم تحريره بناءً
AddListener (tab ، 'dblclick' ، bindaseventListener (this ، this.edit)) ؛
// احفظ المحتوى المعدل عند ترك الإدخال
AddListener (this.input ، 'Blur' ، bind (this ، this.save ، this.input)) ؛
} ،
sortable: function (td ، type) {// td هو العنصر n الذي تم النقر عليه. أي عمود هو نوع الفرز. ما هو النوع هو الفرز.
var fragment = document.createdocumentfragment () ، span = td.getElementsByTagName ('span') [0] ، str = span.innerhtml ؛
if (td === this.sortcol) {
this.rows.reverse () ؛
span.innerhtml = str.replace (/. $/ ، str.charat (str.length-1) == "↓"؟ "↑": "↓") ؛
}آخر{
this.rows.sort (this.compare (td.getAttribute ('clos') ، type)) ؛
span.innerhtml = span.innerhtml + "↑" ؛
this.sortcol! = null && (this.sortcol.getElementsByTagName ('span') [0]
} ؛
لـ (var i = 0 ، l = this.rows.length ؛ i <l ؛ i ++)
frag.appendchild (this.rows [i]) ؛
this.table.tbodies [0] .AppendChild (frag) ؛
إذا (sys.ie6) {
لـ (var s في this.checkbox)
this.checkbox [s]. checked = true ؛
}
this.sortcol = td ؛ // سجل الأعمدة التي يتم فرزها
} ،
قارن: الوظيفة (n ، اكتب) {
وظيفة الإرجاع (A1 ، A2) {
var convert = {
int: function (v) {return parseint (v)} ،
Float: Function (V) {return parsefloat (v)} ،
التاريخ: الدالة (V) {return v.toString ()} ،
السلسلة: Function (V) {return v.toString ()}
} ؛
! تحويل [type] && (تحويل [type] = function (v) {return v.toString ()}) ؛
a1 = convert [type] (a1.cells [n] .innerhtml) ؛
A2 = Convert [type] (a2.cells [n] .innerhtml) ؛
إرجاع A1 == A2؟ 0: A1 <A2؟ -1: 1 ؛
} ؛
} ،
تحرير: وظيفة (ه) {
var elem = this.inputtd = e.srcelement || E.Target ؛
if (! elem.getattribute ('edit')) return ؛
this.input.value = elem.innerhtml ؛
elem.innerhtml = "" ؛
elem.appendchild (this.input) ؛
this.input.focus () ؛
} ،
حفظ: وظيفة (elem) {
var editinfo = this.editconfig [elem.parentNode.getAttribute ('edit')] ، status = {
"[[وظيفة الكائن]": "الطول" في editinfo.rule && editinfo.rule (this.input.value) || false ،
"[Object regexp]": "اختبار" في editinfo.rule && editinfo.rule.test (this.input.value)
} [object.prototype.toString.call (editinfo.rule)] ، _ self = this ؛
// إذا كانت الشروط لا تفي بالمتطلبات ، فقم بتعديل المعلومات المطالبة
حالة typeof! = "boolean" && (editinfo.message = الحالة) ؛
إذا (الحالة === صحيح) {
this.inputtd.innerhtml = this.input.value ؛
this.inputtd = null ؛
}آخر{
تنبيه (editinfo.message) ؛
// استخدم input.focus () مباشرة تحت Firefox ولا يمكن تنفيذه دون تنفيذ setTimeOut
setTimeOut (function () {_ self.input.focus ()} ، 0) ؛
}
} ،
Theadhover: وظيفة (هـ) {
var elem = e.srcelement || E.Target ؛
if (elem.nodename.toLowerCase () === 'td' && this.closconfig.on) {
this.closconfig.totd = elem.getAttribute ('clos') ؛
! hasclass (elem ، 'thover') && addClass (elem ، 'thover') ؛
}
} ،
theadout: وظيفة (e) {
var elem = e.srcelement || E.Target ؛
if (elem.nodename.toLowerCase () === 'td' && this.closconfig.on) removeclass (elem ، 'thover')
} ،
DragorWidth: Function (e) {
var elem = e.srcelement || E.Target ، WidthConfig = this.widthConfig ؛
// تنفيذ السحب والإفلات
if (elem.nodename.toLowerCase () === 'td') {
this.closconfig.td = elem.getAttribute ('clos') ؛
AddListener (وثيقة ، 'mousemove' ، bindaseventlistener (this ، this.dragmove)) ؛
AddListener (وثيقة ، 'mouseup' ، bind (this ، this.dragup)) ؛
this.closconfig.on = true ؛
sys.ie؟this.head.setCapture (false): e.preventDefault () ؛
}
// أداء التحجيم العرض
if (elem.nodename.toLowerCase () === 'div') {
sys.ie؟ (E.CancelBubble = true):
// إذا كان آخر TD ، فلن يتم تحجيم DIV
if (this.headtds [this.headtds.length-1] === Elem.ParentNode) return
sys.ie؟this.head.setCapture (false): e.preventDefault () ؛
WidthConfig.x = E.ClientX ؛
WidthConfig.td = elem.parentNode ؛
WidthConfig.nexttd = WidthConfig.td.nextsibling ؛
بينما (widthconfig.nexttd.nodename.toLowerCase ()! = "TD") {
WidthConfig.nexttd = widthConfig.nexttd.nextsibling ؛
} ؛
WidthConfig.tdwidth = WidthConfig.td.offsetWidth ؛
WidthConfig.nextTdWidth = WidthConfig.nexttd.offsetWidth ؛
this.line.style.height = this.table.offsetheight +"px" ؛
AddListener (وثيقة ، 'mousemove' ، bindaseventListener (هذا ، this.widthmove)) ؛
AddListener (وثيقة ، 'mouseup' ، bind (this ، this.widthup)) ؛
}
} ،
DragMove: Function (E) {
window.getSelection؟ window.getSelection (). removeallranges (): document.selection.empty () ؛
setStyle (this.div ، {display: "block" ، left:
} ،
Dragup: Function () {
var closconfig = this.closconfig ، الصفوف = this.table.getElementsByTagName ('tr') ، td ، n ، o ، i = 0 ، l = rows.length ؛
this.div.style.display = "none" ؛
removelistener (وثيقة ، 'mousemove') ؛
removelistener (وثيقة ، 'mouseup') ؛
sys.ie && this.thead.releasecapture () ؛
closconfig.on = false ؛
if (closconfig.totd === null) return ؛
removeClass (this.headtsds [closconfig.totd] ، 'thover') ؛
// لا يتم إجراء استبدال العمود في نفس العمود
if (closconfig.td === rainconfig.totd) return ؛
// فحص استبدال العمود
if (closconfig.td*1+1 === closconfig.totd*1) {
n = closconfig.totd ؛
o = closconfig.td ؛
}آخر{
n = closconfig.td ؛
o = closconfig.totd ؛
}
لـ (؛ i <l ؛ i ++) {
td = الصفوف [i] .getElementSbyTagName ('td') ؛
الصفوف [i] .insertBefore (td [n] ، td [o]) ؛
}
// إعادة تحديد الرأس
لـ (i = 0 ، l = this.headtds.length ؛ i <l ؛ i ++)
this.headtds [i] .setAttribute ('clos' ، i) ؛
closconfig.totd = closconfig.td = null ؛
} ،
WidthMove: Function (E) {
window.getSelection؟ window.getSelection (). removeallranges (): document.selection.empty () ؛
var widthconfig = this.widthConfig ، x = e.clientx - widthConfig.x ، left =
if (clientx <widthConfig.x && widthconfig.x - clientx> widthConfig.tdwidth -this.minwidth) {
left = widthconfig.x - widthConfig.tdwidth+this.minwidth ؛
}
if (clientx> widthConfig.x && clientx - widthConfig.x> widthConfig.nexttdwidth -this.minwidth) {
left = widthconfig.x + widthConfig.nexttdwidth-this.minwidth ؛
}
setStyle (this.line ، {display: "block" ، left: Left+"PX"}) ؛
} ،
widthup: function () {
this.line.style.display = "none" ؛
var widthconfig = this.widthConfig ، x = parseint (this.line.style.left) - widthConfig.x ؛
WidthConfig.nexttd.style.width = widthConfig.nextTdWidth -x -1 +'px' ؛
WidthConfig.td.style.width = widthConfig.tdwidth + x -1 + 'px' ؛
sys.ie && this.thead.releasecapture () ؛
removelistener (وثيقة ، 'mousemove') ؛
removelistener (وثيقة ، 'mouseup') ؛
}
}) ؛
window.onload = function () {
وظيفة checkName (val) {
إذا كان (Val.Replace (/^/s+$/g ، '') === '') return 'لا يمكن أن يكون إدخال الاسم فارغًا ؛
if (val.replace (/^/s+|/s+$/، ''). length> 10) return "طول الاسم لا يمكن أن يكون أكبر من 10 أحرف" ؛
if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) return "لا يمكن إدخال الاسم إلا باللون الصيني أو الحروف" ؛
العودة صحيح.
} ؛
وظيفة checkRemark (val) {
إذا (val.replace (/^/s+$/g ، '') === '') return 'لا يمكن أن تكون إدخال الملاحظة فارغة "؛
if (val.replace (/^/s+|/s+$/، ''). طول> 15) لا يمكن أن يكون طول الملاحظات أكبر من 15 حرفًا "؛
if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) return 'يمكن أن تدخل فقط في مساحة السطح السفلي الصيني' ؛
العودة صحيح.
}
مجموعة var = [
{id: 0 ، اكتب: "int"} ،
{id: 2 ، اكتب: "سلسلة" ، تحرير: {القاعدة: checkName ، الرسالة: ''}} ،
{id: 3 ، اكتب: "Date" ، edit: {rerle:/^/d {4}/-/d {2}/-/d {2} $/، message:
{id: 4 ، اكتب: "سلسلة" ، تحرير: {القاعدة: checkRemark ، الرسالة: ''}}
] ؛
جدول جديد ($ ("tab") ، set) ؛
}
</script>
</body>
</html>
الحشرات المعروفة:
لا يلف النص الصيني IE6 تلقائيًا
إنه لأمر مزعج حقًا ألا يلفها الحروف والأرقام تلقائيًا تحت IE.
يبدو أن النقر على متصفح Chrome يمثل مشكلة كبيرة وسيكون إجراء اختبارات محلية أفضل