<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script>
var table = "";
var example_array = [];
function tablething() {
index = document.getElementById("location").value;
value = document.getElementById("input_value").value;
addRow(index,value);
}
function addRow(index,value){
var rowBeg = "<tr><td>";
var rowEnd = "</td></tr>";
value = rowBeg + value + rowEnd;
example_array.splice(index,0,value);
console.log(example_array);
table.innerHTML = example_array;
console.log(table.innerHTML);
}
$( document ).ready(function() {
table = document.getElementById("example");
example_array = new Array();
});
</script>
</head>
<body>
<table id="example">
</table>
Location: <input type="text" id="location"/>
Value: <input type="text" id="input_value"/>
<button onclick="tablething()">Add</button>
</body>
</html>
The results in the console were
Array [ "<tr><td>0</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr></tbody>" dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr></tbody>," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></tbody>,," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>", "<tr><td>3</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody>,,,"
My doubt is
why is this code adding a ma at the end of the innerHTML each time the method addRow is called?
example_array.join("") seems to achieve what i am intending to do but is the toString method also not returning the same content as the join method?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script>
var table = "";
var example_array = [];
function tablething() {
index = document.getElementById("location").value;
value = document.getElementById("input_value").value;
addRow(index,value);
}
function addRow(index,value){
var rowBeg = "<tr><td>";
var rowEnd = "</td></tr>";
value = rowBeg + value + rowEnd;
example_array.splice(index,0,value);
console.log(example_array);
table.innerHTML = example_array;
console.log(table.innerHTML);
}
$( document ).ready(function() {
table = document.getElementById("example");
example_array = new Array();
});
</script>
</head>
<body>
<table id="example">
</table>
Location: <input type="text" id="location"/>
Value: <input type="text" id="input_value"/>
<button onclick="tablething()">Add</button>
</body>
</html>
The results in the console were
Array [ "<tr><td>0</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr></tbody>" dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr></tbody>," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></tbody>,," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>", "<tr><td>3</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody>,,,"
My doubt is
why is this code adding a ma at the end of the innerHTML each time the method addRow is called?
example_array.join("") seems to achieve what i am intending to do but is the toString method also not returning the same content as the join method?
- because... arrays have mas when stringified? hmm... – Kevin B Commented Aug 4, 2014 at 18:26
- @KevinB why are the mas at the end and not between each value.. if you look at the console output i have given you can see that the mas are appended at the end. – Thirumalai Parthasarathi Commented Aug 4, 2014 at 18:27
-
1
Not an answer, butwhy are you assigning an array to
innerHTML? – dee-see Commented Aug 4, 2014 at 18:28 - 2 probably due to the way the browser added the tbody, and the fact that a ma between two <tr> tags is invalid markup. The browser auto-corrected it by moving the ma to outside the tbody. – Kevin B Commented Aug 4, 2014 at 18:28
-
3
You should use
table.innerHTML = example_array.join("");. When the browser tries to stringify your array, it converts it to "..", "..." (probably by using join without parameters which got "," as standard-separator) which causes invalid html as @KevinB says and produces the output you got. – jbrosi Commented Aug 4, 2014 at 18:31
1 Answer
Reset to default 10When an array is converted to a string, it adds mas between the values.
This will use spaces between the values instead
table.innerHTML = example_array.join(" ");