Develop Reference

for loop doesn't work - what do I do wrong?

I am new to JavaScript. I would appreciate if you could help me with the code: thanks!
I'm trying to hide the answers to 10 questions and show them when clicked on the right button!
It only shows the last answer when i klick any button!
var ya = document.getElementsByClassName("A");
$(ya).hide();
for (var i = 0; i < 10; i++){
var x = document.getElementsByClassName("idcheck");
var z = x[i].id;
console.log(x[i]);
$(x[i]).click(function() {
var y = document.getElementsByClassName(z);
$(y).show();
});
}
This is the html:
<p>
<button id="B<?php echo $drow['id'];?>" class="btn btn-primary idcheck" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Lösung der Aufgabe!
</button>
</p>
<td><b class="text-success A B<?php echo $drow['id'];?>"><?php echo $brow['answertext'];?></b></td>
</tr>
<?php
}
?>

Your code is way more complicated than it needs to be. If you use jQuery, just stick with jQuery.
$(".A").hide();
$(".idcheck").on("click", function() {
var id = this.id;
$("." + id).show();
});

In your code you've use jQuery as well as bootstrap specific elements. So I'm assuming that you'r page has jQuery.
Please have a look at the following snippet
NOTE: I've cleaned up your HTML structure and removed unnecessary bootstrap specific classes
$('.idcheck') // We select all elements with the given class
.on('click', function() { // We attach a function for the 'click' event
var currID = $(this).attr('id').replace(/^B/i, ''); // We get teh ID fo the clicked buttona and remove 'B' from the start of it to it it's index
$('.B' + currID).show(); // We then use the index and generate a class selector to target the <td> tag to show it
})
.A {
display: none; // Hide the element initially
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button id="B1" class="btn btn-primary idcheck" type="button">
Button for ID 1
</button>
</td>
<td><b class="text-success A B1">Content for ID 1</b></td>
</tr>
<tr>
<td>
<button id="B2" class="btn btn-primary idcheck" type="button">
Button for ID 2
</button>
</td>
<td><b class="text-success A B2">Content for ID 2</b></td>
</tr>
</table>

1) If you use jquery, use jquery!
2) have a look at scoping in js
$(".A").hide();
$(".idcheck").each(function(){
$(this).click(function() {
$("."+$(this).id).show();
});
});

Change button to link in html table?

I have buttons in my html table. When I click on button I want to change link button to "Un-Extend" and I click on "Un-Extend" switch back previous button. How can I do that?
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
</td>
</tr>
}

Do you want like this.
<button id="btnExtend" type="button" class="btn btn-info btn-xs un-extended" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
jQuery(document).on("click",".un-extended",function(){
if(!$(this).hasClass("extend")){
$(this).addClass("extend");
$(this).text("Un-Extend");
}else{
$(this).removeClass("extend");
$(this).text("Extend");
}
});

You can do something like this: DEMO
$('button').click(function(){
if($(this).text() == "Extend") {
$(this).text('Un-Extend');
} else {
$(this).text('Extend');
}
});

Do you mean change the button tag to a tag?
As the button elements are inside the loop iteration, you can't use the same ID(s) name, instead put classname btnExtend(you name it), and register click handler for its, like following :
$(document).on('click', '.btnExtend', function() {
$(this).text(($(this).text() == 'Extend' ? 'Un-Extended' : 'Extend'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnExtend" type="button" class="btn btn-info btn-xs btnExtend" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>

You might want to try this.
$("#btnExtend").on("click",function(){
$(this).text($(this).text() == 'Extend' ? 'Un-Extend': 'Extend');
});

Change into below code and apply below funion of jquery into code:
tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"' onclick ="showhide(this);" >Extend</button>
</td>
</tr>
}
<script> function showhide(victim)
{
var text = $(victim).closest('td').find('input:button').text();
if (text == "Extend") {
$(victim).closest('td').find('input:button').text('Un-Extend');
}
else {
$(victim).closest('td').find('input:button').text('Extend');
}
} </script>

How to add one specific HTML block with jQuery

I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.
HTML :
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">
<table cellspacing="0" class="form-list">
<tr>
<td class="label"><label for="Type">Tip</label></td>
<td class="value">
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="Class">Class</label></td>
<td class="value">
<input id="Class" name="optional[1][class]" value="" type="text" class=" input-text"> </td>
</tr>
</table>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
<br></br>
</fieldset>

You can do it like this:
var html_code = '<span>put your full code here</span>';
var selector = 'body';
//change selector with where you want to append your html code into..
$(selector).append(html_code);

One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.
For example:
<div id="templateholder"></div>
<div id="template" style="display: none;">
<div class="template">
<label for="Type">Tip</label>
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
</div>
</div>
function createTemplate() {
var temp = $("#template div.template").clone();
//from here you can do things like change name fields or values
temp.find("#Type").attr("name", "Type2");
//...attach events
temp.find("#Add").click(function() {
//some click action like make a new template
createTemplate();
});
//then add the new code to the holding area
$("#templateholder").append(temp);
}
If you wanted to create a new one when the page first loads
$(function() {
createTemplate();
});

Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
source: http://www.w3schools.com/js/js_htmldom_nodes.asp
there is another question in stackoverflow with similar question with decent answer
Inserting HTML into a div

How to append data on change event of one select to second select?

I have two select drop downs in same table row.
I want to add data to second drop down on change of first drop down.
Both drop downs do not have id or class??
is it possible without id or class append data to it??
Here is my html..
<button type="button" id = "add-row" class="btn btn-info pull-right">
<i class="glyphicon glyphicon-plus"></i> Add new
</button>
<table class="table" id="mans">
<tr>
<td><select class="form-control tag-list-name">
<option>ABC</option>
<option>PQR</option>
</select>
</td>
<td><select class="form-control">
<option> </option>
</select></td>
<td><button type="button" class="btn btn-info pull-right delete-row">
-
</button></td>
</tr>
</table>

You can use jQuery .first() and .eq() to select them.
var selects = $('#mans select');
selects.first().on('change', function () {
selects.eq(1).append('<option>New Option</option>');
});
DEMO

I solved my problem using following code :
Added new class name to second select/drop down.
And then used following code:
var tr = $(this).closest('tr');
var select = tr.find('.tag-name-values');
var currentContext = select.html("");
currentContext.append(data);

How to use closest() in jQuery

I am trying to get value of a text box by using closest().
My form contains dynamically created table with one text box and button in each row . I want to show the value of text box in button click event.
Table format is given below
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
I have written one javascript code (given below) . when the code will execute, it return a null value.
Function
function UpdateSchedule() {
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
Please let me know why am not getting the null value.

jQuery .closest() goes up from the current element until it finds what you give it to find. jQuery .find() goes down until it finds what you give it to find.
This does the trick:
http://jsfiddle.net/6T3ET/

id must be unique, you need to use class instead:
<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">
an use .click() instead of inline onClick handler since you're using jQuery. So you can do:
$('.schedule').click(function() {
var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
alert( amt2);
});
Please note that the .amountclm input is the child of a td whose is the immediate previous sibling of parent td of your clicked .schedule button.

Try this
replace 'this' with the 'schedule_' class attribute
function UpdateSchedule() {
var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
HTML :
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
or try with Jquery as
$(document).on('click', '.schedule_',function(){
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
} );

Use .parent() and .prev() in jquery for this contradiction
$(".schbtn").click(function() {
var amt2 = $(this).parent().prev("td.amountclm").find('.amtcls').val();
alert( amt2);
});
Fiddle

First of all .closest() is not plain JavaScript. It's a function from jQuery.
http://api.jquery.com/closest/
and it traverses up in the element hierachy. And td.amountclm is not in the element hierachy of the button#schedule.
Therefore .closest wont find it.