Develop Reference

Very very simple qtip implementation

I want to create tooltips with qTip but they have a lot of ridiculous examples on their page that is waaaaaaaaaaay to complicated.
I want something like:
<span qtip="This is the text in my tooltip">This text has a tooltip</span>
is that possible?
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Meta code:
foreach Customer in List<Customers>
{
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
}
Is this possible with qtip or is there something else that can generate nice looking tooltips that works similar to the above?
Thanks for all help.

The docs suggest you should be able to use the following JS:
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
This should grab all elements with a qtip attribute, and apply qTip to them.
Though I'm curious what you mean by
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Are you saying your list of customers is added to dynamically without reloading the page? If so please show where that happens.
For safety you should really use $(document).ready if your customer list doesn't change.
Here's an example based on the question:
$(document).ready(function() {
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">
<table>
<tbody>
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
</tbody>
</table>

Change div color on checking all check boxes in hidden form

Have several problems and can't find solution. My code https://jsfiddle.net/46qybyrh/2/
Upper table HTML
<div class="block">
<table>
<tr>
<th>Nr.</th>
<th style="width: 200px">Task</th>
<th>Progresas</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>Air port scedules</td>
<td>0/3</td>
<td>
<button onclick="showDiv()">Expand</button>
</td>
</tr>
</table>
Hidden div
<div id="popup" class="popupbox">
<table class="block">
<tbody>
<tr>
<td></td>
<form>
<td>XML</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td>
<span>Deadline</span>
<input type="date" value="2017-08-24">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
<tr>
<td></td>
<form>
<td>Scedules</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td><span>Deadline</span>
<input type="date" value="2017-08-10">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
<tr>
<td></td>
<form>
<td>Infobox</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td><span>Deadline</span>
<input type="date" value="2017-08-14">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
</tbody>
</table>
<button onclick="hideDiv()">close</button></div>
Main aims of this code should be:
When press apply on each row, hidden div should not hide. Only information like comment, date, check box should change.
When all 3 check boxes are selected, upper tables first row (1 Air port scedules 0/3) should change its background color.
If deadline is close (let say 5 days till deadline) entire row should change background color.
If deadline is passed entire row should change its background color.
I know its a lot to ask but maybe someone of you will guide me on each of this steps.

I took your fiddle and put it into a codepen and messed around with it for a while. I was able to do what you wanted with a lot of jQuery. To learn jQuery, try www.w3schools.com/jQuery.
Here is the codepen:
https://codepen.io/pen/Ojxzje
In a few short steps:
I removed all the <form> tags, <input type='submit'>, and <tbody> to make the code cleaner (the submit button was causing problems with hiding the div as mentioned by #AngeLOL.
I reformatted the lower table a bit just to make it cleaner for my jQuery to work nicely. (I added a header row and removed the text from the blocks)
I included the jQuery library
I renamed your jQuery functions and created one more (open(), close(), and apply(). They are called by the buttons respectively.
Inside the open() function, I showed the rows in the second table with the class if items-[ID OF LIST WE ARE IN]. This way there could be a clean list of all of the tasks instead of having a new table for every new list.
The open() function also changes the button from expand to hide which calls the close function.
The close() function just hides the second table and changes the name of the button back to expand.
The apply() function is run whenever you press the Apply button. It performs two checks:
Checks all of the checkboxes in the table rows labeled .details-[ID WE ARE WORKING WITH] and if they are all checked, selects the list's row in the upper table. It adds a green color to the background.
It then finds all the dates and compares them with today's date (thanks again #angeLOL. If the date is within 5 days, it selects the row the date was on and changes the color. If the date has passed or is today, it colors the row red.
It's a lot of code and a bunch of reorganization, so let me know if you are having trouble understanding it and I can help walk through my steps.

use <button type="button">Apply</button> instead <input
type="submit" value="Apply">
Give to those elements you want to change its color an "id" attribute, so change its color by using style propierty of element
document.getElementById("elementID").style.backgroundColor = "#colorcode"
Here is an example of how to compare dates.

Hidden div is initially hidden. When you submit the form, you reload the page, so it is hidden again. You may want to handle click on button or form submit, prevent default behavior, submit data via AJAX request and then update your UI without page reload.
<form onsubmit="return handleSubmit(this);">
...
<input type="checkbox" onchange="updateCheckboxesState();">
</form>
<script>
function handleSubmit(form) {
// send AJAX request here...
// manipulate DOM if needed in AJAX callback
return false; // prevent submit
}
function updateCheckboxesState() {
var checkboxes = document.querySelectorAll("form input[type=checkbox]");
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes.item(i).checked) return; // break on first unchecked
}
// highlight the row here...
}
</script>
Similar flow can be applied to date inputs. The main idea is to update UI when value has been changed.
Background change can be achieved via changing element's inline style or changing it's class
var el = document.querySelector("div.block > table > tr");
el.style.backgroundColor = "#FF0000"; // inline
el.className = "highlighted"; // element class
Hope, this helps...

unable to get hidden field value using parent 's class name

My html code is-
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
Here, I want to get hidden field value. I can not use ID of hidden field to get its value because there are multiple rows which can contain hidden field with same ID as "taxID". I want to get this value using <tr> class name.
i.e. selected.
I am using below code to get its value but it is giving me 'undefined' value.
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
Alert statement shows undefined value. Am I missing something over here?

First, you cannot have multiple elements in a document with identical id values. That will have to be altered and that alone may solve your problem.
Second, your HTML is invalid. The input must be inside of a td.
Next, there is no reason to use getElementsByClassName() or getElementsByTagName() when you are looking for just one element - it's wasteful because you wind up searching the entire document when you are only interested in one item.
Also, both of those methods return "live" node lists which require re-scanning the entire document every time their results are referenced. The use cases for that are limited.
Instead use .querySelector() when you want to find just one item based on any valid CSS selector and .querySelectorAll() when you want to find a set of matching elements.
Assuming these things are corrected, you can do this:
var x = document.querySelector(".selected td input[type=hidden]");
alert(x.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234
<input type="hidden" value="000001234" id="taxID">
</td>
<td id="fullName">Y, X</td>
</tr>
</table>

You need to have a table be the parent of a tr, then the DOM lookup will properly work. Also as noted by #Rory McCrossan you will want to wrap td tag around your input element:
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<td><input type="hidden" value="000001234" id="taxID" /></td>
<td id="fullName">Y, X</td>
</tr>
</table>

(Posted solution on behalf of the OP).
After removing ID of hidden field, it is working fine. Edited code is:
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>

Select cell in html table generated by foreach

please help me with knockout.js code
I try select element in table by id and change it's css style, but all rows have same id and I can't using function getElementById. How I can do this simple thing ?
<tbody data-bind="foreach: times">
<tr>
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 0)> </td>
....
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 19)> </td>
<tr>
</tbody>

Try to use such code:
<tbody data-bind="foreach: times">
<tr>
<td data-bind="attr: {id: $index()}, click: $root.select.bind($data, $index(), 0)></td>
<tr>
</tbody>
Read more about attr binding here: http://knockoutjs.com/documentation/attr-binding.html

Id's should always be unique. Assign the same class to all elements you're interested in and use a bit of jquery:
document.getElementsByClassName('class_name')
EDIT: Good point. I was originally going to suggest using jquery and then remembered this function. If you are using jquery library, you can also try this:
$('.class_name').each(function(index) {
...do something...
});
EDIT: to answer your question, there are a few ways to do this:
$('.class_name').attr('id', new_id)
or
$('.class_name').addClass('class_name')
depending on what exactly you're trying to do

How to delete a particular row in a dynamically created html rows using Javascript DOM?

Here am trying to add a html rows by clicking on the add button and delete the added rows on clicking on the delete button.
Its working fine with adding rows as expected. But the problem is the delete function deletes the last row of the table instead of deleting that corresponding row.
As there is delete button in every row, only that corresponding row should be deleted when the delete button is clicked.
Here is the jsfiddle which demonstrates the situation better.
if the fiddle above failed to load as it does, Please refer the code below.
Thanks in advance
JAVSCRIPT
//function to add a row
function insSpec()
{
rl=document.getElementById("insSpecc").rows.length;
var a=document.getElementById("insSpecc").insertRow(rl);
var h=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
h.innerHTML='<div class="separator"><input type="text" name="client_prod[]" class="separator" id="competitor_prod'+rl+'" style="width:150px" >';
f.innerHTML='<input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5" />';
m.innerHTML='<input type="text" name="client_rrx[]" id="client_rrx'+rl+'" size="5" />';
n.innerHTML='<button class="del_img" onClick="delSpec('+rl+')">Delete</button></div>';
}
//function to delete a row
function delSpec(rl)
{
r=document.getElementById("insSpecc").rows.length;
if(r!=2)
{
document.getElementById("insSpecc").deleteRow(r-1)
}
}
HTML
<table id="insSpecc" width="100%;">
<div class="separator">
<tr>
<td><span>Product</span></td>
<td><span>NRX(Qty)</span></td>
<td><span>RRX(Qty)</span></td></tr></div>
<tr>
<td><input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"></td>
<td>
<input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input">
</td>
<td>
<input type="text" id="client_rrx" name="client_rrx[]" size="5">
</td>
<td>
<button id="add_img" id='insSpecimg' style='display:block;' onClick="insSpec()" align="center">Add</button>
</td>
</tr>
</table>

Try to use
n.innerHTML='<button class="del_img" onClick="delSpec(this)">Delete</button></div>';
and later
function delSpec(node)
{
r=node.parentNode.parentNode;
r.parentNode.removeChild(r);
}
in such case delSpec will receive pointer to the button, and will be able to delete the necessary row.

document.getElementById("insSpecc").deleteRow(r-1)
which should be
document.getElementById("insSpecc").deleteRow(rl);

You should use id for each row, and u can delete that row with the ID... There are several ways to get a DOM element object in jQuery and other libraries.
All you need to do is, use getElementById("the id of the row") and store that element in a variable, or make it's innerHTML=""; or delete it like xdazz suggested.
You can also get elements with class names... so, if your row is using any css class, you can get that row like you did with the ID.
Aquatic is also right: you either need to access all the DOM, traverse it, and reach ur desired element and do whatever with it, or access it with element's id or class name.
You can also change ur html markup for each row to have a check box which tells which rows to delete... and for each row if a checkbox is selected, delete the row.
Vote up if you got the point.