I am working on developing an html table using JavaScript and I am always creating three rows. However, there is a condition in which it creates two full rows and the last row is an empty row. How can I check to see if the last row is empty before adding it to my table? I do NOT want to add the row if it is empty.
const element = document.getElementById("two_weeks");
element.appendChild(tble_row);
element.appendChild(tble_row2);
element.appendChild(tble_row3);
Element is my HTML table and tble_row3 is an HTMLTableRowElement.
Shoutout to #Teemu. He came up with the correct answer. This is what I did for it to work:
if (tble_row3.cells.length) {
element.appendChild(tble_row3);
}
This correctly displays rows that have content and does not display rows that are empty.
Related
How can I reach the first row and the first column (using javaScript) from a table in specific URL?
for example in the following URL:
https://www.w3schools.com/jsref/dom_obj_table.asp
In 'Table Object Methods', I want to get "createCaption()" .
Thanks!
you can try this...
you get value into rows of table HTML.
var row = document.getElementById("myTable").rows[0].innerHTML;
Using css you can do
var elem = element.all(by.css('table tr:nth-child(2) td:nth-child(1)').last();
This selects the first column from the second row that is in a table.
Using element.all because there are 3 tables it could apply to, which is why you need the .last() because the table you wanted referenced was the last table. Would work better if the table has an unique ID to reference it with.
I have two tables with same repeater : 'campaignSegmentLink in campaign.campaignSegmentLinks'.
When i use:
element.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
Protractor always gives back contents of first table.
How can i target the second table? I want the contents of second table not the first.
element.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
would return you all the "repeaters" - from the first and from the second table.
If you want to find rows from a second repeater occurrence, you need to find something unique about it - most likely (you haven't shown the HTML code) it is located in a different container which you can rely on, e.g.:
var container = element(by.css("div#myContainer"));
var rows = container.all(by.repeater('campaignSegmentLink in campaign.campaignSegmentLinks'))
Or, you can use filter() to filter out the rows from the second table.
See also:
Multiples ng-repeat in the same page
I have logic for cells in a row to be highlighted when the first cell text is clicked working just fine. When the page loads however, I want to default the first row to be highlighted as the first row is displaying some other data based on it's id.
What works when the first cell text (id) is clicked is:
$("#simHeaderTable").find("tr").each(function () {
var tdID = $(this).find("td:first-child").text();
if (tdID == ID)
$(this).children("td").css("background-color", "#FFFF66");
else
$(this).children("td").removeAttr("style");
});
So my logic was that this finds all rows and loops over them. I checked the first cell in each row and if the cells text is equal to some id I "highlight" it with some css. I unhighlight all the others.
So now inside document ready to highlight the first row on page load I figured I would just do the following, which doesn't result in anything getting highlighted.
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
To me, this finds the first tr/row and then finds all children that are cells/td and applies the css to set the background color to yellow. Any idea why this isn't working?
Your statement is much more complex than needed, instead of:
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
try:
$("#simHeaderTable tr:first-child > td").css("background-color", "#FFFF66");
You can even leave out the '>' unless you have nested tables.
Usually, you only use .find() when you have a cached selector like:
var cached_obj = $('#something');
// lots of code
var cached_obj.find('.something_else');
I have a HTML table that automatically adds a row when you enter data on the last row. Because of this automatic generation, the standard tab functionality breaks down. You can see an example of this table here. As such, I use jQuery to bounce back up to the parent row of the first ant last elements when shift-tab or tab is pressed. The code is relatively simple. . .
$(this).parents('tr').next('tr');
No matter what I do, $(this).parents('tr').index() is always returning 0. Thus next() always jumps to the second row of the table, even if I tab from the last field on the ninth row.
Any ideas? Is there a way that I can rebuild the table's tab index after I've added a row, or does anyone know why the row always thinks that it's index is 0?
I could not comment to Sushanth's answer so I'll give my own:
You just need to use:
$(this).closest('tr').index()
The problem with Shushanth's code is that it is passing to index() a jQuery object which matches all the tr in the table. It would work if it was (subtle difference):
$(this).closest('tr').index('#tableid tr')
See my fiddle here.
Try using index with a specific selector.
$tableRows = $('#tableid tr');
$currRow = $(this).closest('tr');
var index = $currRow.index($tableRows);
I am trying to add a value to a gridView column on a specific row via Javascript. Previously I have done this via .NET.
But now I want to try this alternative:-
document.getElementById('<%=GridView1.ClientID%%>').rows[1].cells[1].value = IDentification#;
This is obviously not the correct syntax. Any ideas?
It should be innerHTML not value
document.getElementById('<%=GridView1.ClientID%>')
.rows[1]
.cells[1]
.innerHTML= yourvariable; //or "astring"
This will insert the text in your variable to 2nd row's 2nd column of the table rendered by the gridview.