PA -help po -- table row selecting magkakaron ng color

[neko021403]

Good day admin ,and members of the group ..

gusto ko po sana yung table row pag click mag kakaron ng kulay...

ngayon po meron po ako nakita sa net , sinundan ko lang po pero
ang problema po once mag REFResh PO YUNG page AYAW NA PO NYU GUMANA..

eto po yung code .. Please help po . thank you po

-----------------CODE--------------------------------
var table = document.getElementById('myTable');

var rows = document.getElementsByTagName('tr');

for(var i=1; i < rows.length;i++){
var currentRow = table.rows;

currentRow.onclick=function(){

[...this.parentElement.children].forEach((el)=>el.classList.remove('selected-row'));
this.classList.add("selected-row");

}
}
--------------------------------------------------------

 

[Strawberry_]

maganda si bootstrap

 

[shigawaka]

double check mo yung javascript mo. Anjan lang yung sagot

 

[neko021403]

maganda si bootstrap

unfortunately w'ere not allowed to use bootstrap po ..


really dont know wha to do , ayaw nya talga gumana ng matino ..

double check mo yung javascript mo. Anjan lang yung sagot

but i dont know what when wrong po .. please help me .. beginner lang po ..

 

[shigawaka]

láρág mo whole code mo dito.

 

[FinestWork]

Much better gawa ka ng code sa codepen or jsfiddle, para ma-test namin kung saan ka nagkakamali

 

[neko021403]

láρág mo whole code mo dito.

nkaapost na po yung codee .. please help .. anjan na po yung code kasam po sa post ko po

Much better gawa ka ng code sa codepen or jsfiddle, para ma-test namin kung saan ka nagkakamali

naka post na po yung code kasama po sa post ko yung code please help

 

[FinestWork]

Ang problema ay nandito:

for(var i=1; i < rows.length;i++){
var currentRow = table.rows;
}

Nag-i-start ka agad sa 1 dapat ang value ay 0. Imagine-in mo isa lang item sa table, mag-thro-throw si javascript ng undefined kasi hindi nag-e-exist 'yung child kaya dapat i-set mo ito sa 0.

Isa pa ay 'yung: var currentRow = table.rows;, nag-se-set ka ng current row sa loop pero ang sinet mo ay 'yung buong rows na, dapat lagyan mo ng index 'yung table.rows para ma-attach mo 'yung onClick function base doon current row sa loop, kaya: var currentRow = table.rows[i];.

Example:

 

[shigawaka]

naunahan ako sa solution. hahahaha

 

[neko021403]

Ang problema ay nandito:

for(var i=1; i < rows.length;i++){
var currentRow = table.rows;
}

Nag-i-start ka agad sa 1 dapat ang value ay 0. Imagine-in mo isa lang item sa table, mag-thro-throw si javascript ng undefined kasi hindi nag-e-exist 'yung child kaya dapat i-set mo ito sa 0.

Isa pa ay 'yung: var currentRow = table.rows;, nag-se-set ka ng current row sa loop pero ang sinet mo ay 'yung buong rows na, dapat lagyan mo ng index 'yung table.rows para ma-attach mo 'yung onClick function base doon current row sa loop, kaya: var currentRow = table.rows[i];.

Example:

ginawa ko na po yan .. ayaw pa din po .. nag seselect naman po sya pero pag ni refresh po nawawala po yung select effect nya . .ayaw po ma select , ayaw mag karon ng kulay uli ..

gumagana po sya , nag seselect na , nag kakaron ng kulay pero once mag refresh o mag load yung page uli nawawala yung select effect nya.. nawawala po ...


tapos pag mag click ako ng MENU SIDEBAR ko na meron onClick, nag kakaro na naman po sya ng selection effect ..

pero once mag load uli yung page , nawawala na naman po ..

ginawa ko na po yan .. ayaw pa din po .. nag seselect naman po sya pero pag ni refresh po nawawala po yung select effect nya . .ayaw po ma select , ayaw mag karon ng kulay uli ..

gumagana po sya , nag seselect na , nag kakaron ng kulay pero once mag refresh o mag load yung page uli nawawala yung select effect nya.. nawawala po ...

parang ganito po , nag sasaing kapo , may apoy yung kalan mo , tapos pumunta ka lang sa kwarto mo saglit bigla nawala na po yung apoy sa kalan mo .. .ganun po ..

tapos sisindihan mo uli yung kalam mo , magkakaron uli ng apoy , tapos pupunta ka naman uli sa kwarto tapos pag balik mo po wala na naman sindi yun kalan mo, wala na naman apoy

ito po yung tutorial ginya ko lang po

 

[FinestWork]

Post mo po dito 'yung buong code, or tignan mo 'yung console sa dev tools.

 

[neko021403]

Post mo po dito 'yung buong code, or tignan mo 'yung console sa dev tools.

// TABLE SELECTION
var table = document.getElementById('myTable');
var rows = document.getElementsByTagName('tr');
for(var i=0; i < rows.length;i++){
var currentRow = table.rows;
currentRow.onclick=function(){

[...this.parentElement.children].forEach((el)=>el.classList.remove('selected-row'));
this.classList.add("selected-row");



}
}

Post mo po dito 'yung buong code, or tignan mo 'yung console sa dev tools.

meron pa akong nakita ibang version naman nyan nitry ko din kaso same din .. nawawala pa din yung effect nya once mag refresh si page ....


baguhan pa lang po talaga ako ,sir . .sana po matulungan nyu po ako kung ano problema po ..

di po kaya sa click click? small 'onclick' po kasi tapos meron big 'onClick'

Post mo po dito 'yung buong code, or tignan mo 'yung console sa dev tools.

MAY NAPANSIN DIN PO ako pag nag click ako sa element na my "onClick" bumabalik yung selection effect nya ...

bali bagu bumalik yung selection effect nya kelanga ko muna mag click ng element na meron "onClick"

 

[OLD STRACKS]

Up

 

[FinestWork]

Paanong nawawala 'yung effect? Hindi na nagana o nawawala 'yung kulay? Tsaka ayan na ba 'yung buong javascript code?

 

[shigawaka]

yung sinasabi naming buong code is kasama na yung html mismo aside sa javascript mo. Di kasi namin ma determine kung saan ka nag kulang kung yung snippet lang pinapakita mo.

 

[neko021403]

Up

pa help po please

yung sinasabi naming buong code is kasama na yung html mismo aside sa javascript mo. Di kasi namin ma determine kung saan ka nag kulang kung yung snippet lang pinapakita mo.

<div className='search_bar'>
<input type="text" />
<div className='search_icon'><AiIcons.AiOutlineSearch style={{fontSize:'30px'}} /></div>
</div>
<div className='user_list'>
<div className='list_of_user'>
<div className='group_user'><FaIcons.FaUsers/></div>
List of Users
</div>
<div className='all_users'>
<table id='myTable'>
<thead>
<tr><th><input type="checkbox" className='checkbox' /></th>
<th>Id</th>
<th>Name</th>
<th>Email Address</th>
<th>Position</th>
<th>Region</th>
<th>District</th>
<th>Access Level</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{list.map((data)=>
<tr>
<td><input type="checkbox" className='checkbox' /></td>
<td>{data.ID}</td>
<td>{data.LNAME+','+data.FNAME+' '+data.MNAME}</td>
<td>{data.EMAIL}</td>
<td>{data.POSITION}</td>
<td>{data.REGION}</td>
<td>{data.DISTRICT}</td>
<td>{data.ACCES_LV}</td>
<td><AiIcons.AiOutlineEdit style={{fontSize:'25px',marginRight:'10px'}}/><AiIcons.AiOutlineDelete onClick={()=>{setopenDelModal(true)}} style={{fontSize:'25px'}}/></td>
</tr>)}

</tbody>
</table>
</div>

</div>
</div>
{openDelModal && <Deletemodal closeModalBtn={setopenDelModal} />}

</div>
);
};
export default Users;

Paanong nawawala 'yung effect? Hindi na nagana o nawawala 'yung kulay? Tsaka ayan na ba 'yung buong javascript code?

gumagan po pero nawawala din po ...


<div className='search_bar'>
<input type="text" />
<div className='search_icon'><AiIcons.AiOutlineSearch style={{fontSize:'30px'}} /></div>
</div>
<div className='user_list'>
<div className='list_of_user'>
<div className='group_user'><FaIcons.FaUsers/></div>
List of Users
</div>
<div className='all_users'>
<table id='myTable'>
<thead>
<tr><th><input type="checkbox" className='checkbox' /></th>
<th>Id</th>
<th>Name</th>
<th>Email Address</th>
<th>Position</th>
<th>Region</th>
<th>District</th>
<th>Access Level</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{list.map((data)=>
<tr>
<td><input type="checkbox" className='checkbox' /></td>
<td>{data.ID}</td>
<td>{data.LNAME+','+data.FNAME+' '+data.MNAME}</td>
<td>{data.EMAIL}</td>
<td>{data.POSITION}</td>
<td>{data.REGION}</td>
<td>{data.DISTRICT}</td>
<td>{data.ACCES_LV}</td>
<td><AiIcons.AiOutlineEdit style={{fontSize:'25px',marginRight:'10px'}}/><AiIcons.AiOutlineDelete onClick={()=>{setopenDelModal(true)}} style={{fontSize:'25px'}}/></td>
</tr>)}

</tbody>
</table>
</div>

</div>
</div>
{openDelModal && <Deletemodal closeModalBtn={setopenDelModal} />}

</div>
);
};
export default Users;

Paanong nawawala 'yung effect? Hindi na nagana o nawawala 'yung kulay? Tsaka ayan na ba 'yung buong javascript code?

opo yan lang po yung buong javascript nya



var table = document.getElementById('myTable');
var rows = document.getElementsByTagName('tr');
for(var i=0; i <rows.length;i++){
var currentRow = table.rows;
currentRow.onclick=function(){

[...this.parentElement.children].forEach((el)=>el.classList.remove('selected-row'));
this.classList.add("selected-row");



}
}

Good day admin ,and members of the group ..

gusto ko po sana yung table row pag click mag kakaron ng kulay...

ngayon po meron po ako nakita sa net , sinundan ko lang po ....

GUMANA NAMAN PO SYa....ang problema po once mag REFResh PO YUNG page AYAW NA PO NYa GUMANA..

tapos po napansin ko GUMAGANA po uli sya once mag click po ako ng element na meron 'onClick'..

eto po yung code .. Please help po . thank you po
------------------------------------------------

var table = document.getElementById('myTable');

var rows = document.getElementsByTagName('tr');

for(var i=0; i <rows.length;i++){
var currentRow = table.rows;

currentRow.onclick=function(){

[...this.parentElement.children].forEach((el)=>el.classList.remove('selected-row'));
this.classList.add("selected-row");



}
}
------------------------------------------------------------------------

**ETO PO YUNG HTML TABLE



<div className='search_bar'>
<input type="text" />
<div className='search_icon'><AiIcons.AiOutlineSearch style={{fontSize:'30px'}} /></div>
</div>
<div className='user_list'>
<div className='list_of_user'>
<div className='group_user'><FaIcons.FaUsers/></div>
List of Users
</div>
<div className='all_users'>
<table id='myTable'>
<thead>
<tr><th><input type="checkbox" className='checkbox' /></th>
<th>Id</th>
<th>Name</th>
<th>Email Address</th>
<th>Position</th>
<th>Region</th>
<th>District</th>
<th>Access Level</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{list.map((data)=>
<tr>
<td><input type="checkbox" className='checkbox' /></td>
<td>{data.ID}</td>
<td>{data.LNAME+','+data.FNAME+' '+data.MNAME}</td>
<td>{data.EMAIL}</td>
<td>{data.POSITION}</td>
<td>{data.REGION}</td>
<td>{data.DISTRICT}</td>
<td>{data.ACCES_LV}</td>
<td><AiIcons.AiOutlineEdit style={{fontSize:'25px',marginRight:'10px'}}/><AiIcons.AiOutlineDelete onClick={()=>{setopenDelModal(true)}} style={{fontSize:'25px'}}/></td>
</tr>)}

</tbody>
</table>

</div>


</div>

 

[shigawaka]

eto ni revise ko yung code.

1. yung sa tbody is purpose nyan pra di mag color yung thead at kukunin nya lang yung data mismo sa loop mo.
2. ang ginagawa ng javascript mo kay nilalagyan ng class name ng 'selected-row' kung WALA pa itong classname na 'selected-row' at kung MERON ay nireremove nya eto pra iisang row lang ang magkakakulay kung ibang row ulet ang sinelect mo.
3. kung ayaw parin gumana kahit ni refresh mo na baka meron error sa console log mo. Screenshot mo dito katulad ng sinabi ni finestwork.

 

[neko021403]

eto ni revise ko yung code.

1. yung sa tbody is purpose nyan pra di mag color yung thead at kukunin nya lang yung data mismo sa loop mo.
2. ang ginagawa ng javascript mo kay nilalagyan ng class name ng 'selected-row' kung WALA pa itong classname na 'selected-row' at kung MERON ay nireremove nya eto pra iisang row lang ang magkakakulay kung ibang row ulet ang sinelect mo.
3. kung ayaw parin gumana kahit ni refresh mo na baka meron error sa console log mo. Screenshot mo dito katulad ng sinabi ni finestwork.

Maraming salamat po.. check ku po sa bahay.

eto ni revise ko yung code.

1. yung sa tbody is purpose nyan pra di mag color yung thead at kukunin nya lang yung data mismo sa loop mo.
2. ang ginagawa ng javascript mo kay nilalagyan ng class name ng 'selected-row' kung WALA pa itong classname na 'selected-row' at kung MERON ay nireremove nya eto pra iisang row lang ang magkakakulay kung ibang row ulet ang sinelect mo.
3. kung ayaw parin gumana kahit ni refresh mo na baka meron error sa console log mo. Screenshot mo dito katulad ng sinabi ni finestwork.

helo po . . lalo po ayaw gumana .. nag white screen lang po sya .. ..

san ko po lalagay yung id na tbody? saka bakit po my '.rows' after ni tbody

 

[neko021403]

Parang gets ku na po.. merun din kasi aku iba components na merun din mga table..

Baka nababasa nila yung style ng isat isa..

Bukas try ku..

Parang magegets ku na kung bakit

Parang gets ku na po.. merun din kasi aku iba components na merun din mga table..

Baka nababasa nila yung style ng isat isa..

Bukas try ku..

Parang magegets ku na kung bakit

ayaw po talga ... kinoment ko lahat ng components na meron table din pati css nila ganun pa din .. pag refresh o reload yung page hindi na talga gumagana yung selection po ...

pero basta mag click lang ako ng element na meron onClick gagana na sya ..


hirap po nito .. mahirap pag mano mano atah . . need ko atah gumamit ng bootstrap o kung ano man ..

wala po atah solusyon sa ganito ..

 

[neko021403]

shigawaka sir sa GAWA ko po may problema .. working naman po yung code sa YøùTùbé ..

gumawa po kasi ako ng baong webpage ko po tapos isang component lnag , isang table lang din . . working naman yung code ...

meron lang po talga problema sa webpage ko po na ginawaw talga ..

MARAMING SALAMAT PO SA TULONG PO NINYO ..
salamat po