将表中的特定 TD 元素转换为使用预填充选项进行选择

我对jQuery很陌生，所以如果这似乎是愚蠢的问题，请耐心等待。我有一个表格，每行都有很多TD。当用户使用 jQuery 单击该列的 TD 时，我需要将具有属于特定列的纯文本的 TD 元素转换为带有预填充选项的 TD 元素的 TD

。

您不能将td转换为select，因为这会导致无效的文档。你能做的，就是把select放在td内。例如：

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

下面是一个完整的示例，还演示了事件委派：实时复制

<!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>

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

$('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/

问：如何动态向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>

j查询：

$(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 演示

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

相关内容

最新更新

热门标签：