আমি এএসপিএক্সে একটি টেবিল তৈরি করেছি। আমি প্রয়োজনীয়তার ভিত্তিতে কলামগুলির মধ্যে একটিটি আড়াল করতে চাই visibleতবে এইচটিএমএল টেবিল বিল্ডিংয়ের মতো কোনও বৈশিষ্ট্য নেই । আমি কীভাবে আমার সমস্যা সমাধান করতে পারি?
আমি এএসপিএক্সে একটি টেবিল তৈরি করেছি। আমি প্রয়োজনীয়তার ভিত্তিতে কলামগুলির মধ্যে একটিটি আড়াল করতে চাই visibleতবে এইচটিএমএল টেবিল বিল্ডিংয়ের মতো কোনও বৈশিষ্ট্য নেই । আমি কীভাবে আমার সমস্যা সমাধান করতে পারি?
উত্তর:
এই উদ্দেশ্যে আপনাকে স্টাইল শীট ব্যবহার করতে হবে।
<td style="display:none;">
td:first-child { display:none; }
nth-childপুরো কলামটি গোপন করতে আপনি সিএসএস নির্বাচক ব্যবহার করতে পারেন :
#myTable tr > *:nth-child(2) {
display: none;
}
এটি অনুমানের অধীনে কাজ করে যে কলাম এন এর একটি ঘর (এটি একটি thবা একটি td) সর্বদা তার সারির Nth শিশু উপাদান।
আপনি যদি কলাম নম্বরটি গতিশীল হতে চান তবে আপনি এখানে querySelectorAllবা অনুরূপ কার্যকারিতা উপস্থাপন করে এমন কোনও ফ্রেমওয়ার্ক ব্যবহার করে তা করতে পারেন jQuery:
$('#myTable tr > *:nth-child(2)').hide();
(JQuery সমাধানটি লিগ্যাসি ব্রাউজারগুলিতেওnth-child কাজ করে যা সমর্থন করে না )।
আপনি এটি ব্যবহার করতে পারেন:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
তাদের মধ্যে পার্থক্য যে "লুকানো" ঘরটি আড়াল করে তবে এটি স্থানটি ধারণ করে তবে "ধসের" সাথে স্থানটি প্রদর্শনের মতো রাখা হয় না: কিছুই নয়। পুরো কলাম বা সারিটি ছড়িয়ে দেওয়ার সময় এটি উল্লেখযোগ্য।
visibility: collapseসেল প্রদর্শন / লুকিয়ে রাখার জন্য বিশেষভাবে নকশা করা হয়েছে, যেহেতু এই এবং এর মধ্যে ঘরের প্রস্থ / উচ্চতা পুনরায় গণনা করার সময় একটি তফাত রয়েছে display:none। বিকাশকারী.মোজিলা.অর্গ.ইন-
কোসের উত্তর প্রায় সঠিক, তবে ক্ষতিকারক পার্শ্ব প্রতিক্রিয়া হতে পারে। এটি আরও সঠিক:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
সিএসএস (ক্যাসকেডিং স্টাইল শিটস) এর সমস্ত বাচ্চার কাছে ক্যাসকেড বৈশিষ্ট্য তৈরি করবে । এর অর্থ এই যে *:nth-child(1)প্রথম লুকাবো tdপ্রতিটি tr এবং সর্বপ্রথমে উপাদান লুকিয়ে tdশিশুদের হয়েছে। আপনার যদি কারও কাছে tdবোতাম, আইকন, ইনপুট বা নির্বাচন পছন্দ মতো জিনিস থাকে তবে প্রথমটি লুকিয়ে রাখা হবে (ওফস!)।
আপনার কাছে বর্তমানে গোপনীয় জিনিসগুলি না থাকলেও, যদি আপনার কোনও যুক্ত করার দরকার হয় তবে রাস্তায় হতাশার চিত্র দিন। আপনার ভবিষ্যতের আত্মাকে এরকম শাস্তি দেবেন না, এটি ডিবাগ করার জন্য ব্যথা হতে চলেছে!
আমার উত্তর শুধুমাত্র প্রথম লুকাবো tdএবং thসব trমধ্যে #myTableআপনার অন্যান্য উপাদান নিরাপদ রাখা।
বুটস্ট্র্যাপ লোকেরা .hiddenক্লাস অন ব্যবহার করে <td>।
আপনি কোল উপাদানটি https://developer.mozilla.org/en/docs/Web/HTML/Element/col ব্যবহার করে একটি কলামও লুকিয়ে রাখতে পারেন
সারণীতে দ্বিতীয় কলামটি গোপন করতে:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
জ্ঞাত সমস্যা: এটি গুগল ক্রোমে কাজ করবে না। দয়া করে বাগের জন্য https://bugs.chromium.org/p/chromium/issues/detail?id=174167 এ ভোট দিন
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>টেবিলের মধ্যে .HideFull Column এবং th। hidecol ব্যবহার করুন You আপনার স্বতন্ত্রভাবে টিডিতে ক্লাস যুক্ত করার দরকার নেই কারণ এটি সমস্যা হবে কারণ সূচি প্রতিটি টিডির মনে নাও থাকতে পারে।
বনাম দেব যা যাচাই করতে পারেন তা করতে পারেন যা জাভাস্ক্রিপ্টের সাথে শৈলী নির্ধারণ করে কলামগুলির মাধ্যমে পুনরাবৃত্তি করে এবং সেই শৈলীর জন্য নির্দিষ্ট সূচীতে টিডি উপাদানটি সেট করে।
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);