Develop Reference

How Do I Access Elements in Specific Sections of A Table

how would I access the hair with Javascript (as in Black)? I tried using normal accessing from within other elements gradually through defining variables accessing the table and tr it was in, but it still didn't work. Please respond if you have an answer. Thx
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align: center;">Number</th>
<th id="name" style="text-align: center;">Name</th>
<th id="name" style="text-align: center;"></th>
</tr>
<tbody class="content">
<div class="one">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down">
<button onclick="toggleText()" type="button" class="collapsible" id="1">
+
</button>
</td>
</tr>
</div>
<tr class="panel" id="one-a" colspan="3">
<div class="panel">
<td class="expand">
<div class="hair">
Black
</div>
</td>
</div>
</tr>
</tbody>
</table>
It may have something to do with the table being a table and not being able to fetch certain values like normal code.

Try
var hairColor = document.getElementsByClassName("hair")[0].innerHTML;
it will return an array of elements , your array will be of length 1 (because you only have one tag with the specified class, "hair" in this case) so the value you need is of index 0.
How to use JavaScript to get elements by class name?

How to remove class to row-id?

I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?

$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>

How to create simple tree exmpdable/collapsible view using angularjs and specific data structure

I need tree view control it should just appear as below:
http://plnkr.co/edit/JAIyolmqPqO9KsynSiZp?p=preview
+Parent
child
+Parent
child
child
child
child
+Parent
child
child
child
child
child
child
child
I just need simple tree as shown above, just need collapse- expand features and single level.
using angular 1.6 and bootstrap.
My collection data is - "List of Tasks" and each task has - "List Of Items"
how I could bind this and achieve above tree.
went though other links, but it seems complex with more features
please suggest any option.

Since you need a single level, you can use html table and 2 ng-repeats 1 for tasks and the other for child tasks. You can also also add a buttons to show/hide children.
<table class="table table-hover">
<thead>
<tr>
<td><b>ID</b></td>
<td><b>Task</b></td>
<td></td>
</tr>
</thead>
<tbody ng-repeat="task in ListOfTasks" ng-init="task.showChildren = false">
<tr>
<td>
<span class="label label-success">{{$index+1}}</span>
<span>
<a class="label label-danger" ng-show="!post.showChildren" ng-click="task.showChildren = true">+</a>
<a class="label label-primary" ng-show="post.showChildren" ng-click="task.showChildren = false">-</a>
</span>
</td>
<td>
{{task.TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
<tr ng-show="task.showChildren">
<td>
<div class="row">
<div class="col-sm-offset-1">
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td><b>Child Task</b></td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="childTasks in task.CHILD_TASKS">
<td class="col-sm-1">
<span class="label label-success">{{ $index + 1 }}</span>
</td>
<td>
{{childTasks.CHILD_TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
The table would look like
Also if you don't wont to get all the data at start, you may getchildren on expand click

Angularjs : How to use <md-radio-button> inside <table> with ng-repeat

I am displaying data as a table. The user has to select a row from the table. So I tried using <md-radio-button>, But it is throwing an error saying <md-radio-group> directive is missing. Could anyone tell me how to use <md-radio-button> inside with ng-repeat?
<table md-table>
<thead md-head>
<tr>
<td md-cell></td>
<td md-cell>ID</td>
<td md-cell>Demand</td>
<td md-cell>Code</td>
</tr>
</thead md-head>
<tbody md-body>
<md-radio-group ng-model="test" class="md-primary">
<tr md-row ng-repeat="cluster in clusters">
<td md-cell>
<md-radio-button ng-value="cluster.checked"/>
</td>
<td md-cell>{{cluster.id}}</td>
<td md-cell>{{cluster.demand}}</td>
<td md-cell>{{cluster.code}}</td>
</tr>
</md-radio-group>
</tbody>
</table>

You can use md-radio-group and md-radio-button inside table exactly the way you did. The reason your code doesn't work is not obeying the "always use a dot rule".
this is a working example

Here is the code,
<md-divider></md-divider>
<md-radio-group ng-model="cc.selectedIndex">
<div ng-repeat='person in cc.contacts' class="row">
<div flex layout='row' layout-padding layout-align="start center">
<div flex style="max-width:200px;">
{{person.Demand}}
</div>
<md-radio-button ng-value="person.ID" class="md-primary">
{{person.Code}}
</md-radio-button>
</div>
</div>
</md-radio-group>
<md-divider></md-divider>
DEMO

jQuery .toggle() to not show/hide all within .on 'click'?

I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>

You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.

I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!