-1

我有一张像

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

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

我正在接近通过 jquery 生成动态 id，但不确定这怎么可能。

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

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

4

5 回答 5

2

你可以用这种方式做一些事情（这基于你的小提琴）：

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

例子

于 2013-07-22T14:20:58.563 回答
0

工作演示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');
}
于 2013-07-22T14:21:16.197 回答
0 
$(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

theChanger我在选择元素中使用了一个新类。我特别使用了一个类而不是一个 ID，因为您将有多个行并且每个页面的 ID必须是唯一的。

于 2013-07-22T14:40:34.760 回答
0

这里有一个例子

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

请注意$('#mySelect')，它已被用作类似id的。您也可以使用一个类，例如并且可以使用.select<select id="mySelect"><select class="mySel">$('.mySel')

于 2013-07-22T14:26:44.977 回答
0

无需生成动态 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/

希望能帮助到你！

于 2013-07-22T14:45:11.023 回答