I want to get the data in the textarea which is in nested table. I use the row Index to get the data in that row.
I tried this , but it is not work.
var note = document.getElementById($index).cells[3];
var y = document.getElementsByTagName("textarea").value;
Here is the table.
<tr ng-repeat="(key, x) in records" id="{{$index}}">
<td>{{key}}</td>
<td>{{x.title}}</td>
<td>{{x.year}}</textarea></td>
<td>
<textarea rows="2" cols="30">{{x.note}}</textarea>
<button type="button" ng-click="update($index)">Update</button>
</td>
<td><button type="button" ng-click="delete($index)">Delete</button></td>
</tr>
Note that you also have the ending of a previous textarea control here, which might cause a problem for getElementsByTagName:
<td>{{x.year}}</textarea></td>
var y = document.getElementsByTagName("textarea")[0].value;
alert(y);
<tr>
<td>17</td>
<td>Title</td>
<td>Year</td>
<td>
<textarea rows="2" cols="30">this is my note</textarea>
<button type="button">Update</button>
</td>
<td><button type="button">Delete</button></td>
</tr>
Maybe here is the error, you are closing a textarea:
<td>{{x.year}}</td>
After try with it:
var y = document.getElementsByTagName("textarea")[0].value;
Related
I have the following structure in my HTML in an angular 7 application:
What I am trying to do is to call the GetContent() function on click of any of the text inside the div. I am able to get the $event as "Liquidity" when I click on the text but if I click on any empty space between the text, the $event is empty. I tried every possible permutation of changing the location of the function call and id but same issue. Can anyone let me know what is wrong.
<tr (click)="GetContent($event)">
<td>
<table>
<tbody>
<tr>
<td>
<div id="Liquidity"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
Because there is no content in your TR's and TD's, its not creating a space at all. Look at my code, I have added padding for table row's ,table and table data tags
<table>
<tbody>
<tr (click)="GetContent($event)" >
<td style="padding:20px;background:red">TD
<table style="padding:20px;background:green">Table
<tbody>
<tr>
<td style="padding:20px;background:blue">TD
<div id="Liquidity" style="padding:10px;background:green"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
</tbody>
</table>
example stackblitz
Do it this way ,
UPDATED
<table>
<tbody>
<tr>
<td>
<div id="Liquidity" (click)="GetContent($event)"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
ts file
GetContent(event) {
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue;
console.log(value) //you will get liquid here.
}
I am newbie to front-end development. I need to display my data in an HTML <table> (fixed <td> width and height).
If the data exceeds the <td> width, I would like to provide a button to expand the width of <td>.
I am using a large number of table columns, and thus am not using, nor plan to maintain, a unique id for each element, so getElementById isn't an option.
My question is, can I pass a <td> object to onclick() event? Or, if not, is there any other way of doing it?
My code is posted below:
<script>
function myFunction()
{
<!-- Manipulate the object width-->
}
</script>
<body>
<table>
<tr>
<td>
<!-- Any way to pass td object to Function()-->
<button onclick= "Function()">Test</button>
</td>
</tr>
</table>
</body>
Any help is appreciated...
This should explain how to pass the current element to a function.
function myFunction(el) {
var tdEl = el.parentElement;
tdEl.style.width = tdEl.style.width == "100px" ? "200px" : "100px" ;
}
<body>
<table>
<tr>
<td style="width:100px">
<button onclick="myFunction(this)">Test1</button>
</td>
<td style="width:100px">
<button onclick="myFunction(this)">Test2</button>
</td>
<td style="width:100px">
<button onclick="myFunction(this)">Test3</button>
</td>
</tr>
</table>
</body>
As BlackPearl suggested you can access the td element from the button
<script>
function myFunction(target)
{
var td = target.parentElement;
td.style.width = "300px";
}
</script>
<body>
<table>
<tr>
<td>
<!-- Any way to pass td object to Function()-->
<button onclick= "Function(this)">Test</button>
</td>
</tr>
</table>
</body>
if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.
I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();
I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?
I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});
Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});
Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!
I have the following html table:
<tbody>
<tr>
<td class="rich-tabpanel-content">
<table>
<tbody>
<tr>
<td>
<span class="bold">Overview</span>
</td>
</tr>
<tr>
<td>
<input class="titleInput" type="text"></input>
</td>
</tr>
<tr>
<td>
<span class="bold">Shorttext</span>
</td>
</tr>
<tr>
<td>
<textarea class="shorttextInput"></textarea>
</td>
</tr>
<tr>
<td>
<span class="bold">Longtext</span>
</td>
</tr>
<tr>
<td>
<textarea class="longtextInput"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Now i want to select these tags in DOM:
<span class="bold">Overview</span>
<span class="bold">Shorttext</span>
<span class="bold">Longtext</span>
I have written these line of JQuery and Java Script Code to change the value of these HTML Tags, but the command
"jQuery(value).parent().prev();"
doesn´t select the right html tag in the DOM:
jQuery('.titleInput').each(function(index, value) {
selectAndExpand(value);
}
function selectAndExpand(value) {
var captionCell = jQuery(value).parent().prev();
captionCell.empty();
var newCaption = '<span class="bold">' + "HERE IS MY NEW INPUTVALUE" + '</span>';
captionCell.append(newCaption);
};
How can i solve this problem?
It is important to navigate for example from the node
<textarea class="longtextInput"></textarea>
to
<span class="bold">Longtext</span>
or from
<input class="titleInput" type="text"></input>
to
<span class="bold">Overview</span>
Use:
$('.bold').each(function(){
$(this).html("HERE IS MY NEW INPUTVALUE")
});
Working Fiddle
With Javascript:
var elements = document.getElementsByClassName('bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
With jQuery:
var elements = $('.bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
or...
console.log($('td:contains("Overview")'));
console.log($('td:contains("Shorttext")'));
console.log($('td:contains("Longtext")'));
Cheers.
You can select them by class name (when the class name is the same, in your case "bold"):
$(".bold");
To select all textareas after them and set values to these "bold" - element use
var spans = $(".bold");
$.each(spans, function(index, item) {
var spanTd = $(item).closest("tr");
var value = $(spanTd).next().find("textarea").val();
if (value === undefined) { //if there aren't textarea - get textbox.
value = $(spanTd).next().find("input[type='text']").val();
}
$(item).html(value);
});
EDIT: Demo - http://jsfiddle.net/h9fpy/
use class selector in your case use $('.bold') to select the span class bold and you can easily navigate to prev and next like $('.bold').parent('tr').next().find('.bold'); and also give the bold class to your input elements so that we can easily navigate.