Add class to <img>s with a given src [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
HTML:
<table>
<tr>
<td><img src="images/filename1.jpg"></td>
<td><img src="images/filename2.jpg"></td>
<td><img src="images/filename3.jpg"></td>
<td><img src="images/filename4.jpg"></td>
<td><img src="images/filename5.jpg"></td>
</tr>
</table>
<input type="text" id="input">
<button id="btn">Submit</button>
When the user types in "filename1" in the input field and clicks the button, I want to add a class "opacity" to the img that has src containing "filename1", and the same for the rest of the img tags.

You can add a class like this:
var name = $("#input").val();
$("img[src='images/"+name+"']").addClass("opacity");
It will only add opacity class to the image which has src attribute like the input.

I am assuming you want to add opacity class to all the image elements, is this correct?
If so.
$('#btn').on('click', function(){
$('img').addClass('opacity')
})
And working plunkr

Related

How to write that html structure in java script? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
how to write that html structure in java script,
<table>
<tr>
<td>
<form>
<input type="file"></input></td>
<td><input type="submit"></input></td>
</form>
</table>
Try with following and add this before end of the html tag.
<script>
var myForm = document.createElement("form");
myForm .setAttribute('method',"post");
myForm .setAttribute('action',"submit.php");
var myInput = document.createElement("input");
myInput .setAttribute('type',"file");
myInput .setAttribute('name',"somename");
var formSubmit = document.createElement("input");
formSubmit.setAttribute('type',"submit");
formSubmit.setAttribute('value',"Submit");
myForm .appendChild(myInput);
myForm .appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(myForm);
</script>
This question does not show any research work done and also not specific question to understand.
Still if you want to display the content using javascript(render control from javascript) here is the code that will help you.
var strings = "<table><tr><td><form><input type='file'></input></td><td><input type='submit'></input></td></form></table>";
document.write(strings);
Assume you need to append your html code to inside a div called #my_div_id then use following code. (I have used your html code inside my method)
You should import jQuery library to this solution work.
function appendMyCode(){
$("#my_div_id").html("\
<table>\
<tr>\
<td>\
<form>\
<input type=\"file\"></input></td>\
<td><input type=\"submit\"></input></td>\
</form>\
</table>\
");
}
output will be, html table you used will append to my_div_id div.
I have used "\" character for detect line endings inside a string.
because your html code should pass to .html() method as a string

How to display table data in Bold or color using jsp, javascript, css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a web application which displays data from a database. It shows results in 0's or numbers. The numbers displayed should be bold or in some color. How do i do I display the results from database in bold in a webapplication.
<svp:tbody rowCount="0" maxDisplayRows="100">
<logic:iterate id="Typ" name="Typ">
<logic:iterate id="ordType" name="ordTypes">
<TR>
<TD style="font-size: 9px"><bean:write name="Type"
property="TCode" /></TD>
<TD style="font-size: 9px"><bean:write
name="Type" property="descr" /></TD>
<%
for (int i = 0; i < 8; i++) {
String idStr = i + "_order";
%>
<TD style="font-size: 9px"><INPUT class="inactive"
readonly="readonly"
id="${Typ.TCode}_${oType.OTypCode}_<%=idStr%>"
type="text" size="10" value="0"></TD>
<%
}
%>
</TR>
</logic:iterate>
</logic:iterate>
</svp:tbody>
your question doesn't have much of a context, so all I can suggest is
<td><b>value</b></td> //if you are using tables
b tag is for making font bold
you can also use
<td style='font-weight:bold'>value</td> //if you are using tables, css style
you can also use
<td class='bold'>value</td> //if you are using tables, css style
.bold //css class definition here
{
font-weight:bold
}
Your code is really messy, but from what I could understand, I'll try and help.
Lets say you have a <td> with a certain value you want to make bold? Add a style attribute to the td with "font-weight:bold;", making it from (for example) <td> into <td style="font-weight:bold;">
If you want to make only non-zero numbers in bold, use the condition?<what to return when true>:<what to return when false>:
int numberThatYouPut = ...;
<td>
<%=numberThatYouPut!=0?"<b>"+numberThatYouPut+"</b>:numberThatYouPut%>
</td>

Edit a disabled input field with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a disabled field that I want to edit with the below script
<html>
<select id="country"onchange="changeCountryCode()">
<input type="text" disabled id="cc">
<script>
function changeCountryCode()
{
var temp = $('country').val();
$('cc').val(temp);
}
</script>
</html>
It's not working for me.
What you have almost works but you are missing the # in your selectors. The # sign tells jQuery to use the ID attribute when looking up the element desired.
Should be:
var temp = $('#country').val();
$('#cc').val(temp);

Error in JavaScript OR jQuery select element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
jQuery:
$("#div td").live("click", function(){
alert("Hellow");
});
JavaScript:
function alertH(){
alert("Hellow");
}
HTML jQuery:
<div>
<td>
<a>X</a>
<span> HI! </span>
</td>
</div>
Click on td and runs the jQuery function, but only if you click on td and not other tags inside, as in jQuery?
HTML JavaScript:
<div>
<td onClick="alertH()">
<span> Hummm </span>
<a> Delete </a>
</td>
</div>
How do in JavaScript, and it only runs if you click directly on td and not in other html tags inside
Performs this function only if you click the div function and not in other tags inside the div. How do the two methods above?
One way to do it is by adding the code on each element you dont want to call a function
onClick="event.cancelBubble = true;"
Another way is to check in the callback called to see the Target there.
<div onClick="test()" id="run">
Click Works<br>
<label>Not Work</label>
</div>
function test(){
if (event.target.id !== "run") return false;
alert(event.target);
}

Get full html (including textarea content) from div [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a div 'someDiv'. In that div I have a table, and in the table's cells, I have textareas.
I want that when a certain button is clicked 'mybutton', the full html (it might has changed because the user put some data in the cells), will be put inside a hidden field.
All of that - using Jquery.
Of course, I tried $('#someDiv').html() but it gives me the original html and not what the user put.
EDIT: here is the code:
http://jsfiddle.net/RCQmj/
<div id="interviewSummarySkeleton">
<table>
<tr>
<td>
<textarea class="title" tabindex="1">title 1:</textarea>
</td>
<td>
<textarea class="content" tabindex="8"></textarea>
</td>
</tr>
<tr>
<td>
<textarea class="title" tabindex="2">title 2:</textarea>
</td>
<td>
<textarea class="content" tabindex="9"></textarea>
</td>
</tr>
</table>
</div>
<div id="interviewHtmlHere">PUT HERE THE HTML FROM PREV DIV AFTER USER CHANGED IT</div>
When you click on the button - you will have to set all the textarea's text to it's value before getting the .html()
$('button').click(function(){
$('#interviewSummarySkeleton textarea').text(function(){
return this.value;
});
$('#interviewHtmlHere').text($('#interviewSummarySkeleton').html());
});
FIDDLE
You could set the innerHTML of each textarea to the value before your html() call:
http://jsfiddle.net/ZuXwQ/1/
$('button').click(function(){
$('body').find("textarea").each( function() {
this.innerHTML = this.value;
});
console.log($('body').html());
});
Here it is applied to your fiddle: http://jsfiddle.net/RCQmj/1/
Here again, if you want it added as text: http://jsfiddle.net/RCQmj/2/
in either case, I'm assuming interviewHtmlHere is hidden in your actual context?
The .html() method will get the full HTML-code of any element, using jQuery.

Categories

Resources