We Keep Coding

How print and image with react map function

My web app will open a array of JSON with map function, i need when the react the an "" the image get write on the table and the link on the image still active, my function is:
<table className="table">
<thead className=".thead-dark">
<tr>
<td>Id</td>
<td>Name</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
{this.state.contatos.map((contato, index) => (<>
<tr>
<td>{contato.id}</td>
<td>{contato.nome}</td>
<td>{contato.telefone}</td>
</tr>
</>))}
</tbody>
</table>
this is my sql db
INSERT INTO contatos(nome,telefone) VALUES ('<a><img src="example.com"</img></a>','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Carey Shers','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Bill Manys','298-2125');
INSERT INTO contatos(nome,telefone) VALUES ('john peter','465-1827');

Ideally, you'd want to store names and image urls in different columns in a db and work in a way that if name exists - show name, else, show image.
Assuming that is something that can not be changed, you can just use react's dangerouslySetInnerHTML property to set the name. So it wouldn't matter if it's a name or an image as the code would work for both the scenarios.
so you'd replace
<td>{contato.nome}</td>
with -
<td dangerouslySetInnerHTML={{ __html: contato.nome }} />
Also, whenever you're using dangerouslySetInnerHTML, make sure that the data that is coming from the DB is safe. Else your website can be prone to XSS attacks.

.each() function on affect current object

having some issues with my code below, first here is the HTML:
<table class="finance-table">
<tbody><tr>
<th></th>
<th>Deposit</th>
<th>Balance</th>
<th>Fees</th>
<th>Total Payable</th>
<th>Term</th>
<th>Fixed Rate</th>
<th>Representative APR</th>
<th>Monthly Pmt</th>
</tr>
<tr class="hp">
<td><strong>HP</strong></td>
<td id="td_finance_deposit">£11700.00</td>
<td id="td_finance_balance">£105300.00</td>
<td id="td_finance_fees">£298.00</td>
<td id="td_finance_total_inc_deposit">£146255.50</td>
<td id="td_finance_term">60 mths</td>
<td id="td_finance_rate">5.50%</td>
<td id="td_finance_apr">10.1%</td>
<td id="td_finance_monthly_payments">£2242.59 p/m* x 60 mths</td>
</tr>
</tbody></table>
There is about 10 of these tables [within the same document], all with the same id's and class's. I'm using an each loop to execute some code against each table found, however it only seems to be working on the first table and disregards the others.
Below is the jQuery, like I said works find on the first table, but ignores the rest!
<!-- Remove First and Final Payment from Showroom Finance Examples -->
<script>
$(".finance-table").each(function(key, value) {
// Display loading
var html = $(this);
// Remove the First Payment and Final Payment Column
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
$(this).find("th:contains('1st Pmt')").remove(); $(this).find("th:contains('Final Pmt')").remove();
// Get the Term and update the monthly payment
var term = $(this).find("#td_finance_term").html(); // .replace(/\D/g,'')
var payments = ($(this).find("#td_finance_monthly_payments").html()).split('x')[0];
($(this).find("#td_finance_monthly_payments")).html(payments + " x " + term);
})
</script>
Edit:
Please note, I can't change the HTML at all

You should first give a unique ID to each <td>, perhaps with your DB identifier for that record. You don't need it now but this will allow you to do other thing later if you need it.
Then change all the <td> ids to classes:
<td class="td_finance_fees">£298.00</td>
Finally change all your javascript accordingly to use class instead of IDs:
$(this).find(".td_finance_first_payment, .td_finance_final_payment").remove();

Using Attribute Equals Selector
Change your code from:
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
to:
$(this).find('td[id="td_finance_first_payment"], td[id="td_finance_final_payment"]').remove();
Do this type of change for all areas of #xxx to id="xxx"
What this does is find all tds with attribute id="xxx", rather than using #id identifier, this is forces jQuery to do a tree search.
Also your HTML does not match your code, (theres no td_finance_first_payment in your html, I assume you removed it?)
Edit: This solution is useful if you 100% cannot edit the html (comes from a source you have no control over, such as an API or internal software). Best solution would be to fix the ids!

Vue.js block repeat table rows doesn't work in IE

I would like to repeat adding table rows using a template tag with vue.js, but it doesn't work in IE11. Here is the code.
<table border="1">
<tr>
<td rowspan="2">ID</td>
<td colspan="2">Name</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<template v-repeat="items">
<tr>
<td rowspan="2">{{id}}</td>
<td colspan="2">{{name}}</td>
</tr>
<tr>
<td>{{height}}</td>
<td>{{weight}}</td>
</tr>
</template>
</table>
Any help?

See http://vuejs.org/guide/components.html#Using_Components and the warning at the end of that section:
The table element has restrictions on what elements can appear inside
it, so custom elements will be hoisted out and not render properly. In
those cases you can use the component directive syntax:
<tr v-component="my-component"></tr>.

I found a solution that changed the <template> tag to a <tbody> tag. However there would be multiple <tbody> tags in a table, I hope this is the best solution in this case.

Make a long story short, This is HTML restrictions in IE, if you want compatibility, you will have to change your HTML structure.
I found an issue with similar question like yours here: https://github.com/vuejs/vue/issues/2404
Vue renders the template into real html before compiling it, so the same html restrictions apply for Vue templates, no matter how you define it.
IE does not support inside elements like , ..

jquery not picking up html

So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?

You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.

Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly

If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class

AJAX response with TD tags replacing table row is placed nasty in Chrome

I am trying to use editInPlace JavaScript code with Python & Django on Google App Engine.
After editing the row of the table:
<table>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
</table>
Which looks like this:
___ ___ ___
|___|___|___|
|___|___|___|
|___|___|___|
I maid that editInPlace JavaScript would save original string like "<td>Date</td><td>Description</td><td>Details</td>" by replacing it with striped string without <td> (ex. "Date Description Details") placing the string in to the <td colspan="3"><form>...</form></td> for editor to edit.
So here I prepared that the Http Response after submitting a new value would also be imitating 3 cols, I mean would have <td></td> tags (ex. "<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>") to be placed in between <tr></tr> tags.
But the problem is such that after AJAX replacing values without refreshing hole page, gives me nasty table.
All the row in Chrome v12 is like moved a side and starts filling from the second col:
___ ___ ___
|___|___|___|___
___|___|___|___|
|___|___|___|

Please use Chrome Developer Tools to inspect the affected row after it has been edited (and displayed in the wrong way) - right-click on any cell and select "Inspect Element" in the popup menu. The DevTools window will show up, and you will be able to examine (in the Elements panel) whether the final DOM is correct. If it is, then it's a Chrome/WebKit bug.

Summary of my problem
After sometime debugging my issue i found my problem was caused by the following situation.
A class with a style content: "" being applied to a target TR prior to an ajax call which would replace the TDs with a fresh set of TDs, then, after removing that class I had the same problem as the OP; The end result was the shifting of the TDs to the right. The HTML on inspection was sound.
In detail this is what I had.
I had a TR which was my targetId container.
I had a TD with an ajax link that then returned a set of TDs to replace the old set within the targetId TR.
I am using jquery ajax and prior to the call I applied a class to the targetId TR, the class of which can be found in this answer and contains the content: "" style.
After the ajax call completes, removing that class.
This is what I ended up doing.
The ajax masking class I was using for the targetId, I replaced with a new class that just did some opacity. I kept the ajax masking class for the sender control.
Relating to the OP's problem
I downloaded and searched the "jquery-editinplace" the OP uses but could not find a content style being applied. Maybe someone with good search tools may find it. As stated in the comments above, the problem disappeared when chrome upgraded. This is my case of it remaining because of something possibly related.
I have not made a fiddle of this situation as I had trouble creating an ajax scenario. I would have liked to to prove it is a chrome bug and to submit it to Google.
Feel free to comment if something is unclear and I will update my answer accordingly.

To me, use same Id on multiple <tr> seems awkward.
It might cause some weird behavior.
Keep your unique Id per DOM.
Also I would use
<div>
Instead of tables
because with <div>, you can get more control with CSS.
HTML:
<div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
</div>
CSS:
.editme { clear:both; }
.editme div { float:left; }
So after changing your HTML and CSS like this
you can simply replace those three divs
with a single DIV with FORM
Here is an example of DIV version