gpt4 book ai didi

javascript - 更改 td 内容以选择,反之亦然

转载 作者:行者123 更新时间:2023-11-30 09:35:37 26 4
gpt4 key购买 nike

我有一个 tr,如果您单击它,它将变为 select 并允许用户选择一个选项。在用户点击离开输入后,如何让它返回到具有新值的 td

$(function() {
$(".departamento").one('click', function(e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
select = '<select class="form-control" id="departamento" name="departamento">' +
'<option name="Comercial" <?php echo ($departamento == "Comercial")?"selected":""; ?> >Comercial</option>' +
'<option value="Suporte Tecnico" <?php echo ($departamento == "Suporte Tecnico")?"selected":""; ?> >Suporte Técnico</option>' +
'<option value="Direcao" <?php echo ($departamento == "Direcao")?"selected":""; ?> >Direção</option>' +
'<option value="Formacao "<?php echo ($departamento == "Formacao")?"selected":""; ?> >Formação</option>' +
'</select>';
currentEle.html(select);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Departamento</th>
<td class="departamento">
<?php echo $departamento;?>
</td>
</tr>
</table>

谢谢!

最佳答案

要实现此目的,您可以在 selectblur 事件中将 td 的内容切换回原位。您还可以整理逻辑以使用一个类来允许内容切换,这样您就不需要使用 one(),它只允许操作发生一次。

另请注意,您可以根据 td 的文本来改进在 select 中选择默认值的逻辑,而不必将大量意大利面条式 PHP 放入JS。试试这个:

$(function() {
$(".departamento").on('click', function(e) {
e.stopPropagation();
var $td = $(this);

if ($td.hasClass('active'))
return;

var value = $td.text().trim();
$td.empty();
var $select = $('<select class="form-control" id="departamento" name="departamento">' +
'<option name="Comercial">Comercial</option>' +
'<option value="Suporte Tecnico">Suporte Técnico</option>' +
'<option value="Direcao">Direção</option>' +
'<option value="Formacao">Formação</option>' +
'</select>').val(value).appendTo($td).focus();
$td.addClass('active');
}).on('blur', 'select', function() {
var $select = $(this);
var $td = $select.closest('td');
$td.html($select.val()).removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Departamento</th>
<td class="departamento">
Direcao
</td>
</tr>
</table>

关于javascript - 更改 td 内容以选择,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43735484/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com