如果文本框具有特定值，则更改表行

Question

您好我是javascript和Jquery的新手我有一个包含5行的表，以及一个从1到5中选择值的asp滑块。我希望在移动滑块时突出显示表中的相应行。这可以用javascript或Jquery吗？

Answer 1

是的，虽然我对.NET一无所知，但我知道如何在JavaScript中实现这一点。

HTML5引入了一种名为range的新输入类型。 input元素有一个名为change的事件监听器，它会查找输入值的变化。

为简单起见，我创建了一个包含五行的通用表。触发更改事件时，特定行将突出显示，其他行将恢复正常。

我确信这可以改进，但目前，这是我唯一可以提出的方法

您应该对您的对象使用类似的方法。

＆＃13;

＆＃13;

var range = document.getElementById("my-range");
var result = document.getElementById("result");
var tableRows = document.querySelectorAll("tr");

range.addEventListener("change", function() {
    var rowIndex = +(range.value) - 1;
    var irrelevant = [];
    for (var i = 0; i <= 4; i++) {
        irrelevant.push(i);
    }
    irrelevant = irrelevant.filter(function(e) {
        return e != rowIndex;
    });
    tableRows[rowIndex].style.background = "gold";
    tableRows[irrelevant[0]].style.background = "white";
    tableRows[irrelevant[1]].style.background = "white";
    tableRows[irrelevant[2]].style.background = "white";
    tableRows[irrelevant[3]].style.backgroudn = "white";
});

＆＃13;

<input id="my-range" type="range" min="1" max="5" />
  
<table>
  <tr>
    <td>R1 C1</td>
    <td>R1 C2</td>
  </tr>
  <tr>
    <td>R2 C1</td>
    <td>R2 C2</td>
  </tr>
  <tr>
    <td>R3 C1</td>
    <td>R3 C2</td>
  </tr>
  <tr>
    <td>R4 C1</td>
    <td>R4 C2</td>
  </tr>
  <tr>
    <td>R5 C1</td>
    <td>R5 C2</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做。与http://jsfiddle.net/venuchitta/uuLfwtrw/

中一样

＆＃13;

＆＃13;

$("#slider").slider(
{
            value:1,
            min: 1,
            max: 5,
            step: 1,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
                 $('#data tr').removeClass('highlighted');
                 $('#data tr:eq('+(ui.value-1)+')').addClass('highlighted');
            }
}
);

＆＃13;

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}
    
tr.highlighted td {
    background: red;
}

＆＃13;

<h1>HTML Slider Test</h1>

<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;