JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr class="this changes a lot">
<td title="Title" align="center">
<a href="">
Link
</a>
</td>
<td align="right">
Date
</td>
<td align="center">
Value1
</td>
<td align="center">
Value2
</td>
<td>
Value3
</td>
<td align="center">
Value4
</td>
<td>
Text1
</td>
<td>
Text2
</td>
</tr>
<tr class="this changes a lot">
<td title="Title" align="center">
<a href="">
Link
</a>
</td>
<td align="right">
Date
</td>
<td align="center">
Value1
</td>
<td align="center">
Value2
</td>
<td>
Value3
</td>
<td align="center">
Value4
</td>
<td>
Text1
</td>
<td>
Text2
</td>
</tr>
</table>
CSS
/*******************************************************************************
* CUSTOM RESETS
******************************************************************************/
*, :before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
}
html, body {
width: 100%;
height: 100%;
}
a {
background: transparent;
text-decoration: underline;
}
img {
max-width: 100%;
}
input, button, select, textarea {
font: inherit;
-webkit-appearance: none;
}
ul, ol {
padding-left: 1.4em;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
.cf:before, .cf:after {
display: table;
content:" ";
}
.cf:after {
clear: both;
}
::selection {
background-color: #f3f3f3;
}
::-moz-selection {
background-color: #f3f3f3;
}
/*******************************************************************************
* BODY
******************************************************************************/
html {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-font-feature-settings:"kern";
-moz-font-feature-settings:"kern";
font-feature-settings:"kern";
-webkit-font-kerning: normal;
-moz-font-kerning: normal;
font-kerning: normal;
}
body {
background-color: #fff;
color: #444;
font: 125%/1.4"ChaparralProRegular", Georgia, serif;
}
a {
color: #df4747;
/*a1d26 3,229ce0,df4747*/
}
a:hover {
color: #d14141;
text-decoration: none;
}
.wrapper {
position: relative;
margin: 0 auto;
padding: 0 22px;
max-width: 100%;
width: 960px;
}
.wrapper:after {
display: table;
clear: both;
content:"";
}
p, img, figure, ul, ol, .form-module {
margin: 0 0 25px...
JavaScript
$('tr td[title="Title"]').each(function(){
var value1= $(this).parent().find('td:nth-child(3)').text();
var value4= $(this).parent().find('td:nth-child(6)').text();
alert(value1+" "+value4);
});