Question

我有一张像

这样的桌子

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

现在我的目标是在标题4列中位于同一行的<span>Some Text</span>更改的第二列中更改<select></select>的值和颜色，并对动态生成的所有行执行明显相同的操作。

我正在接近通过jquery生成动态id，但不确定这是如何实现的。

试图创建一个jsfiddle以更好地理解问题

http://jsfiddle.net/y8Cj3/2/

Answer 1

你可以这样做（这是基于你的小提琴）：

$(".myselect").change(function() {
    var $tr = $(this).closest("tr");
    $tr.find("td:eq(1) span").css("color", "blue").text(this.value);

    // Those are columns 5 and 6
    $tr.find("td:eq(4)").text(this.value);
    $tr.find("td:eq(5)").text(this.value);
});

Example

Answer 2

工作演示http://jsfiddle.net/cse_tushar/y8Cj3/3/

function changeValue(){
    $('tr td span').css('color','blue');
    $('tr:gt(0) td:nth-child(5)').text('hi');
    $('tr:gt(0) td:nth-child(6)').text('new');
}

Answer 3

An example here

$('#mySelect').on('change', function(){
    $(this).closest('tr').find('td').eq(1).find('span')
    .text($(this).val()).css('color', 'green');
});

注意$('#mySelect')，它已被用作id的{{1}}，如select。您也可以使用类<select id="mySelect">，也可以使用<select class="mySel">选择它。

Answer 4

$(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')
});

jsFIDDLE

我在select元素中使用了一个新类theChanger。我特别使用了一个类，而不是一个ID，因为你会有多行，而且必须每页都是唯一的。

Answer 5

无需生成动态ID（我假设您将此ID附加到行元素 - 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>

的CSS：

.color-option-a {

颜色：红色;

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

});

http://jsfiddle.net/Qccba/2/

希望它有所帮助！

更改同一tr中另一个td标签中select选项的更改功能的td值

5 个答案: