Question

我是jQuery的新手，所以如果它似乎是一个愚蠢的问题请耐心等待。我有一张桌子，每行都有很多TD。我需要将属于特定列的纯文本的TD元素转换为带有Select元素的TD 使用预先填充的选项当用户使用jQuery点击该列的TD 时。

Answer 1

您无法将td 转换为select，因为这会导致文档无效。您可以做的是将select 放在 td中。 E.g：

$('selector for the td in question').html(
    '<select>' +
    '<option value="1">One</option>' +
    '<option value="2">Two</option>' +
    '<option value="3">Three</option>' +
    '</select>'
);

这是一个完整的示例，还演示了事件委派：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>Select in Cell</title>
  <style>
    .type {
      cursor: pointer;
      white-space: nowrap;
    }
    table {
      border: 1px solid #aaa;
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid #aaa;
      padding: 2px;
    }
  </style>
</head>
<body>
  <p>Click cells in the type column.</p>
  <table id="theTable">
    <thead>
      <tr>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="type">Thingy</td>
        <td>Blah</td>
      </tr>
      <tr>
        <td class="type">Widget</td>
        <td>Blah</td>
      </tr>
      <tr>
        <td class="type">Whatsit</td>
        <td>Blah</td>
      </tr>
    </tbody>
  </table>
  <script>
    (function() {
      $("#theTable").on("click", ".type", function() {
        var $this = $(this),
            current = $this.text(),
            select;
        if ($this.find("select").length) {
          return;
        }
        select = $(
          '<select>' +
          '<option>Thingy</option>' +
          '<option>Widget</option>' +
          '<option>Whatsit</option>' +
          '</select>'
        );
        $this.html(select);
        select.val(current).focus();
      });
      $("#theTable").on("blur", ".type select", function() {
        var $this = $(this);
        $this.closest('td').text($this.val());
      });
    })();
  </script>
</body>
</html>

Answer 2

有趣的任务。试试这个解决方案：

$('table').on('click', 'td', function(e) {

    if ($(this).data('converted')) {
        e.stopPropagation();
        return;
    }

    $(this).data('converted', $(this).text());

    var rowIndex = this.parentNode.rowIndex,
        index = this.cellIndex + 1,
        options = $(e.delegateTarget).find('td:nth-child(' + index +')').map(function(i) {
            var text = $(this).data('converted') || $(this).text();
            return '<option ' + (rowIndex == i ? 'selected' : '')  + '>' + text + '</option>';
        }).get();

    $(this).html('<select>' + options.join('') + '</select>');
});

演示：http://jsfiddle.net/As9dY/2/

Answer 3

问：如何动态地向TD添加选择下拉列表？

这是你如何做到的：

<强> HTML：

<table>
    <tr><th>Column A</th><th>Column B</th></tr>
    <tr><td>1</td><td>6</td></tr>
    <tr><td>2</td><td>7</td></tr>
    <tr><td>3</td><td>8</td></tr>
    <tr><td>4</td><td id="nine">9</td></tr>
    <tr><td>5</td><td>10</td></tr>    
</table>

<强> jQuery的：

$(document).ready(function() {
 var isAppended = false;
 var select = "<select name='mySelect'>" +
             "<option value='volvo'>Volvo</option>" +
             "<option value='saab'>Saab</option>" +
             "<option value='opel'>Opel</option>" +
             "<option value='audi'>Audi</option>" +
             "</select>";


 $("#nine").click(function() {
     if (!isAppended) {
        $(this).append(select);  
         isAppended = true;
     }    
 });

});

<强> JSFIDDLE DEMO

使用预先填充的选项将表的特定TD元素转换为“选择”

3 个答案:

演示：http://jsfiddle.net/As9dY/2/