Javascript 在同一tr中的另一个td标签中更改select option的一个td值onchange函数

我有一张像这样的桌子

Header1 | Header2         | Header3        | Header 4           | Header 5
Row 1   |<span>Some Text</span>            | <select></select>
Row 2
Row 3
.
.
.
.
Rows dynamically generated.

Header1 | Header2 | Header3 | header4 | header5
第1行|一些文本|
第2排
第3排
.
.
.
.
动态生成的行。

现在，我的目标是在更改

时更改第二列中

某些文本的值和颜色，该文本位于标题4列的同一行中，并对动态生成的所有行执行相同的操作

我正试图通过jquery生成动态id，但不确定这怎么可能

试图创建一个JSFIDLE来更好地理解这个问题

您可以用这种方式（这取决于您的小提琴）：

工作演示


注意
$（“#mySelect”）
，它被用作
select
的
id
，就像
一样。您也可以使用类，如
，并可以使用
$（'.mySel'）
选择它


我在select元素中使用了一个新的
类changer
。我特别使用了一个类而不是一个ID，因为您将有多行，并且ID必须在每页上都是唯一的。
无需生成动态ID（我假设您将此ID附加到row元素-tr）

不管怎样，我已经为你的小提琴做了一个例子，告诉你如何根据选择值（每行）改变颜色

您的行：

<tr>
  <td class="some-text"><span class="color-option-a">Some Text</td>
  <td>
    <select class="color-changer">
      <option value="excluded" selected="selected">Excluded</option>
        <option value="Other">Other</option>
        <option value="Alternate">Alternate</option>
        </select>
    </select>
</tr>

颜色：红色

}
.color-option-b {
    color: green;
}
.color-option-c {
    color: blue;
}

jquery：

$('.color-changer').on('change', function(){
    var currentRow = $(this).closest('tr');
    var targetColumn = $('.some-text', currentRow);
    var targetSpan = $('span', targetColumn);

    var newColor = 'color-option-a';

    switch($(this).val()) {
        case 'Alternate':
            newColor = 'color-option-b';
            break;
        case 'Other':
            newColor = 'color-option-c';
            break;
        case 'excluded': 
           newColor = 'color-option-a'; //default
            break;         
     }
    //reset the color to none first and then apply the new one
    targetSpan.attr('class', '');
    targetSpan.addClass(newColor);

});


希望有帮助
 你已经解释了你想要什么，你已经添加了一把小提琴来显示你想要什么，但是你没有试图解决这个问题。你需要表明你对你想要达到的目标有一个基本的了解。你对生成的html有一些控制权吗（例如添加类）？如果是，添加一个带有行号的类将非常方便。如果没有，你应该做一些DOM遍历。我试图通过在TD标签中添加一个随机类来解决这个问题，并通过jQuery生成ID，但问题是我在实现这一点的过程中迷失了方向，现在我完全糊涂了，无处可去。
$(document).on('change', '.theChanger', function (e) {
    console.log(e);
    var $myTR = $(this).closest('tr');
    $myTR.find('td:eq(1) span').css('color', 'blue').text('NEW TEXT');
    $myTR.find('td:eq(4)').css('color', 'orange').text('NEW TEXT');
    $myTR.find('td:eq(5)').css('color', 'orange').text('NEW TEXT')
});

<tr>
  <td class="some-text"><span class="color-option-a">Some Text</td>
  <td>
    <select class="color-changer">
      <option value="excluded" selected="selected">Excluded</option>
        <option value="Other">Other</option>
        <option value="Alternate">Alternate</option>
        </select>
    </select>
</tr>

.color-option-a {

}
.color-option-b {
    color: green;
}
.color-option-c {
    color: blue;
}

$('.color-changer').on('change', function(){
    var currentRow = $(this).closest('tr');
    var targetColumn = $('.some-text', currentRow);
    var targetSpan = $('span', targetColumn);

    var newColor = 'color-option-a';

    switch($(this).val()) {
        case 'Alternate':
            newColor = 'color-option-b';
            break;
        case 'Other':
            newColor = 'color-option-c';
            break;
        case 'excluded': 
           newColor = 'color-option-a'; //default
            break;         
     }
    //reset the color to none first and then apply the new one
    targetSpan.attr('class', '');
    targetSpan.addClass(newColor);

});