Develop Reference

Vuejs - tr row not showing 100% when adding display block

In my VuewJS application, I want to be able to click a row and show/hide the row below. However, when I do that I get a weird bug were the row below only fills one column width.
Here is my table structure:
NOTE: This table is generated dynamically.
The top row with 4 columns has an attribute of id and the long row that fills up 4 columns has a a data attribute data-body-id.
<tr v-bind:key="data.id" v-bind:id="index" v-on:click="rowClick(index)">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
<tr v-bind:key="data.id" v-bind:data-body-id="index">
<td colspan="4">Col 5 (This is a really long 4 colspan row ..............)</td>
</tr>
which computes as:
<tr data-v-1a25d82d="" id="0">
<td data-v-1a25d82d="">Col 1</td>
<td data-v-1a25d82d="">Col 2</td>
<td data-v-1a25d82d="">Col 3</td>
<td data-v-1a25d82d="">Col 4</td>
</tr>
<tr data-v-1a25d82d="" data-body-id="0">
<td data-v-1a25d82d="" colspan="4">Col 5 (This is a really long 4 colspan row ..............)</td>
</tr>
in my rowClick(index) method I have:
methods: {
rowClick(id) {
var dataId = "data-body-id='" + id + "'";
var row = document.querySelector('[' + dataId + ']');
row.style.display = 'block';
}
}
When I click a row, the row below is visible but it shows like so:
If I use the developer inspector and find the attribute and uncheck the display: none; that is set in the CSS initially to hide the row it shows perfectly.
What is going on and how do I fix it?

When trying to show dynamic table rows that are hidden please use:
display: 'table-row',
so in your case:
row.style.display = 'table-row';

create a .row.cells line for length of <tr>

Hello I want to create a script that takes the amount of (tr) it finds then creates these 3 lines of code but changes the number in them based on the number it gets of (tr) here is an example:
I have a line of code that counts the table rows in the table (after I press a button) minus the table header (th):
var rowCount = $('#items-table tr').length - 1;
what I want to do is say for example the number I get is 3, I want to duplicate these 3 lines of code and change the variable and the number inside them.
Here are the 3 lines of code I want to duplicate:
table = document.getElementById("items-table");
var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;
what I want to change is the var so I can define it later so if I got 3 this is what I would want the output to be:
var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;
var cell4 = table.rows[2].cells[0].innerHTML;
var cell5 = table.rows[2].cells[1].innerHTML;
var cell6 = table.rows[2].cells[2].innerHTML;
var cell7 = table.rows[3].cells[0].innerHTML;
var cell8 = table.rows[3].cells[1].innerHTML;
var cell9 = table.rows[3].cells[2].innerHTML;
How would I go about doing this? I would also want to great a variable that could represent all the var cell(s) like this
tableData = [] tableData.append(var cell7 = etc..)
so then I could take the tableData and:
localStorage.setItem("tableData", tableData);
so then I could call this table data variable inside another html file.
I would also like to localStorage the variable lines themselves so I could call them individually as-well.
localStorage.setItem("item-name-1", cell1);
How would I got about doing this?
Important Note: At the start of my html page the table is empty. I then append the data using several inputs and an add button.
Any Help is appreciated Thank you.

Use a variable with an array:
var table, cell, i, r, noofrows;
table = document.getElementById("items-table");
noofrows = table.rows.length;
for (i = 0, r = 0, cell = []; r < noofrows; i++, r++) {
cell[i] = table.rows[r].cells[0].innerHTML;
cell[i+1] = table.rows[r].cells[1].innerHTML;
cell[i+2] = table.rows[r].cells[2].innerHTML;
}
Then the first cell will be assigned to the variable cell[0], the second will be cell[1], etc. For example, document.write(cell[0]) will write "Item" (from your previous question).
document.write(cell[1]) will write "Size".
document.write(cell[3]) will write the first cell of row 2.

You're looking for an array, in your case probably an array of arrays:
let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
Live Example:
let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
console.log("cells:", cells);
.as-console-wrapper {
max-height: 100% !important;
}
<table id="items-table">
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
<td>Row 4 Cell 3</td>
</tr>
</tbody>
</table>
The Array.prototype.map.call part lets us use Array's built-in map function on rows and cells even though they aren't arrays, but are array-like. Alternatively, you could actually turn them into arrays with Array.from:
let cells = Array.from(document.getElementById("items-table").rows).map(row => {
return Array.from(row.cells).map(cell => cell.innerHTML);
});
Live Example:
let cells = Array.from(document.getElementById("items-table").rows).map(row => {
return Array.from(row.cells).map(cell => cell.innerHTML);
});
console.log("cells:", cells);
.as-console-wrapper {
max-height: 100% !important;
}
<table id="items-table">
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
<td>Row 4 Cell 3</td>
</tr>
</tbody>
</table>
Storing that in local storage is simply a call to JSON.stringify:
localStorage.setItem("tableData", JSON.stringify(cells));
Restoring it from local storage:
var cells = JSON.parse(localStorage.getItem("tableData") || "[]");
(The || "[]" part provides a default — an empty array — for when there is no tableData stored.)

Select the first cell of each row placed after a merged cell using JavaScript/jQuery

I have a table with class evo-table, which has two cells of row span of 4, followed by four rows with two cells each (Image). I want to select the first cell of each of these rows using JavaScript. I know I could simply add classes to cells and style it using CSS but I'm restricted to the Table structure below. I am able to select and add CSS to the first cell of the first row using $(".highlight").next().css("background","lightgreen"); but I'm not able to select the first cell of the rest of the rows. Here's the code:
HTML: (This is a DEMO only)
<table class="evo-table">
<tr>
<td rowspan="4">Merged Cell 1</td>
<td rowspan="4" class="highlight">Merged Cell 2</td>
<td>Unmerged Cell 1</td>
<td>Unmerged Cell 2</td>
</tr>
<tr>
<td>Unmerged Cell 3</td>
<td>Unmerged Cell 4</td>
</tr>
<tr>
<td>Unmerged Cell 5</td>
<td>Unmerged Cell 6</td>
</tr>
<tr>
<td>Unmerged Cell 7</td>
<td>Unmerged Cell 8</td>
</tr>
<table>
jQuery/JavaScript:
var tableObj = $(".evo-table");
var mergeLength = $(".evo-table .highlight").attr("rowspan");
var firstRowAfterHighlight = $(".evolution-table .highlight").parent().next().index + 1;
$(".highlight").next().css("background","lightgreen");
for (count = 0; count < mergeLength; count = count + 1) {
$(".evolution-table tr:nth-child(" + (firstRowAfterHighlight + count) + ") td:first-child:not(.highlight)").css("background-color", "green")
}
I am using the rowspan value of .highlight cell to find the number of rows (I could use $(".evo-table tr").length; to get it but the previous one is more useful in my case as I want to select rows which are immediately to the right of the cell) and I'm finding the index of the row after first row and using count variable of the for statement to move on to the next row, and using the :first-child selector on td to select the first cell of every row. The code doesn't seem to work.
jsFiddle
Please reply if you spot any errors in my code, need more details or have a solution. Thank you.

I used the .each function to iterate over every row. And then I used teh :not selector to ignore elements with the attribute [rowspan].
$(".evo-table tr").each(function () {
$(this).find("td:not([rowspan]):first").css("background-color", "red")
});
* {
font-family:Arial;
}
.evo-table {
border-collapse:collapse;
border:1px solid lightgrey;
}
.evo-table td {
padding:4px;
border: 1px solid lightgrey;
}
.highlight {
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="evo-table">
<tr>
<td rowspan="4">Merged Cell 1</td>
<td rowspan="4" class="highlight">Merged Cell 2</td>
<td>Unmerged Cell 1</td>
<td>Unmerged Cell 2</td>
</tr>
<tr>
<td>Unmerged Cell 3</td>
<td>Unmerged Cell 4</td>
</tr>
<tr>
<td>Unmerged Cell 5</td>
<td>Unmerged Cell 6</td>
</tr>
<tr>
<td>Unmerged Cell 7</td>
<td>Unmerged Cell 8</td>
</tr>
<table>
<div style="font-size:12px;color:lightgrey;">
Yellow = .highlight class; Green = Selected using jQuery;
</div>

If you just want to do this for styling, you don't need javascript, you can do it with plain CSS3:
td[rowspan] + td:not([rowspan]), tr > td:not([rowspan]):first-child {
background: red;
}
It selects a td without a rowspan that directly follows after a td with the rowspan attribute (the first tr) and all first td in a tr that do not have a rowspan attribute (all other tr).
If you want it in JavaScript, you can use the same CSS selector with jQuery. No need to loop over the table rows:
$('td[rowspan] + td:not([rowspan]), tr > td:not([rowspan]):first-child')

How can I loop through all elements of a certain type through jQuery?

There are some similar questions, but mine is a little bit more specific.
I have a table element with an id of "myTable" and some tr elements inside it (let's say the tr elements are 2).
<table id="myTable">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
If I try to see the number of rows in the #myTable table element, by writing
var numberOfRows = $("#myTable tr").length;
I always have 1 in the numberOfRows variable.
It only works when I add a class to all the tr elements.
<table id="myTable">
<tr class="myRows">
<td>Row 1</td>
</tr>
<tr class="myRows">
<td>Row 2</td>
</tr>
</table>
Let's say the class is "myRows" and write the following:
var numberOfRows = $("#myTable .myRows").length;
Then, I get the right number - 2.
So, my question is how can I get the number of certain elements or loop through them if they are not distinguished by a class (like in the example above)?

you can use like :
$('#myTable > tbody > tr').each(function() {...code...});

Pure JavaScript that also works in all meyor browsers
var rows=document.getElementById("myTable").rows;
for(var rowIndex=0;rowIndex<rows.lenght;rowIndex++){
//now do everything with tr $(rows[rowIndex]).height(80)
}

Get HTML table cells values in a rows by clicking on it

How can I get values of TDs inside an HTML table?
i.e.
| ID | cell 1 | cell 2 |
| 1 | aaaa | a2a2a2 |
| 2 | bbbb | b2b2b2 |
| 3 | cccc | c2c2c2 |
So now if I click on the cell value: "bbbb" I want to get all the values of selected row:
$id='2'; $cell_1='bbbb'; $cell_2='b2b2b2';
NOTE: I'd like to use JavaScript and not jQuery.

You can use event.target.innerText for javascript and $(event.target).text() for jQuery, jQuery is preferred solution as it handles cross browser competibilities.
Using only javascript
Live Demo
Html
<table id="tableID" onclick="myFun(event)" border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>​
Javascript
function myFun(e){
alert(e.target.innerText); //current cell
alert(e.target.parentNode.innerText); //Current row.
}​
Using jQuery
Live Demo
Html
<table id="tableID" border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>​
Javascript
$('#tableID').click(function(e){
alert($(e.target).text()); // using jQuery
})

var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function(){
console.log(this.innerHTML);
/* if you know it's going to be numeric:
console.log(parseInt(this.innerHTML),10);
*/
}
}
from here

Hope This helps you. It contains cross browser script.
<html>
<head>
<script type="text/javascript">
function myFun(e){
if(!e.target)
alert(e.srcElement.innerHTML);
else
alert(e.target.innerHTML);
}
</script>
</head>
<body>
<table id="tableID" onclick="myFun(event)" border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

Use of jquery will be easy..
$("#tableId").find("td").click(function(event){
var listOfCell=$(this).siblings();
for(i=0;i<listOfCell.length;i++){
alert($(listOfCell[i]).text());
}
});