Question

我有一个要求，我必须根据下拉列表中的row值更改onchange的颜色。我的rows格式为division。有两个主要divisions，它们具有分割形式的行，这些行早先是两个主tables。

现在，当我更改combo中row的{{1}}时，我希望更改整个division {{color 1}}。此外，我还希望更改第二个主division中row的{{1}}。我可以轻松地使用color，但row我发现它很难，而且我也不确定可行性。下面是我的代码结构和我用来改变颜色的division。

tables

division

Answer 1

那么，#bodyLeft tr目标究竟是什么？

我可以在那里的任何地方看到tr。

我假设您需要将点击绑定到#bodyLeft.vehicleClass？在您的JS代码中，检查每个选择器并使其与HTML中的结构匹配。

或发布表格的相关代码。

编辑：我刚刚再次阅读文字并注意到您曾经使用过表格。是的，绝对重写您的查询选择器。在你发布的JS和其他代码中，你也不会忘记检查CSS。

Answer 2

以下可能是您的方法之后的解决方案之一。

$('#bodyLeft .divTableRow').bind('click', function(e) {
	
  var curRow, curSelect, nextRow, nextSelect;
  
  curRow = $( this );
  
  curSelect = curRow.find('select.vehicleClass');
  
  nextRow = curRow.next();
  
  nextSelect = nextRow.find('select.vehicleClass');
	 
	// Following are sample stuff
  // replace with your actual stuff
  curRow.css('background-color', 'yellow');
  curSelect.css('background-color', 'yellow');
	nextRow.css('background-color', 'cyan');  
  nextSelect.css('background-color', 'cyan');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bodyLeft">
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <select class="vehicleClass">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="address">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="pass">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <select class="vehicleClass">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="address">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="pass">
    </div>
  </div>
</div>
<!--Second Division -->
<div id="bodyRight">
  <div class="divTableRow">
    <div class="divTableCell width20">
      <input type="text" name="parts">
    </div>
    <div class="divTableCell width85">
      <input type="text" name="ischecked">
    </div>
    <div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="validity">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <input type="text" name="parts">
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="ischecked">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="validity">
    </div>
  </div>
</div>

JQuery - 在onchange事件中更改分区行的颜色？

2 个答案: