Try to set my td value from my JavaScript JSON. But it dun seems to work when I inspect the element. However the html works just not the value. Not sure what is the problem. Tried changing the id to class too but it didnt work as well.
$(document).ready(function(){
$(".login_a").click(function(){
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
$("#td_projectName").html(data.projectName);
$("#budget_amt").html(data.budget);
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
$("#percentage_1").val(data.percentage1);
});
});
</script>
<div id="login_form">
<table border=1>
<tr>
<th> Project Name </th>
<td id="td_projectName">
</td>
</tr>
<tr>
<th> Budget</th>
<td id="budget_amt">
</td>
</tr>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>
VAL is not a valid attribute of a TD, and that is why you cannot set it. If you want to store some data as an attribute of the node, the use setAttribute to store it. Example:
Straight JS:
document.getElementById('percentage_1').setAttribute('bob', 'your uncle');
Or using jQuery:
$('#percentage_1').attr('bob', 'your uncle');
You would use getAttribute, or .attr, to get the value later, e.g.
var bob = document.getElementById('percentage_1').getAttribute('bob');
or
$('#percentage_1').attr('bob');
Note that non-standard attributes won't validate and may be frowned on, but are common fixtures in web applications. You can use jQuery's .data method to properly set data on a node if you are unconcerned with older browser support.
The .val(value) method is primarily used to set the values of form elements such as input, select and textarea.
You can use a hidden field to keep the value or you can use .text() method to get the text of td.
<td id="percentage_1">
<input type="hidden" id="percentage_1_val" />
</td>
$("#percentage_1_val").val(data.percentage1);
Get the value.
$("#percentage_1_val").val();
// or you can use $("#percentage_1").text();
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())
Here is my HTML code.
How can I get the value of the data attribute when click the cell?
<td id = "orderIds" data-cids="213,431">orders</td>
What should I use to trigger an event when I click on the <td> cell?
Please check below mentioned solution.
$('td').click(function(){
alert($(this).data('cids'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id = "orderIds" data-cids="213,431">orders</td>
<td data-cids="23,43">12</td>
<td data-cids="21,41">23</td>
<td data-cids="13,31">34</td>
</tr>
</table>
you need clicked cell data attribute so use of this will do the needful. use following snippet and it should work.
$('td').click(function(){
var data = $(this).data('cids');
})
Bind a click event handler by selecting cell using the has-attribute selector(optional) and get data attribute value using data() method.
$('td[data-cids]').click(function() {
console.log($(this).data('cids'));
// or use `this.dataset.cids`
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-cids="213,431">orders</td>
<td data-cids="123,234">orders</td>
</tr>
</table>
With pure js...
orderIds.onclick=function(){
console.log(this.dataset.cids)
}
you can also use $('#orderIds) with jQuery
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 have the following test html:
<table width="80%" border="0" cellspacing="0" cellpadding="1" >
<tr>
<td class="tableBorder">
<table id="scriptsT" name="scriptsT" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="4" class="tableTitle">› College Foo - ScriptList:</td>
</tr>
<tr class="rowHeaders">
<td width="4%">ScriptName</td>
<td width="2%">Main Script (Radio)</td>
<td width="2%">(Ext)</td>
<td width="2%">Del Script</td>
</tr>
<tr id="foo[1]" name="foo[1]" class="rowHeaders">
<td id="sTD" name="sTD" width="4%">Script1</td>
<td width="2%">
<input type="radio" name="main" id="main" value="">
</td>
<td id="tTD" name="tTD" width="2%">Php</td>
<td width="2%"><input type="Button" class="textbox" name="SelScript" id="" value="DelScript" onClick="javascript: DelScript(1); return false;"></td>
</tr>
</table>
</td>
</tr>
</table>
=======================================================
I'm trying to remove the node, using the "DelScript function, that tries to use an ID to select the given TR, based on each TR having a unique ID, in this case foo[1], etc..
In my test DelScript, I 1st get the table, and then try to get the childnode (the "TR") to delete.
//--handle/simulate the deletion of the tr in the scriptTBL for the id
function DelScript(id)
{
var scriptTBL=document.getElementById("scriptsT");
var a="foo["+id+"]"
var test=document.getElementById("foo[1]");
//scriptTBL.parentNode.removeChild(test);
scriptTBL.removeChild(test);
alert("foo");
var a;
}
However, I'm screwing something up, as I'm not able to delete the node.
I'm running FF4, and firefox seems to be saying the node can't be found (???).
I've also tried using the parentNode a well but get the same results.
Thank you for any pointers.
If you just want to
"delete the TR where the clicked 'delete' button is located"
You don't need any of those id attributes.
<input type="Button" onclick="DelScript(this);return false;">
function DelScript(theClickedButton) {
var tr = theClickedButton.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
The table rows are not children of the <table>, they're children of the <tbody> element inside it. Even if there's not a <tbody> in your markup, there's one in the DOM. You could go up the DOM from the child element itself, or you could find the <tbody>
var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];
FF is likely inserting a <tbody> element in between your <table> and <tr>, as the HTML specification demands. You don't even need to know the table ID. The attempt you commented out was almost right, but you need test.parentNode instead of table.parentNode - you want to get the row's parent node, not the table's:
function deleteRow(n){
var el = document.getElementById('foo['+n+']');
return el.parentNode.removeChild( el );
}
The TR is not a child of the TABLE. It is a child of the TBODY that is implicitly a child of the TABLE. Try this:
scriptTBL.children[0].removeChild(test);
Also, install FireBug so that you can browse the DOM tree and set breakpoints in your scripts to examine what they are doing to the dynamically rendered HTML.