We Keep Coding

How to alternate table row colors when your row has inner rows [duplicate]

This question already has an answer here:
nth-child to alternate by 2 rows [duplicate]
(1 answer)
Closed 2 months ago.
I'm trying to add alternate table row colors in my website for NBA live scores but my table is a little weird since each table row contains an inner table row for the given quarter of the game. I'd like for each team1, scores, quarter, and team2 combination to have the same background color. Here's what it currently looks like and my code:
HTML:
<table>
<thead>
<tr>
<th class="left" style="width:40%; ">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th class ="right" style="width:40%;">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Javascript:
else {
data += `<tr>
<td class="left" rowspan="2"> ${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"> <img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td class="period" colspan="2">Final</td>
</tr>`;
}
CSS:
tr:nth-child(3n+0) {
background-color: #1b1b1b;
color: #fff;
}
Maybe all I need is a different nth child formula, not sure how it works and couldn't find more advanced resources online.
Thanks in advance!

Found an answer after rewording my question a few times: tr:nth-child(4n+1), tr:nth-child(4n+2)
This would select every 2 table rows.
Answer found here: nth-child to alternate by 2 rows

Clone a <tr> and modify the clone's content in JavaScript / jQuery

I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks

Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");

Call onclick and onchange programmatically don't work as expected

I'm working on writing a script to automate filling a form. Sample of the part I want to fill is here:
<tbody><tr>
<td class="UMenuTimeSheetFirstCell">
<div class="UMenuTimeSheetElement UMenuTimeSheetElementEditable" onclick="_UMenuTimeSheetEditClick(this);">
<div class="UMenuTimeSheetElementDisplayValue" title="Nessuna descrizione">0.00</div>
<input type="text" class="UMenuTimeSheetElementEditValue UMenuTimeSheetElementEditValueM" taskid="1769" refdate="1/7/2013" onchange="_UMenuTimeSheetEditChange(this);" oldvalue="0" value="0"><input type="text" class="UMenuTimeSheetElementEditValue UMenuTimeSheetElementEditValueH" taskid="1769" refdate="1/7/2013" onchange="_UMenuTimeSheetEditChange(this);" oldvalue="0" value="0"><input type="text" class="UMenuTimeSheetElementEditValueShow" onfocus="_UMenuTimeSheetCheckFocus(this);" onchange="_UMenuTimeSheetEditChangeShow(this);">
<div class="UMenuTimeSheetElementEditDescCont" style="left: 55px;">
<div class="UMenuTimeSheetElementEditMinutesMode">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>-</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplitTitle">Ore</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplit">+</td>
<td>-5<br>-10</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplitTitle">Minuti</td>
<td>+5<br>+10</td>
</tr>
</tbody>
</table>
</div>
<div class="UMenuTimeSheetElementEditDesc">
<div>Descrizione:</div>
<textarea onchange="_UMenuTimeSheetEditChangeDesc(this);" oldvalue=""></textarea>
<div class="UMenuTimeSheetElementEditDescClose" onclick="_UMenuCancelPropagationOnClick(arguments[0], this); $(this).parents('.UMenuTimeSheetElementEditable').removeClass('UMenuTimeSheetElementEditMode');"></div>
</div>
</div>
</div>
</td>
<!-- more td tags -->
</tr></tbody>
I tried to do this to edit it
element=cell.getElementsByClassName("UMenuTimeSheetElementDisplayValue")[0]; //get the class where to place the value
e
element.innerText=timeWorkedToday;
_UMenuTimeSheetEditClick(element); //onclick
element.parentNode.onclick();
This didn't work. I also noticed that there are some changes that happens when I click on the textarea. When I press enter, some calculations are done in static labels in the page and the changes done in the element are reverted.
What is the right code to do to give the same results are if the user is inputting it?
UPDATE: jquery is acceptable to solve this problem.

If I understood you correctly, you want to place value timeWorkedToday into a div with class UMenuTimeSheetElementDisplayValue.
With jQuery use this sample code:
$(".UMenuTimeSheetElementDisplayValue").html(timeWorkedToday);
$(".UMenuTimeSheetElementDisplayValue").click();
I am assuming you can use jQuery as you tagged the question with jQuery

You should be calling click not onclick
element.parentNode.click();

jQuery: Position of Images inside a HTML Table

Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?

CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...

Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.

Change the css class associated with a <TD> column based on value of column with javascript

I have a grid and for one of the columns i want to dynamically change the css used based on the value of another field in the resultset.
So instead of something like
<td class='class1'>
${firstname}
</td>
pseudo-wise I would like
{{if anotherColumnIsTrue }}
<td class='class1'>
${firstname}
</td>
{{/if}}
{{if !anotherColumnIsTrue }}
<td class='class2'>
${firstname}
</td>
{{/if}}
Is this thing possible..?

I think that jQuery makes this a lot easier.
It is very possible. I assume that you would want this for each row. Lets assume you have the following table:
<table id="coolTable">
<tr>
<td class="anotherColumn">True</td>
<td class="firstName">Chris</td>
</tr>
<tr>
<td class="anotherColumn">False</td>
<td class="firstName">Roger</td>
</tr>
</table>
You could go through rows and selectively add classes using the following code:
$(function(){
$("#coolTable tr").each(function(i,row){
if($(row).children("td.anotherColumn").html()=="True") // Any condition here
{
$(row).children("td.firstName").addClass("class1");
}else{
$(row).children("td.firstName").addClass("class2");
}
});
});
Have a look at this fiddle: http://jsfiddle.net/mrfunnel/LXq3w/2/