We have the following form:
<form>
...
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr>
<th scope="row">Area 1 <input name="config_line" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
...
</tr>
</tbody>
</table width="100%" cellspacing="0" class="datagrid_ppal">
...
<form>
What we need is to get the first, second or third from the hidden input value. We have tried this and didn't work:
var value = $('th').children('input:hidden').val();
Can anyone help us? We would really appreciate it.
The value of your hidden field is not an array, but just the string: "0,5,50".
To retrieve that value using jQuery use:
$('input[name=config_line]').val()
To split that string into an array use the split() method.
Combined:
var firstValue = $('input[name=config_line]').val().split(",")[0]; // etc...
var value = $('input[name=config_line]').val();
var valueArry = value.split(',');
var v1 = valueArry[0];
var v2 = valueArry[1];
var v3 = valueArry[2];
You'll find details Here .
var value = $('th').children("input[type='hidden']").val();
should work.
Related
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
I'm trying to get the value on the td. but i don't really understand why i'm having a NaN value, but if i change the value of blueJeansPrice = 1000 and blueJeansQty = 10, on the script it successfully alerts me the total.
HTML:
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td id="blueJeans" value="Blue Jeans">Blue Jeans</td>
<td id="blueJeansPrice" value="1000">1000</td>
<td id="blueJeansQty" value="10">10</td>
</tr>
</tbody>
<button id="submit" class="btn btn-primary">Show Report</button>
JS:
$("#submit").on("click", function(){
var blueJeansPrice = parseInt($('#blueJeansPrice').val());
var blueJeansQty = parseInt($('#blueJeansQty').val());
var blueJeansTotal = blueJeansPrice * blueJeansQty;
alert(blueJeansTotal);
})
The HTML element <td> doesn't support the value attribute. This attribute is used only in input elements.
When you try to access it trough val(), jQuery tries to access the element .value with native javascript, but it won't be there (because it's not an HTMLInputElement).
If you need to have the value in the tag and you don't want to get it using innerHTML, you can try adding data-value="1000" and get it with $("td").data('value').
Use $ele.html()
var blueJeansPrice = parseInt($('#blueJeansPrice').html())
I am trying to get a value from <td> and assign that value into a textbox. I am able to get the value from <td> but unable to assign it to textbox.
var aggrName=document.getElementById ('staticid').innerHTML;
$('#editvpa').val(aggrName);
Tried the above code but doesn't seem to be working.
<table border=1>
<tr>
<td id="staticid">123</td>
</tr>
</table>
<input type="text" id="getVal">
var val = $('#staticid').text();
$('#getVal').val(val);
Fiddler https://jsfiddle.net/1m1hzqem/1/
Try like this.
var aggrName=document.getElementById ('staticid').innerHTML;
document.getElementById ('textbox_id').value = aggrName;
where textbox_id is id associated to your textbox.
I use json save for a template builder. And I convert some blocks and html tables into simple tags, eg: [[TableName(Title,SKU,Total)]]
The code for this tag looks like this:
<div class="box table">
<table id="TableName">
<thead>
<tr>
<td class="title">Title</td>
<td class="sku">SKU</td>
<td class="total">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="title"></td>
<td class="sku"></td>
<td class="total"></td>
</tr>
</tbody>
</table>
</div>
On load, I need to convert tag back to html, so I use:
var tag = []
template.find('.table').each(function(){
var array = $(this).html().match(/\(([^)]+)\)/)[1].split(',');
tag.push(array);
});
console.log(tag)
but I need to get the id too "TableName" than generate the table.
Maybe you need simpler templating engine :
You can try handlebarjs. It's very easy to use and have good performance.
http://handlebarsjs.com/
https://www.youtube.com/watch?v=4HuAnM6b2d8
var $tableID = $(".table").attr("id"); // gets the table's id
var tag = []
template.find('.table').each(function(){
var array = $(this).html().match(/\(([^)]+)\)/)[1].split(',');
tag.push(array);
});
console.log(tag)
First of all, I am new to JavaScript. I have been pulling my hair getting this to work. I have tried a lot of different approaches, but I just cannot get it working. What I want to do, is pull a value from a HTML document with JavaScript, and save the value from: <div class="sum">Sum of order: <b>530 SEK</b></div>. What I want to grab is the integer, 530, and strip it of everything else.
HTML:
<div class="order">
<div id="departDate">
<div><b>Departing:</b></div>
<div>2015-08-08</div>
</div>
<div id="returnDate">
<div><b>Returning:</b></div>
<div>2015-08-16</div>
</div>
<div><b>Tickets</b></div>
<table>
<tbody><tr>
<td class="first">Adult(s)</td>
<td>1 x</td>
<td>530 SEK</td>
</tr>
<tr class="noborder">
<td colspan="3">
<table>
<tbody><tr>
<td id="people102" class="query first" style="font-size: 11px;">Test Testsson</td>
<td id="info102" class="query text-red" style="font-size: 11px;"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="first">Children:</td>
<td>3 x</td>
<td>0 SEK</td>
</tr>
<tr class="noborder">
<td colspan="3">
<table>
<tbody><tr>
<td id="people9999" class="query first" style="font-size: 11px;"></td>
<td id="info9999" class="query text-red" style="font-size: 11px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<div class="sum">Sum of order: <b>530 SEK</b></div>
<div class="vat">VAT 6%: 30 SEK</div>
</div>
What I have been figuring I'd try to do, is to grab the <b> value through document.getElementsByTagName("b")[3]; but it just isn't working when I try to either parse it or replace it using regexp. A full example of what I am trying to do:
function my(){
var b = document.getElementsByTagName("b")[3];
var str = b.toString().replace(/[^0-9]/g, '');
var x = str.parseInt();
return x }
my();
This says that str.parseInt is not a function. If I strip that part down with:
function my(){
var b = document.getElementsByTagName("b")[3];
var str = b.toString().replace(/[^0-9]/g, '');
//var x = str.parseInt();
return str }
my();
it returns [object HTMLElement]. How should I proceed to retrieve the value, stripping it from everything except the digits and replacing it with nothing and then returning its value? Reading other posts of retrieving a string and extracting it as an Integer is what got me trying these things out. I know what I want to do, just not the technical expertise to getting it done.
If I do
var b = document.getElementsByTagName("b")[3];
console.log(b)
I get <b>530 SEK</b>. How come I can't work with it?
There are two issues:
Use the text content of the dom element
Use the global parseInt function
1. You have to use the text content of the dom element:
var str = b.textContent.replace(/[^0-9]/g, '');
2. parseInt is a global function, not a member function.
So instead of
var x = str.parseInt();
use
var x = parseInt(str, 10);
you can try one of parseInt() or ParseFloat(), depends on what do you expect to get as a text, on textContent property of the node:
var b = parseInt(document.getElementsByTagName("b")[3].textContent);
console.log(b)