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();
});
});

I need to Hide <tr> in a table when i click Addnew button(WORDPRESS,PHP)

Add new button
<div class="icon32 icon32-posts-post" id="icon-edit"><br></div>
<h2><?php _e('Collaboration', 'custom_table_example')?> <a class="add-new-h2" id=" add_new"
href="<?php echo get_admin_url(get_current_blog_id(), 'admin.php?page=persons_form');?>"><?php _e('Add new','custom_table_example')?> </a>
</h2>
(Need to hide)
-----------------------------------------
<tr class="form-field" id="appid">
<th valign="top" scope="row">
<label for="Application_ID"><?php _e('Application ID', 'custom_table_example')?></label>
</th>
<td>
</tr>
</tbody>
</table>
How to hide when AddNew Button is clicked??
I cannot directly give hide or display:none because "Edit and Add new" uses the same form.so on-click of Add new i need to hide tablerow
Also i had tried giving on-click function(Javascript) "document.getElementById("appid").style.display = 'none';"
still i didn't get any response.
Can any one of you help me please!!! Thanks in advance
Refer to this link wordpress-custom-database-table-example-full

Try to add the below javascript code
<script type="text/javascript">
document.getElementById("add_new").addEventListener("click", function(event){
document.getElementById("appid").style.display = 'none';
event.preventDefault()
});
</script>

How to get selected value from table using Angular.js

I need one help.I need some selected value using check box select using Angular.js.I am explaining my code below.
<tr dir-paginate="pro in listOfReview | itemsPerPage:5">
<td><input type="checkbox" ng-model="selected[pro.review_id]" ng-false-value="undefined"></td>
<td>{{$index+1}}</td>
<td>{{pro.Product_name}}</td>
<td>{{pro.title}}</td>
<td>{{pro.description}}</td>
<td>{{pro.rating}}</td>
<td ng-if="pro.status==0">Not Approved</td>
<td ng-if="pro.status==1">Approved</td>
<td ng-if="pro.status==1">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-red' value='Reject' ng-click="RejectStatus(pro.review_id,pro.status);" >
</a>
</td>
<td ng-if="pro.status==0">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus(pro.review_id,pro.status);" >
</a>
</td>
</tr>
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus();">
The controller side code is given below.
$scope.selected = {};
$scope.ApproveStatus=function(){
console.log('approve',$scope.selected);
}
right now i am getting the selected value like this approve Object {4: true} .Here i need to assign pro.review_id value to a key like(review:id:4) so that i can easily fetch those using loop.Here also my requirement is when at least one check box will select the Approve button present at bottom will display to the user.Please help me.

plunker link Click here
You can bind an extra property with check box like I did below.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table>
<tr><td></td><td>Name</td><td>Type</td><td>Price</td></tr>
<tr ng-repeat="p in prods">
<td><input type='checkbox' value ="p.checked" ng-model="p.checked"></td>
<td>{{p.name}}</td>
<td>{{p.type}}</td>
<td>{{p.price}}</td>
<td>Delete</td>
<td>Modify</td>
</tr>
</table>
<input type="button" value="Approve" ng-click="ApproveStatus()" />
</div>
</body>
</html>
function Ctrl($scope) {
$scope.prods = [
{'id':'0', 'name' : 'Title1', 'type' : 'Zip code', 'price' : '11'},
{'id':'1', 'name' : 'Title2', 'type' : 'MD', 'price' : '222'},
{'id':'2', 'name' : 'Title3', 'type' : 'DMS', 'price' : '2222'}
];
$scope.ApproveStatus = function(){
console.log('value is:' + $scope.prods.length);
for(var i =0; i < $scope.prods.length ;i++){
if($scope.prods[i].checked){
console.log($scope.prods[i].id)
}
}
};
}

Jquery, not sure how to capture the elements i want

Im a php developer, very little experience with javascript/jquery.
Basically i have a textbox and a link with a href. When the user "keyup"s in the textbox i want the href in the link to append the value.
However i have multiple textboxes and links that should be changed together.
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
Okay so after seeing that basic set up, lets the the user type into the first text box "23-27". Now i want this to be added to the links href. So it will be appended with "&chapter=(WHAT EVER THEY TYPE IN THE TEXT BOX)".
How can i achieve this in jquery?.
I have tried a few things, my last attempt is below:
<script>
$('.target').keyup(function(){
var currentHref = $('.link').attr("href");
$(this).parents('tr').next('tr').closest('.link').attr("href", currentHref + $(this).val());
});
</script>
Any help would be great thank you.

You were on the correct path until searching for the .link. To search for direct/nested children in jQuery, use find()
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
Also, note above we do not set the attribute with
$('.link').attr("href");
because there are many .link elements. We use $(this) in the context of the found .link element
Finally, use custom data-* attributes to preserve the original href like
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
</table>

Try this, it is working actually.
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
$('.target').keyup(function (e) {
var input = $(this);
var closestlink = input.closest('tr').next('tr').find('.link');
var linkHref = closestlink.attr('href'); // You aren't using this actually, but just in case you need to use the current href, not the default.
var defaultHref = closestlink.attr('default');
closestlink.attr('href', defaultHref + input.val());
});
https://jsfiddle.net/e8uLc9nm/1/
Another option would be removing this part
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
And adding via HTML a default tag for your link or something else with the default value, this way you won't need to use jQuery to set the default value.

Try this
$(document).ready(function() {
$('#txt').keyup(function(e) {
$("a").attr("href", $("a").attr("href") + String.fromCharCode(e.which).toLowerCase());
$("div").html($("a").attr("href"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
some text for link
<div>
</div>

changing elements in a list

I would like to have the text after the "Question:" and "Answer:" change into text input upon clicking the Edit_Question button. I don't know a good way to make this work. Here is the code I have:
<script type="text/javascript">
<!--
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
})
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>
</ul>

Just disable/enable the textbox and style the disabled version:
HTML:
<button id="edit">Edit</button>
<input id="myinput" type="text" disabled="disabled" value="My Value"/>
CSS:
input:disabled {
background-color:#fff;
border:none;
}
JavaScript:
document.getElementById("edit").onclick = function() {
document.getElementById("myinput").disabled = "";
};

First of all, you are missing a closing </td> tag after your page <select>. If you want to make it easy to select the text of your questions and answers, wrap them in an element. In my example, I wrapped them in a <span> element and gave them question and answer classes respectively.
Try a demo: http://jsfiddle.net/v3yN7/
HTML:
<li>
<h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
Javascript:
$('.Edit_Question').click(function() {
// Find the <li> element the whole clicked thing is wrapped in
var $item = $(this).closest('li');
// Select all question and answer wrappers
$item.find('.question,.answer').each(function() {
var $this = $(this);
// Get the question/answer text
var txt = $this.text();
// Empty the wrapper and replace them with an input box
$this.empty().append($('<input type="text" />').val(txt));
});
});
I assumed you just want a simple input box for editing, but it can be easily changed to a <textarea> if needed.
As to what happens next, I'll leave it up to you. :)

just copy this code to your page without damading your script.
<script type="text/javascript">
<!--
var editBox = false;
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
$('.Edit_Question').click(function() {
if(editBox)
{
$('.edit_area').css({'display':''});
editBox = true;
} else {
$('.edit_area').css({'display':'none'});
editBox = false;
}
});
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $i => $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr id="edit_area" style="display:none;">
<td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td>
</tr>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>