I am loading a HTML template using the $.get function and I would like to parse this HTML and inject my own values into it. So far I have tried the below snippet, but it doesn't seem to be working.
$.get('/js/dynamic/locations', function(newRow) {
var existing_elem = $('.edit-table tr:last');
existing_elem.after(newRow);
var appendedRow = existing_elem;
appendedRow.find('td[data-th="Name"] > span').text(v.location_name);
appendedRow.find('input').val(v.location_name);
appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});
The value of newRow when loaded is:
<tr>
<td data-th="Name"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""></td>
</tr>
First of all you have to append the loaded content into the DOM. Then, select and edit any element you want:
EDIT (#2)
HTML (Assumung this is the html loaded: 2 columns)
<tr>
<td data-th="Name"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""> </td>
<td data-th="LastName"><span class="edit-input-text"></span>
<input class="inp input-edit" type="text" name="location_name" value=""> </td>
</tr>
jQuery
$.get('/js/dynamic/locations', function(newRow) {
var existing_elem = $('#existing_elem');
//Append the html
existing_elem.append(newRow);
//Select the appended html
var appendedRow = existing_elem.children('tr');
//Select eny elem inside the appended html
appendedRow.addClass('appended');
appendedRow.find('td[data-th="Name"] > span').text('your_text');
appendedRow.find('input').val('new_value');
//Second column
appendedRow.find('td').eq(1).find('input').val('another_value');
});
I think your selector has issue. Try this -
$.get('/js/dynamic/locations', function(newRow) {
$(newRow).filter('tr td[data-th="Name"] span').text(v.location_name);
});
where the selector 'tr td[data-th="Name"] span' should be noticed
OR
$.get('/js/dynamic/locations', function(newRow) {
$('[data-th="Name"]', newRow).find('span').text(v.location_name);
});
Did you try:
$(newRow).find('.edit-input-text').text(v.location_name);
Working demo
//Create a jQuery object from your ajax response
var newRow = $('<tr><td data-th="Name"><span class="edit-input-text"></span><input class="inp input-edit" type="text" name="location_name" value=""></td></tr>');
//Manipulate
newRow.find('.edit-input-text').text("I am new here")
//Do whatever
$('#demo').append(newRow);
Related
I want to display a table with the id,name,type,value and text of input html tags between each td element of the table. We need to document these details for revamping the app.
Problem:
Make changes to the script below to get the id,name,type,value and text of input html tags between each td element
Script:
$(document).ready(function(){
$("table").click(function(){
alert("Clicked");
$("table").each(function(){
var $this = $(this); //1.Get the table data
$this.children("tr").each(function(){ // 2.loop through tr elements
$this.children("td").each(function(){ //3.loop through td and get
//html element between td elements to get their prop given below
console.log()(this.html().prop('id')); //4.Get id,Name,type() and value
console.log(this.html().prop('name'));
console.log(this.html().prop('type'));
console.log(this.html().prop('value'));
console.log(this.text);
});
});
});
});
});
HTML Code:
<body>
<table>
<tr>
<td class="tg-0pky" >First row TD</td>
<td class="tg-0pky" ><input type="text" id="text1" name="num2" value="123"/></td>
</tr>
<tr>
<td class="tg-0pky" >Second row TD</td>
<td class="tg-0pky" ><input type="radio" id="MA" name="radio1" value="<%=myRadioValue1%>" />Radio1</td>
<td class="tg-0pky" ><input type="radio" id="FA" name="radio2" value="<%=myRadioValue2%>" />Radio2</td>
</tr>
<td class="tg-0pky" >Third row TD</td>
<td class="tg-0pky" ><input type="checkbox" id="ch1" name="checkbox1" value="<%=myCheckbox%>">CheckBox1</td>
<td class="tg-0pky" ><input type="checkbox" id="ch2" name="checkbox2" value="<%=myCheckbox%>">CheckBox2</td>
<td class="tg-0pky">*&7454</td>
</tr>
<tr>
<td class="tg-0pky" type="text" name="num2" id="select1" value="<%=myValue%>">Fourth Row TD</td>
<td>
<select id="selected" name="dropdown" value="<%=myDropDown%>">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
</tr>
</table>
</body>
</html>
The final output needs the id,name,type,value and text present in the input element that is present between the "td" elemets of the each "tr" of the table
In pure JavaScript.
const inputAttributes = {
ID: 'id',
NAME: 'name',
TYPE: 'type',
VALUE: 'value'
};
const inputs = document.querySelectorAll('tr td input');
inputs.forEach(input => {
// Input attributes
[...input.attributes].forEach(attribute => {
switch(attribute.name) {
case inputAttributes.ID:
attribute.name; // attribute id
attribute.value; // value of attribute id
break;
case inputAttributes.NAME:
attribute.name; // attribute name
attribute.value; // value of attribute name
break;
case inputAttributes.TYPE:
attribute.name; // attribute type
attribute.value; // value of attribute type
break;
case inputAttributes.VALUE:
attribute.name; // attribute value
attribute.value; // value of attribute value
break;
}
});
// Text next to input
input.nextSibling; // Radio1, Radio2, CheckBox1, CheckBox2
});
Not tested but this should be close to what you need, the only thing I'm not sure is what you mean by the text of the input.
$(document).ready(function(){
$("table").click(function(){
var $table = $(this);
$table.find(':input').each(function( index ) {
var $input = $(this);
console.log($input.attr('id'));
console.log($input.attr('name'));
console.log($input.attr('type'));
console.log($input.val());
});
});
});
The problem you have is this:
$('table').children('tr')
this will never work because in DOM tr is never child of table there is also tbody element (even if you don't have it in your html it's there is DOM).
so you need
$('table').find('tr')
instead.
NOTE: not sure if this is what you want but in table click you select all tables not the one your clicking on if you want to process only clicked table use $(this).find('tr');
I need to find a value of a hidden input in same table row but it seems that i cannot access it with how i am trying to.
function setDateTimeOn(elm) {
var formattedDate = GetCurrentDateTime(); //get formatted date
$(elm) //clicked button
.parent("td") // container td
.next() // next td
.find("span")
.text(formattedDate);
console.log(elm);
var hdn = $(this).closest('tr').find('input[type="hidden"]').val();
console.log(hdn);
}
http://jsfiddle.net/bthorn/xf12y7y4/
What I am searching for is this
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
I want the value 3601 , it is in the same tr
HTML
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:5px;">
<input type="button" id="GridView1__ctl2_AddButton0" name="GridView1:_ctl2:AddButton0" value="On" class="btn-blue" onclick="setDateTimeOn(this)">
</td>
<td style="width:150px;">
<span id="GridView1__ctl2_lblStormTimeOn"></span>
</td>
</tr>
I see it spit out the complete input element tag but the var hdn , I try to do a console.log(hdn) and it is undefined.
The problem is that you're using:
var hdn = $(this).closest('tr').find('input[type="hidden"]').val();
And this here is the global Window object. You want to use the element:
var hdn = $(elm).closest('tr').find('input[type="hidden"]').val();
Updated fiddle
I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks
There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>
Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');
You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle
All the examples if adding a form element to an existing form all use the document.getElementById method of grabbing the element that they want to attach the form element to or they are Jquery methods which I don't use and have no need to use Jquery.
This is the form I have
<form name="formname" action="javascript:return false;" enctype="multipart/form-data" method="post" onSubmit="processCart(this);">
<table>
<tr>
<td> </td>
<td>Number </td>
<td>Price </td>
<td>Quantity </td>
<td>Remove</td>
</tr>
<tr>
<td> <input type="checkbox" name="items" value="Item 1"></td>
<td># 1 </td>
<td>$<input type="text" name="price" size="12" value="1.00" readonly /></td>
<td><input type="text" name="quantities" value=""/></td>
<td> </td>
The button that Adds an element is called "Add Item" and when clicked it is supposed to add a form element after the existing one.
Any ideas on how to achieve this in Javascript will be appreciated. Clips of code so far
function insertFormElements(){
for(i in ele){
itm = 'item_'+i;
amt = 'amount_'+i;
qty = 'quantity_'+i;
// add a new Inputs
addElement(itm,"text","");
addElement(amt,"text","");
addElement(qty,"text","");
// add values
document.formname[ itm ].value = ele[i].items;
document.formname[ amt ].value = (ele[i].amount * ele[i].quantity);
document.formname[ qty ].value = ele[i].quantity;
}
return true;
}
The function addElement
function addElement(){
try{
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("name", arguments[0]);
element.setAttribute("type", arguments[1]);
element.setAttribute("value", arguments[2]);
document.formname.appendChild(element);
}catch(e){
alert( e );
}
}
I have not has an alert and I have not seen any elements get added, so can someone assist with what might be going wrong?
I dynamically created a table with three columns.
<tr>
<td>1</td>
<td>SegName</td>
<td><input type='text' /></td>
</tr>
I'm trying to write a function that goes through each row and grabs the value in that will be in the textbox.
Javascript:
$("#codeSegmentBody").children().eq(x).children().eq(2).val();
The code brings brings up undefined when I do val(), but if I do html it'll grab the html of the textbox.
How can I get this to bring me the value?
<table id="test">
<tr>
<td>
<input type="text" value="123">
</td>
</tr>
<tr>
<td>
<input type="text" value="abc">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#test").find(":input[type=text]").each(function(){
alert( $(this).val() );
});
});
</script>
Here is a fiddle that will get you there:
http://jsfiddle.net/uS8AK/
Assuming #codeSegmentBody is the name of your table, try this:
$("#codeSegmentBody td input").each(function() {
var inputValue = $(this).val();
alert(inputValue);
});
Example fiddle
$("#codeSegmentBody tr input[type='text']").each(function(){
alert($(this).val());
})
Try this
$("#codeSegmentBody tr").each(function() {
alert($(this).find("input").val());
});
You are referencing the containing <td> not the input. Try:
$("#codeSegmentBody").children().eq(x).find(":text").val();
var str = "";
$("#codeSegmentBody .third-column input").each(function()
{
str += this.value;
});
alert(str);
Not easier
$("table tr td input").val();
?
BTW. You don't have any value in this input anyway.