We Keep Coding

Make html layout and use it with JS

I have a table with some data:
<table id="myTable">
<thead>
<tr>
<th><h1>Name</h1></th>
<th><h1>Picture</h1></th>
<th><h1>Likes</h1></th>
<th><h1>Time</h1></th>
</tr>
</thead>
<tbody>
***loop***
<tr>
<td>{placeholder1}</td>
<td><img src="{placeholder2}" alt=""></td>
<td>{placeholder3}</td>
<td>{placeholder4}</td>
</tr>
***end loop***
</tbody>
</table>
I have a js function who gets some data from server by POST request every 10 minutes. <tr></tr> block needs to be repeated several times.
HTML code become more and more complex and I need a solution with layouts and placeholders. I need a direction to search :)
All I need is:
Store <tr></tr> pattern with placeholders to insert it into my webpage. How could I achieve it with js?
How could I mark the places where I need data to be inserted?

Okay since you are using jQuery,
This may be your HTML
<table>
<tbody id="myTableBody">
<!-- Your elements will be placed here -->
</tbody>
</table>
I will assume you are using $.ajax or $.post in either of those, add a callback function property success
$.ajax({
// ... your properties,
success: function(data) {
// basic template for of your "tr"
var trTemplate = [
'<tr>',
'<td></td>',
'<td><img src="" alt=""></td>',
'<td></td>',
'<td></td>',
'</tr>'
].join('')
// get the tbody elemen
var $myBody = $('#myTableBody')
// if you want to clean up the current content of $myBody,
// if it is not the case just remove the following line
$myBody.empty()
// assuming data is an array of elements / entities
data.forEach(function(element){
var $tr = $(trTemplate)
$tr.find('td').eq(0).text(element.placeholder1)
$tr.find('img').attr('src', element.placeholder2)
$tr.find('td').eq(2).text(element.placeholder3)
$tr.find('td').eq(3).text(element.placeholder4)
$myBody.append($tr)
})
}
})
This is example of how you could do it, there are many ways to improve this for performance and so on. Please use it only as reference

If you're using jQuery then this is pretty straightforward. You need to id your elements so that you can reference them individually. Say you start with:
<tr id="tr-0" >
content...
</tr>
and then in javascript..
var id = $('#tr-0').attr('id');
var num = parseInt(id.substring(3));
num++;
$('#tr-0').after('<tr id='+num+'>content...</tr>');
obviously you need to figure how you're getting the content for each row but hopefully you can see that it wouldn't be too hard to fill each row with custom data.

Although you can use jQuery, simpler ways exist. jQuery will require you to add additional steps that aren't really necessary. If you want to use as few Javascript packages as possible, go with jQuery.
But, I highly recommend Vue.js for Laravel projects. There are instructions from Laracasts on how to set it up. But, I have created a jsfiddle with a working set of Vue.js with the v-for directive. Checkout the JSFiddle here.
If you have questions, I'll answer as much as I can.

can anyone help me improve this code in tb getting value through javascripts

i'm trying to get values of table from javascript. The code is working fine however i was wondering if it could be improved somehow and make sure it works on almost all of the modern browsers. The table list is changed more often and list is about 100 names long so that's why im asking for help. i would like to say thank you in advance for helping.Below is sample of my code and here is http://jsfiddle.net/g2s1ahcy/
HTML
<tr>
<td>left</td>
<td><a id="toppart" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a id="label1" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a id="label2" href="/">Name</a></td>
</tr>
Javascript
document.getElementById("toppart").textContent="desc";
document.getElementById("label1").textContent="apple";
document.getElementById("label2").textContent="orange";

1) I would use innerText or innerHTML instead of textContent
2) Maybe you could use querySelector instead of getElementById
HTML
<table class="data">
<tr>
<td>left</td>
<td><a class="label1" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a class="label2" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a class="label3" href="/">Name</a></td>
</tr>
</table>
JavaScript
document.querySelector('table > .label1').innerText = "apple";
document.querySelector('table > .label2').innerText = "oranges";
document.querySelector('table > .label3').innerText = "bananas";
Note that you can use the id attribute alright, but in long documents, id tags may become hard to maintain unique, giving you additional trouble.

I think the multiple lines of code can be simplified via using a map which maps each id-text_context pair.
Replcae code:
document.getElementById("toppart").textContent="desc";
document.getElementById("label1").textContent="apple";
document.getElementById("label2").textContent="orange";
With:
var id2Content = {
"toppart": "desc",
"label1": "apple",
"label2": "orange"
};
for(var key in id2Content) {
document.getElementById(key).textContent = id2Content[key];
}

innerText doesn't work in firefox, so it's better to use innerHTML or textContent. You should take in account that innerHTML parses HTML code, like <div id ="x"> or <a href="">... which is great but also takes resources (if you don't need that funtionality, better use textContent instead).
Also, in processing terms, document.querySelector('#id1') is equivalent to document.getElementById(id1), but most advanced jQuery selectors overload the system, so you I'll recommend to use id selectors whenever you can.

Accessing next sibling

I have a HTML snippet like below :
<tr><td></br></td></tr>
<tr title="title"><td></td><td>凝固検査専用容器</td></tr>
<tr id='map_6011' />
<tr id='map_6012' />
<tr id='map_6010' />
<tr id='map_6184' />
<tr id='map_6336' />
<tr><td></br></td></tr>
<tr title="title"><td></td><td>血糖専用容器(NaF入り)</td></tr>
<tr id='map_2055' />
<tr id='map_3471' />
<tr><td></br></td></tr>
<tr title="title"><td></td><td>ｱﾝﾓﾆｱ専用容器</td></tr>
<tr id='map_2142' />
First I want to select each TR tag with the title "title", and then first sibling of that particular TR tag.(ie, next TR with an ID like 'map_xxxx').
I have my javascript like this :
var lblTRs=$("tr[title=title]");
for(var i=0;i<lblTRs.length;i++){
var obj=lblTRs[i];
var firstTRSibling=obj.nextSibling;
alert(firstTRSibling); //this gives [object Text]
}
But it doesn't give the actual TR sibling.The alert() gives [object Text].
What am I doing wrong here ?

Try like this:
var firstTRSibling;
while((firstTRSibling=obj.nextSibling).nodeType !== 3){
// ^-----indicates TEXT_NODE
obj=obj.nextSibling;
}
alert(firstTRSibling);
You have extra white-space characters between DOM elements, and they will be treated as text nodes.

I think you can simply use next:
$("tr[title='title']").each(function() {
var element = $(this).next();
});
BTW, <tr> should have closing tags (i.e. </tr>) and also contain the specified number of <td></td> tags inside.

Your problem is that the white space between each pair of <tr> elements is represented as a text node in the DOM. However, there are seemingly little-known properties of of table-related elements that make dealing with this quite easy. Specifically in this case, the rows property of <table> elements and the rowIndex property of <tr> elements. Assuming you have a <tr> element stored in a variable called tr, all you need is:
tr.parentNode.rows[tr.rowIndex + 1];
This works in all major browsers back to IE 4 and is part of the DOM standard. It is also faster and more compatible than using jQuery or another library.

Ok,I should use
var firstTRSibling=obj.nextSibling.nextSibling;
But why?_

As you're already are using jQuery, i'd recommend to use jQuery built-in next function.
It could be somthing like var lblTRs=$("tr[title=title]").next("tr");

jquery append and jquery html not working in IE 7 or 8

I have the following code in an external JavaScript file that is called within <head>:
function dailyDealWidget() {
$.getJSON('http://myurlhere.com?_render=json', function(data) {
$('#dd-thumb').append('<img src="'+data.value.items[0].deals.deal.splashpagemainimage+'" />');
$('#dd-description').append(data.value.items[0].deals.deal.offer+' from '+data.value.items[0].deals.deal.merchantname);
$('#dd-value').append('$'+data.value.items[0].deals.deal.productvalue);
$('#dd-discount').append(data.value.items[0].deals.deal.totaldealcount+'%');
$('#dd-price').append('$'+data.value.items[0].deals.deal.saleprice);
$('#dd-sold').append(data.value.items[0].deals.deal.inventorytaken+' Sold');
}); //End json
}
Within <body> I have this:
<script type="text/javascript">dailyDealWidget()</script>
<div id="dd-widget"></div>`
<div id="dd-widget">
<div id="dd-container">
<div id="dd-thumb"></div>
<div id="dd-infobox">
<div id="dd-description"></div>
<table width="165px" cellpadding="0" cellspacing="0">
<tr>
<th>Value</th>
<th>Discount</th>
<th>Save</th>
</tr>
<tr>
<td id="dd-value"></td>
<td id="dd-discount"></td>
<td id="dd-price"></td>
</tr>
<tr>
<td colspan="3" id="dd-sold"></td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
</div><!--End container-->
</div><!--End dd-widget-->
It appears that .append() is not adding the content to the desired locations in IE. I've also tried using .html() rather than .append() but without any luck.
There are no errors in the console... both in Firebug and in IE's developer tools.
Any help would be appreciated.

Try to invoke dailyDealWidget after the page has been loaded.

.append() & .html() DO work in IE 7 & 8, so this is not the problem. Have you tested to make sure that the callback function for getJSON is actually being called? Have you examined the actual strings being passed to .append() prior to trying to perform the append itself?
Try logging something to the console at the beginning of the $.getJSON callback function to make sure that's actually running, and then try logging the strings you're passing to the .append() functions.

Are the DIV appends working and just not the TD appends? if so, try to re-draw the whole TR row into one variable then replace the existing row.

Prototype replace method giving null error

I'm new to prototype, but fairly experienced with jQuery so it could just be I'm misunderstanding how prototype works. I'm trying to do the following
$$("tr.total_line td.total_cell").first().replace(newTotal);
but I'm getting TypeError: Cannot read property 'firstChild' of null
When I execute $$("tr.total_line td.total_cell").first() in the JS console I get a DOM element result.
Here's the relevant markup
<tr class="total_line">
<td colspan="2">Total</td>
<td class="total_cell">$50.00</td>
<td></td>
</tr>

Since .first() is returning a <td> element, you'll need to insert a <td> or <th> in order for the replacement to be valid HTML.
So if newTotal is:
"<td>$100</td>"
...it should work. But if it is just:
"$100"
...it doesn't.
Or another option would be to replace the innerHTML of the <td>:
$$("tr.total_line td.total_cell").first().innerHTML = newTotal;

If replace continues to cause problems you can try update instead which works in a similar way.