انتخاب و نمایش یک آیتم از لیست

با سلام
کدهاتون رو هم قرار بدید لطفا

ببینین این یه سطر جدول من هست

<tr>
    <td>c34b28aa95e34a32b887d7408e7c1e44</td>
    <td>saman</td>
    <td>4</td>
    <td>2019-09-05 11:33:14</td>
    <td>192.168.100.21</td>
    <td>windows</td>
    <td>
        <button onclick=showSection(c34b28aa95e34a32b887d7408e7c1e44,9); class="btn btn-primary btn-xs"
    id="c34b28aa95e34a32b887d7408e7c1e44">Show</button>
    </td>
</tr>

همونطور که مشاهده می کنید وقتی روی دکمه show کلیک میشه 2تا پارامتر برای showSection ارسال میشه که اولی مربوط به شماره سخت افزار کاربر و دومی مربوط به آی دی کاربر توی همون سطر هست. از طرفی یه منو آکاردئونی هم هست که همه کاربرا رو لیست میکنه و برای هر کاربر با توجه به تعداد شماره سخت افزار زیر منو ایجاد میکنه. مثلا تو کد زیر کاربر saman رو نشون میده و زیر منوش که مربوط به شماره سخت افزاراش میشه. این حالت رو برای همه کاربرا فرض کنید.شبیه کد زیر:

<li>
    <a href="javascript:" id="1" class="submenu-indicator-minus">
        <span class="ink animate-ink" style="height: 286px; width: 286px; top: -126.4px; left: 15px;"></span>saman<span class="submenu-indicator">+</span>
    </a>
    <ul class="submenu" id="submenu1" style="display: block;">
        <li>
            <a id="link-text" class="active1link c31b28aa95e34a32b887d7408e7c1e44" href="javascript:">c31b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span>
            </a>
        </li>
        <li>
            <a id="link-text" class="active1link c33b28aa95e34a32b887d7408e7c1e44" href="javascript:">c33b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span></a>
        </li>
        <li>
            <a id="link-text" class="active1link c34b28aa95e34a32b887d7408e7c1e44" href="javascript:">c34b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span></a>
        </li>

        <li>
            <a id="link-text" class="active1link c35b28aa95e34a32b887d7408e7c1e44" href="javascript:">c35b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span></a>
        </li>
    </ul>
</li>

الان showSection کدی که اجرا میکنه صرفا نمایش این منو هست که:

function showSection(targetId, userid) {
        var x = document.getElementById("message-section");
        if (x.style.display === "none") {
            x.style.display = "block";
        }

حالا من میخوام وقتی روی show مربوط به هر سطر کلیک شد بیاد و توی این منو فقط آیتم مربوط به اون یوزر و آیتم مربوط به اون سخت افزار رو نشون بده و بقیه رو مخفی کنه. مثلا تو مثال بالا اگر روی سطر مربوط به سخت افزار c33 کلیک شد توی منو فقط آیتم saman و توی زیر منوش فقط آیتم c33 رو نشون بده و بقیه کاربرا و آیتم ها مخفی بشه.

امیدوارم منظورم رو رسونده باشم.
ممنون میشم راهنمایی کنید

چند بار خوندم، واللا درست جا نیفتادش مقصودتون.

عزیزم شما که کدهارو قرار میدی، لطف کن همیشه عکس از خروجی هم بزار، هم جدولت رو بشه دید و هم فهرست هایی که منظورت هستش.

عکس رکوردهای جدول رو از این لینک میتونید ببینید(http://s5.picofile.com/file/8372630742/3.PNG)
عکس مربوط به منو هم که قراره یوزرهارو لیست کنه رو از این لینک میتونید ببینید(http://s4.picofile.com/file/8372629884/2.PNG)

الان شما میبینید که اولا توی منو همه کاربرا لیست شدن و ثانیا توی زیرمنو ها همه ی شماره سخت افزارهای مربوط به کاربر نشون داده میشه. مثلا تو تصویر منو برای کاربر ali همه ی شماره ها هست. حالا من میخوام کاری کنم که بر فرض اگر روی show سطر اول که مربوز به کاربر ali هست کلیک شد توی منو اولا فقط آیتم مربوط به یوزر ali110 رو نشون بده و ثانیا توی زیرمنوی اون فقط شماره C35ای که روی باتن show کلیک شده نمایش داده بشه.

امیدوارم منظورم رو رسونده باشم.
ممنون میشم راهنمایی کنید

الان خیلی مفهوم تر شدش ممنون.

این فهرست دوم تون که شامل کاربران میشه، زیر گزینه هاش چیه؟ یعنی چرا از اول 4 تا هستش؟ این 4 تا چی هستند که شما یکی شون رو می خواید برگزینید؟
همه ی این 4 مورد مرتبط هستند به کاربر مورد نظر؟ یا اینکه سه تاشون اضافی هستند؟

اگر اضافی هستند، خب از اول جدول نباید چنین جدولی رو طراحی کنید.

فکر می کنم پیاده سازی اولیه تون خطاهایی داره، یعنی اینکه شما می تونید جای اینکه این جدول بزرگ رو از اول ایجاد کنید و بعدش بخواید فقط یک بخش کوچیکی رو ازش بهره ببرید، کلا چنین جدولی رو نسازید.
هر وقت کسی روی دکمه نمایش کلیک کرد، بر اساس اطلاعات ورودی یک جدول کوچک براش بسازید.

این فهرست دوم برای همه کاربران 4تا نیست و متفاوته. با توجه به سخت افزاری که کاربر ازش استفاده کرده و لاگین کرده دسته بندی شده. فرض کنید این کاربر با 4 دیوایس مختلف تا الان لاگین کرده و پیام ارسال کرده. حالا این پیام ها با توجه به دیوایس جدا شدن و توی اون جدول بالا هم نمایش داده میشه. حالا میخوام روی show مربوط به هر کاربر و دیوایسی که کلیک شد فقط اون نمایش داده بشه.
مسئله بعدی اینکه این 4تا مورد اضافی نیستند و همچنین برای کاربرای مختلف هم تعدادشون متفاوته.

خوب ببینید دوتا بحث هست:
اول اینکه ادمین نیاز داره همه پیام ها بهش در ابتدا نشون داده بشه.
و دوم اینکه یه قابلیت اضافی میخوایم ایجاد کنیم که بر فرض روی نمایش هر سطر که کلیک شد فقط اطلاعات مربوط به اون سطر نمایش داده بشه.

الان سوال من توی این قسمت دوم هست که چطوری بعد از کلیک روی show ،توی منو فقط آیتم مربوط به اون سطر نشون داده بشه.

حالا اگر ازین بحث ها بگذریم، بر اساس داده های شما، روشی باید بهره بگیرید اضافه کردن ویژگی data-id به برخی عناصرتون هستش.

<li data-userid="userid">
    <a href="javascript:" id="1" class="submenu-indicator-minus">
        <span class="ink animate-ink" style="height: 286px; width: 286px; top: -126.4px; left: 15px;"></span>ali110<span class="submenu-indicator">+</span>
    </a>
    <ul class="submenu" id="submenu1" style="display: block;">
        <li>
            <a data-hardwareid="c31b28aa95e34a32b887d7408e7c1e44" class="active1link" >c31b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span>
            </a>
        </li>
        <li>
            <a data-hardwareid="c33b28aa95e34a32b887d7408e7c1e44" class="active1link"  >c33b28aa95e34a32b887d7408e7c1e44<span class="submenu-indicator">+</span></a>
        </li>
         ....
    </ul>
</li>

متوجه منظورتون نشدم!!
data-id قرار بدم بعدش چیکار کنم؟

در بازسازی که برای کدتون کردم، به این بخش ها دقت کنید:

1 data-userid="userid" --> ویژگی کمکی
2 data-hardwareid="c31b28aa95e34a32b887d7408e7c1e44" --> ویژگی کمکی
3 class="active1link" --> فقط همین کلاس
4 id="link-text" --> حذف شدند

الان شما برای هر کاربر li دارید، و به کمک data-userid می تونید اون li رو یافت کنید.
الان شما برای هر سخت افزار یک li دارید، و به کمک data-hardwareid ابتدا a و سپس پدرش، li یافت کنید.

حالا تابعی که صحبتش رو کردید (showSection)، و این دو ورودی رو می گرفت، می تونه به عناصر مورد نظرش دسترسی داشته باشه و اونهارو به نمایش دربیاره (display = "block").

الان برای این تیکه آخر میشه بگید دقیقا چیکار باید کنم؟ من هرجوری میزنم و log میگیرم آی دی 1 رو برمیگردونه!!

عزیزم، اول باید عناصر رو مجدد به روش جدید بازسازی کنی.
دو: از چی log میگیری که عدد یک رو بر می گردونه؟

عناصر رو که طبق فرمایش شما بازسازی کردم. مشکلم الان اون قسمت تابع showSection هست. همون قسمت showSection از userid ورودی log میگیرم همش 1 برمیگردونه!!

این دوتا مبحث رو تسلط داری؟
1)
https://www.w3schools.com/tags/att_global_data.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
https://api.jquery.com/data/

2)
https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors
https://www.w3schools.com/css/css_attribute_selectors.asp

دیگه با همین دوتا این مسئله حل میشه.

htmlElement.dataset.userid

اینجوری مقدارش رو بر می گردونه.

کدش رو هم نوشتم، همچین چیزی باید جواب بده.
(البته شما جدول کاربران رو کامل نذاشتین که بشه بهتر انتخابگر رو مقداردهی کنم. بطور پیش فرض هم همه ی li ها باید پنهان باشند (none))

function showSection(hardwareid, userid) {
    let li = document.querySelector(`ul li[data-userid="${userid}"]`);
    li.style.display = "block";
    li = document.querySelector(`.submenu li[data-userid="${hardwareid}"]`);
    li.style.display = "block";
}

ممنون از محبت شما
اون چیزی که میخواستم رو با لطف شما اوکی شد فقط الان یه مشکل ریزی که هست اینه که در ابتدا کلا لیست none هست. بعد روی هر show که زده میشه آیتم مربوط به اون block میشه. ولی وقتی روی show توی یه سطر دیگه کلیک میشه آیتم جدید به قبلی اضافه میشه و تو منو هر دوتارو نشون میده.(و به همین ترتیب برای بقیه) چجوری میشه آیتم قبلی رو دوباره none کرد و جدیدرو block کرد؟؟

ممنون میشم راهنمایی کنید

چه خوب، خواهش میکنم.

یعنی شما در هر لحظه می خواید تنها ی دونه از li ها به نمایش در بیاد؟
اگر اینطوره: یک راه حل می تونه این باشه که از روش display: block بصورت درون خطی استفاده نکنید. بلکه به روش اضافه کردن یک کلاس به نام showItem اون li رو کلاس جدید بدید.

.showItem {
display: block !important;
}

بنابراین زمانی که روی دکمه ای کلیک میشه، باید دو کار صورت بگیره:
1) ابتدا در جدول اصلی li هایی که این کلاس رو دارند پیدا کنید و این کلاس رو ازشون حذف کنید.
2) سپس به li های موردنظر جدیدتون، این کلاس رو اضافه کنید.