So the normal way to insert a HTML element is by writing
$("#addingRow").before(`
<tr id="customer`+customer.id+`">
<td class="id">`+customer.id+`
</td>
<td class="firstname"><input type="text" value="`+customer.firstname+`"/>
</td>
<td class="lastname"><input type="text" value="`+customer.lastname+`"/>
</td>
<td class="email"><input type="text" value="`+customer.email+`"/>
</td>
<td>
<button onclick="onClickSave(`+customer.id+`)">Save</button>
<button onclick="onClickDelete(`+customer.id+`)">Delete</button>
</td>
</tr>
`)
or some function similar to this like (prepend, before, ...)
Is there some way to insert the HTML element without using the string tags?
Like in Angular where you only have to write *ngFor inside the HTML code.
Related
I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name1:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name2:</td>
<td class="content_column">{{element[0].matched_keyword}}</td>
</tr>
<tr>
<td class="header_column">Subject1:</td>
<td class="content_column">{{element[0].nlp_matched_sentence}}</td>
</tr>
<tr>
<td class="header_column">bold value1:</td>
<td class="content_column">{{x}}</td>
</tr>
<tr>
<td class="header_column">bold value2:</td>
<td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
</tr>
</table>
.ts file
element = [
{
id: 5636,
matched_keyword: "test",
nlp_matched_sentence:
"The <strong>Air Force</strong> Test Center"
}
];
after my research I got 3 solutions but none of them are working for me. please check the demo for more information.
stackbliz demo
Take a look at demo code
You need to add [innerHTML] as below:
<td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>
To set html content programatically, we need to use innerHTML.
To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}
To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""
Change your html code like below,
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name:</td>
<td class="content_column">{{ element[0].matched_keyword }}</td>
</tr>
<tr>
<td class="header_column">Subject:</td>
<td class="content_column">
<div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
</td>
</tr>
<tr>
<td class="header_column">bold value:</td>
<td class="content_column"><div innerHTML="{{ x }}"></div></td>
</tr>
</table>
Empty Text is not showing In table
I am using table
which is empty Now
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Privilege Name</th>
<th>PageUrl</th>
<th>Can Add</th>
<th>Can Edit</th>
<th>Can Delete</th>
<th>Can View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in getAssignedPrivilegeslist" ng-show="getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'">
<td>{{$index+1}}</td>
<td>{{obj.PageName}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.PageUrl}}</a></td>
<td>
<input type="checkbox" name="Add" value="Add" ng-model="obj.CanCreate" />
</td>
<td>
<input type="checkbox" name="Edit" value="Edit" ng-model="obj.CanEdit" />
</td>
<td>
<input type="checkbox" name="Delete" value="Delete" ng-model="obj.CanDelete" />
</td>
<td>
<input type="checkbox" name="View" value="View" ng-model="obj.CanView" />
</td>
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">Please Select Operator</td>
</tr>
</tbody>
</table>
Then I set a <td> if data length is 0 then show the given message but it is not showing.
Please help I will be very thankful to you all.
These three changes you have to made in your code :
Instead of ng-show="getAssignedPrivilegeslist.length !=0" you can use ng-show="getAssignedPrivilegeslist.length". As suggested by Harris Weinstein in his comment that if the list's length is any number besides 0, it'll evaluate as true, and if it's 0 or can't be accessed (because it's undefined), it'll evaluate as false.
Instead of using string literal getAssignedPrivilegeslist !='null' use getAssignedPrivilegeslist !=null.
Put your element having error message outside the <tr> as you already put the ng-show="getAssignedPrivilegeslist.length !=0" in the <tr> tag.
You can use like this outside your <tr> tag as suggested by sexta13:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
You have your logic not very well structured.
You have your
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">
Please Select Operator
</td>
inside a ng-repeat that will only happen if getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'
You should have another tr outside the ng-repeat with something like this:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
I have an HTML Table like the following.
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="total">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount">
<div id="discount"><input type="text" name="disco" class="dis"></div>
<input type="button" id="discount" name="apply" value="apply"/>
</td>
</tr>
</table>
I want the value of the input field with class=dis to a Javascript variable. I already tried the following, but failed.I am a noob in jQuery.
$("#items #disc").val();
#disc is a tr. The input has the class dis. Try like following.
$("#items #disc .dis").val();
I'm trying to parse this HTML:
<tr id="a">
<td class="classA">
<span class="classB">Toronto</span>
</td>
<td class="classC">
<span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA">
<span class="classB">Montreal</span>
</td>
<td class="classC">
<span class="classD">Calgary</span>
</td>
</tr>
I have a variable team. I want to find the <span> that contains team. Then I want to navigate up to the <tr> and pull the id from it.
I tried:
var team = "Toronto";
var id = $("span:contains(" + team + ")").parent().parent().attr('id');
But it comes back undefined. I know the selector is right, because $("span:contains(" + team + ")").attr('class') comes back with classB. So I can't figure out what's wrong with my query. Can anyone help?
Edit: Here's the JSFiddle.
Your html is invalid but your selector is correct, you need to put tr in table tag for valid html. You better use closest("tr") instead of .parent().parent()
Live Demo
<table>
<tr id="a">
<td class="classA"> <span class="classB">Toronto</span>
</td>
<td class="classC"> <span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA"> <span class="classB">Montreal</span>
</td>
<td class="classC"> <span class="classD">Calgary</span>
</td>
</tr>
</table>
It's not working becuase the browser's automatically fixing your HTML. You can't have a TR without a table so it's just throwing it away. All that's actually part of the DOM by the time your JavaScript runs is the spans.
Wrap it in a <table> and your code will work. Even better wrap it in <table><tbody> because the browser will still be making a tbody for you with just a table & that might cause confusion next (If you look at the parent of the TR).
Currently your HTML markup is invalid, you need to wrap <tr> element inside <table>:
<table>
<tr id="a">
<td class="classA"> <span class="classB">Toronto</span>
</td>
<td class="classC"> <span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA"> <span class="classB">Montreal</span>
</td>
<td class="classC"> <span class="classD">Calgary</span>
</td>
</tr>
</table>
Also, it's better to use .closest() as well as .prop() instead of .parent() and .attr()
var id = $("span:contains(" + team + ")").closest('tr').prop('id');
Fiddle Demo
try:
var id = $("span:contains(" + team + ")").parent('td').parent('tr').attr('id');
Your code works good.Just wrap your code into <table></table>
HTML
<table>
<tr id="a">
<td class="classA">
<span class="classB">Toronto</span>
</td>
<td class="classC">
<span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA">
<span class="classB">Montreal</span>
</td>
<td class="classC">
<span class="classD">Calgary</span>
</td>
</tr>
</table>
Script
var team = "Toronto";
var id = $("span:contains(" + team + ")").closest('tr').prop('id');
console.log(id)
http://jsfiddle.net/7Eh7L/
Better use closest()
$("span:contains(" + team + ")").closest('tr').prop('id');
i've got a problem i don't know how do solve it.
On my web page i load a table dynamically (and only the user want to) from an other apex application with:
function getParameter (filter){
var url;
var html;
filter = filter.replace(/ /g,'%20')
url = 'http://xxx.xxx.xxx.xxxx:8080/apex/f?p=PAR_PARAMETER:1:'+APP_SESSION+
':IR_REPORT_Query_Parameter::RIR,CIR:IR_P_SYS.SZGETTEXT(T.EZS_NO):'+filter;
html = $('#ParameterSettings').load(url +' .apexir_WORKSHEET_DATA');
}
this works fine.
My problem now is that the user can choose between: I want to edit the values, in this case the value col (display only) will be replaced with:
'<input type="text" value="|HTML|" size="30" maxlength="4000" class="P3_PARAMETER_VALUES">'
This also works fine, but how can i get the values that the user can now enter into the input field?
The table bevor it is editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr>
<tr class="even">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.data.source.trip</td>
<td align="left" headers="Value">tadaaa</td>
<td align="left" headers="Default">0</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Data source for trips to use in the query: 0 = all, 1 = online recorded data, 2 = vehicle recorded data</td>
<td align="left" headers="Max">2</td>
<td align="left" headers="Min">0</td>
</tr>
</tbody>
</table>
</div>
after switch to editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr class="odd">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.grid.value.size</td>
<td align="left" headers="Value">
<input class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
</td>
<td align="left" headers="Default">60</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Default data query value grid size</td>
<td align="left" headers="Max">43200</td>
<td align="left" headers="Min">10</td>
</tr>
</tbody>
</table>
</div>
thanks
mario
if any one need more code just leave a comment.
If you're able to alter the HTML, then the simplest answer would be to ensure you add a unique id to each new input element.
<input id="VALUE_1" class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
Then you can access with normal JavaScript
var value1 = document.getElementById('VALUE_1').value;
You could make this sort of selection more powerful by using a JavaScript library like jQuery:
http://jquery.com/
You may also want to look into contenteditable:
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable