Printable View
سلام
در مقاله ای که آدرسش در ضم این خط هست برای ایجاد شماره گذاری خود کار ردیف های جدول از متغیر در CSS استفاده شده:
CSS automatic table row numbering - InfoHeap
حالا با این توصیف من می خوام قالب متنی خودم رو براش تنظیم کنم مثلا 3 رقمی باشه و اگر عدد کوچکتر از 3 زقم باشه الباقی ارقام 0 نوشته بشه مثلا اگر 1 بود بشه 001
ضمیمه 156061
سلام و روز خوش
اگر این المانهایی که نامبرینگ روشون پیاده میکنین از جنس list هستن که خیلی راحته،
ولی اگر مثل این مثال روی tr پیاده شدن کمی فرق میکنه.
این رو مشخص کنین.
سلام....نقل قول:
نوشته شده توسط mazoolagh
برای همین نمونه کدی که لینکشو ارسال کردم می خوام ....
سلام دوباره،
خب این با table هست.
برای نشون دادن مطلب یک table خالی گذاشتم:
<table id="tablex" border=1>
<thead>
<tr>
<th>Counter Created by CSS</th>
<th>Data</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
و با جاوااسکریپت 999 row براش درست کردم:
window.onload = function () {
const table_body = document.querySelector('#tablex tbody');
for (var i = 1; i < 1000; i++) {
var tr = table_body.insertRow(-1);
tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.innerHTML = `Row ${i}`;
}
}
و این هم style :
@counter-style pad-with-3-zeros {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
pad: 3 "0";
}
#tablex {
counter-reset: row-num;
}
#tablex td {
text-align: center;
}
#tablex tbody tr td:first-child::before {
counter-increment: row-num;
content: counter(row-num, pad-with-3-zeros) " ";
color: red;
}
و البته که در ie11 کار نمیکنه!
CSS Counter Styles | Can I use... Support tables for HTML5, CSS3, etc