JavaScript : Get inputText value in a table cell - javascript

I used the following code to insert new rows.
function NewInputText(_id,_width,_readOnly,_value)
{
return "<input id='"+_id+"' readonly="+_readOnly+" type='text' value='"+_value+"'/>";
}
How can I get this inputText's values from any cell?
Important: I don't need the innerHTML string, I just want the value from inputText in any of the table cells.

You may need:
var val = document.getElementById('inputId').value;
after your <input> is populated.

Assuming this element was already added to your HTML, your get the value of an element via the value property. You could also just use _value again, but I don't know your full code.
And you should consider using CSS to design your input-boxes. You might also want to use textContent instead of innerHTML if you're not inserting any HTML elements.

You have something like below, to get the exact value and not innerHTML:
function getValue(_id) {
return document.getElementById(_id).value;
}

Related

Replacing text with <span> using javascript

I need to replace each word in the textarea by a span with unique id. I need the code in JavaScript. I have tried creating a DOM element and inserting it in text area using the following code.
var s = document.createElement('span');
var text=document.createTextNode("inside tag");
s.appendChild(text);
document.getElementById("t1").appendChild(s);
t1 is the is the id of my text area. The above code isn't giving any result.
Also, I tried another method:
document.getElementById("t1").innerHTML="<span>inside tag</span>";
innerHTML isn't working here.
What do I do?
It has to be the value property instead of the innerHtml because of the fact that value property is used for setting the value for input/form elements. innerHTML on the other hand is normally used for div, span, td and similar elements.
So as you are using a textarea you shall go with value property.
document.getElementById("t1").value = "Whatever the text/html you want to insert here";
To change your value of text arena, you will have to do this:
document.getElementById('t1').value = '<span>inside tag</span>';

can divs hold numerical values?

I have a normal div, and I wanted to know if it can actually hold a numerical value. Take cookie clicker for instance, the number of cookies you have is shown in a div, how do I do that with my div?
<div id="myDiv">0</div>
Or
<div id="myDiv" value="0"></div>
I tried the second option, and it doesn't show my value doesn't show. I tried the first option, but what I want to do with it, it doesn't really work, because I can't edit the value with my javascript functions.
How would I do this, so that the div can hold my value and my value can be edited?
Your question isn't clear for me but is this what you want?:
you can use JavaScript to get the value of that div.
HTML
<div id="myDiv">0</div>
JavaScript
var text = $('#myDiv').text();
var text has the value of 0 now. you can do with it what you want.
You can do with the second option like the following:
SETTING THE VALUE
document.getElementById('myDiv').setAttribute('value',50)
GETTING THE VALUE
console.log(document.getElementById('myDiv').getAttribute('value'));
SUGGESTION:
Try data-value instead of value, because value is not a valid attribute of div.
Values are for form input elements.
To modify content of other elements search Javascript DOM for more.
For example:
You can edit the innerHTML property with Javascript.
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
You'll have to convert the value because the value you're trying to pull will technically be a string.
var SomeVar = $('#MyDiv').html();
var SomeAnswer = 8 + parseInt(SomeVar);

creation of json with jquery

I've created a application for converting the HTML table to JSON. the code works fine, but say for example if the td or th contains inner components such as span or other child elements , we have to iterate within that to get the real text, in my application I've wrote for getting values if there is one span components, but in other situation if there is more than one components how can we get the real values inside the td and th of table, here we are considering only text values
Use this and .text() instead of .innerHTML ( as you are using jquery )
Change
$('td', tr).each(function(j, td) {
if(td.innerHTML.indexOf("span") != -1){
var text = $(this).closest('td').find('span').text();
myTr.push($.trim(text));
}
else{
myTr.push($.trim(td.innerHTML));
}
});
To
$('td').each(function() {
myTr.push( $(this).text() );
});
http://jsfiddle.net/d8W9Q/
Use jquery's .text() method, look at the reference here:
http://api.jquery.com/text/

get the content when the div does not have the id of the div ... only has the class

Good afternoon. I have a table listing days. These days are within a <div>, but I do not have an ID for the <div>. I tried to get the contents of the <div> but it still fails, as it does when I try to get the value.
This is an example of the <div> I'm trying to get the class of.
<div class="fc-day-number">6</div>`
I'm trying to get this value with the Seguito function but am not getting the value of the content div ..
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').val();
alert(diaSelecionado);
});
});
Instead of val(), use .html() to return the element's innerHTML property:
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
val() is used to get the value of form elements, you probably want html():
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
From jQuery documentation:
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
In an HTML document, .html() can be used to get the contents of any element.
You will want to change the $('.fc-day-number').val(); to $('.fc-day-number').html();

jQuery prepending textarea

HTML
<textarea id="photo-42-9" class="comment_box">Write a comment...</textarea>
jQuery code that doesn't work, what am I missing?
$('#photo-42-9').prepend("<div>blah</div>");
EDIT
Corrected the ids mismatch, still doesn't work though
prepend() adds the specified mark-up into the object returned by the jQuery selector (in this case the textarea). A textarea can contain only text, no other child elements; therefore you're trying to create invalid html.
If you want to put the <div> before the textarea:
$('<div>blah</div>').insertBefore('#photo-42-9');
If you want to prepend new text into the textarea:
$('#photo-42-9').val(
function(i,val){
return 'blah ' + val;
});
References:
prepend().
insertBefore().
val().
The contents of a textarea element are treated as text, not as HTML. They are parsed into the element's value property. You can't edit the content of the element: you have to edit its value.
The nice, jQuery-ish way of doing this is with val and its callback syntax:
$('#photo-42-9').val(function(i, oldVal) {
return "<div>blah</div>" + oldVal; // return the desired value
});
jsFiddle
Note that I have also corrected the selector: you had an additional 9 in the ID, so it wouldn't have found the element.
#Bob: In addition to what David Thomas said, your item has an id of photo-42-9 and your selector is looking for photo-42-99
Suggested Fix:
$('#photo-42-99').text( $('#photo-42-99').text() + "<div>blah</div>" );

Categories

Resources