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.)

Javascript getting the value of an input in a table [duplicate]

This question already has answers here:
How to retrieve value of input type in a dynamic table
(6 answers)
Closed 7 years ago.
I'm just wondering if it's possible to get the value of an html input in a table without naming each input separately and using getElementById directly onto the input so if I had the following table
<table id="table01">
<tr>
<td>row 0 cell 0</td>
<td>row 0 cell 1</td>
</tr>
<tr>
<td>row 1 cell 0</td>
<td>row 1 cell 1</td>
</tr>
</table>
I know in Javascript you can use the following to get the value of a specific cell in a specific row using the following
var lv_value = document.getElementById("table01").rows[0].cells[1].innerHTML;
console.log(lv_cont);
and this would give me the value I want which is "row 0 cell 1".
If I had a table like the following however
<table id="table01">
<tr>
<td>row 0 cell 0</td>
<td>row 0 cell 1</td>
<td><input type="text" class="tbl_input"></input></td>
</tr>
<tr>
<td>row 1 cell 0</td>
<td>row 1 cell 1</td>
<td><input type="text" class="tbl_input"></input></td>
</tr>
</table>
Is it then possible to do something along the lines of
<!-- this is obviously wrong -->
var lv_input = document.getElementById("table01").rows[0].cells[2].input.value;
console.log(lv_input);
to get the value of the input in the first row

You should do something like this:
var lv_input = document.getElementById("table01").rows[0].cells[2].firstChild.value;
console.log(lv_input);
or use the querySelector to find the input element
var lv_input = document.getElementById("table01").rows[0].cells[2].querySelector('input').value;
console.log(lv_input);

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)
}

Set colspan/rowspan for a cell

I have a table and I want to change colspan/rowspan property of a cell on runtime. Here is an example:
<html>
<head>
<script type="text/javascript">
function setColSpan() {
document.getElementById('myTable').rows[0].cells[0].colSpan = 2
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="Change colspan">
</form>
</body>
</html>
My problem is that the cells shift. Am I supposed to remove the cells over which the cell in question spans?
I can I do without removing?
I want to implement a simple spreadsheet. For now I managed to be able to select a rectangular range of cells and show a menu with a "Merge selected cells" option. I would like to be able to "unmerge" cells, so it would be good to span cells without having to remove other cells.

I think you need to delete the cell. Check with following code. What i did was removed the entire row and added new row with new column span
function setColSpan() {
var table = document.getElementById('myTable');
table.deleteRow(0);
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML= "cell 1"
cell.colSpan = 2
}

The cells shift because that's what you're telling it to do. You're defining a table like this:
<tr>
<td colspan="2">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
So the shift you're seeing is what I would expect.
If you want to merge cells, you would have to take the contents of all the merged cells, concat them into a single cell, and remove the rest. For the trivial example, it'd go like this:
function setColSpan() {
var myTable = document.getElementById('myTable');
var cell2html = myTable.rows[0].cells[1].innerHTML;
myTable.rows[0].deleteCell(1);
myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
myTable.rows[0].cells[0].colSpan = 2;
}
However a more robust solution is...kind of complicated. Especially if you want the ability to unmerge. You'd have to preserve the information of the old cell structure somehow...possibly with putting something like <span class="oldCell">cell 2</span> around merged data? And then checking for the existence of "oldCell" spans when unmerging? But then you would have to preserve that information through user edits. And figure out what that means for merging across rows and columns. And also figure out what that means for overlapping merges.