循环遍历跨度并使用jQuery将值分配给最接近的下拉列表

时间:2015-09-24 21:39:16

标签: javascript jquery

我的目标是从span获取值并将值分配给同一行的下拉列表。

这是我的jsFiddle:http://jsfiddle.net/bharatgillala/581hk9Ly/4/

<table id="gridviewInfo" runatr="server">
  <tbody>
    <tr>
      <th scope=col>Available Boys.</th>
      <th scope=col>Already Selected Boy</th>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl1" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s2" class="spanclass">tom</span>
        </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl2" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s1" class="spanclass">harry</span>
        </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl3" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s3" class="spanclass"></span>
        </td>
    </tr>
  </tbody>
</table>

我的目标是遍历所有跨度,如果有任何文本,请获取文本并将文本分配到最近的下拉列表。

1 个答案:

答案 0 :(得分:1)

我已经answered that for you yesterday了。代码完整注释如下:

&#13;
&#13;
(function(d) {
  // when all the DOMElements are already loaded into the document
  d.addEventListener('DOMContentLoaded', function() {
    // gets the generated table, and get all the dropdownlists inside it
    var table = document.getElementById('gridviewInfo'),
        ddls = [].slice.call(table.querySelectorAll('.judges'));

    // loop through the dropdownlists
    ddls.forEach(function(ddl, i) {
      // get the label inside the last td
      var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;

      // change the dropdownlist selectedvalue to the label text
      ddl.value = lbl.textContent.trim();
    });
  });
})(document);
&#13;
<table id="gridviewInfo" runatr="server">
  <tbody>
    <tr>
      <th scope=col>Available Boys.</th>
      <th scope=col>Already Selected Boy</th>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl1" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s2" class="spanclass">tom</span>
      </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl2" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s1" class="spanclass">harry</span>
      </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl3" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s3" class="spanclass"></span>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

这是你的小提琴更新:http://jsfiddle.net/581hk9Ly/6/

如果你想要a jQuery version

$(document).ready(function() {
  $('.spanclass').each(function() {
    $(this).closest('tr').find('.judges').val($(this).text());
  });
});