- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含数据的表格。数据存储在数据库中,而不是允许用户访问 phpmyadmin,我允许他们更改他们从网页访问的表中的数据。我可以轻松地发布/插入/更新数据,但我遇到的困难涉及允许用户编辑表中的数据。
我想调用 <td>
之间的交换和 <input>
反之亦然使用 jQuery 使用 .click()
. 使用 jQuery 3.2.1
问题:
<td>
被 <input>
取代单击时。当 <input>
失焦,<input>
换回来。第一个<input>
可以多次单击一行。用户可以输入他们想要的任何内容,然后在 <input>
之外单击。并且可以发送数据。但是,如果有其他 <td>
在同一行中单击,如果第一个 <td>
该行是 <input>
它将不再换回 <td>
, <td>
如果点击右侧的 's 现在将显示为 <input>
的,但塌陷在第一个 <td>
之下该行并保持为 <input>
的。 <input>
不会换回 <td>
. <input>
无论在其外部单击以失去焦点,它都会保持不变,因此它可以恢复为 <td>
.
我可以调用在 <td>
中输入的任何文本,问题出在下面的代码区域,我的 ID 存在并被正确调用,来自 <td>
的交换至 <input>
反之亦然,执行不当。
提前致谢
代码:
//### get value of insert button in row when clicking on <td> ###
$("tr").on("click",function(event){
neededValue1 = $(this).attr('value');
neededValue = neededValue1;
console.log("<tr> button Value: "+neededValue);
//### id clicked in tr w/row value ###
$('#matName'+neededValue).click(function(){
// ### Swap <td> with <input>###
$ele1 = $(this);
$input1 = $('<input id="UpdatedInput'+neededValue+' "/>').val($ele1.text());
$ele1.replaceWith($input1);
//### Save the Input entered and swap back###
save = function(){
var $p = $('<td id="matName'+neededValue+'"/>').text($input1.val());
$input1.replaceWith($p);
};
$input1.one('blur', save).focus();
});
$('#bed0FL'+neededValue).click(function(){
$ele2 = $(this);
$input2 = $('<input id="UD'+neededValue+'"/>').val($ele2.text());
$ele2.replaceWith($input2);
save = function(){
var $p2 = $('<td id="bed0FL'+neededValue+'" />').text($input2.val());
$input2.replaceWith($p2);
};
$input2.one('blur', save).focus();
});
});
最佳答案
我不太清楚你的问题是否有触发 tr
的特定原因的点击事件,所以我冒昧地将它移动到 td
的,以及把 td
data-field
中的标识值每个 td
,如您在代码片段 HTML 中所见。
在 JavaScript 代码中,您可以看到 .on("click",...)
触发一个函数,该函数设置一个新的输入字段,用 td
填充的文本内容并将其插入到 td
中.
我还在输入字段上设置了反向功能 .blur()
这样当文本字段失去焦点时,即当您单击或跳出它时,您删除输入字段并将输入的文本值放在 td
中。 .
.blur()
也是我放置 Ajax 魔法来更新数据库的地方。
附言!请原谅我的 CSS hacks,这是一个匆忙的工作......:)
$('td').on('click', function(event){
var name = $(this).attr('data-field');
var value = $(this).text();
var $input = $('<input>');
$input.attr({
'name': name,
'id':name,
'type':'text'
});
$input.val(value);
$input.on('click',function(event){
event.preventDefault();
event.stopPropagation();
});
$input.on('blur',function(){
$(this).parent().text($(this).val());
/**
* INSERT AJAX HERE
**/
});
$(this).html($input);
$input.focus();
});
table, tr, td {
border: 1px solid silver;
border-collapse: collapse;
width: 500px;
}
tr {
height:100%;
}
td {
padding: 0px;
word-wrap:none;
text-wrap:none;
font-size:20px;
line-height:20px;
height:100%;
width: 25%;
}
td input {
border:0px;
width:100%;
height:100%;
margin:0px;
padding: 0px;
line-height:18px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr>
<td data-field="r1v1">row 1 val 1</td>
<td data-field="r1v2">row 1 val 2</td>
<td data-field="r1v3">row 1 val 3</td>
<td data-field="r1v4">row 1 val 4</td>
</tr>
<tr>
<td data-field="r2v1">row 2 val 1</td>
<td data-field="r2v2">row 2 val 2</td>
<td data-field="r2v3">row 2 val 3</td>
<td data-field="r2v4">row 2 val 4</td>
</tr>
</table>
关于javascript - 如何在表中使用 jQuery 在 <td> 和 <input> 之间正确交换,反之亦然?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45924001/
我需要修复 getLineNumberFor 方法,以便如果 lastName 的第一个字符位于 A 和 M 之间,则返回 1;如果它位于 N 和 Z 之间,则返回 2。 在我看来听起来很简单,但我不
您好,感谢您的帮助!我有这个: 0 我必须在每次点击后增加“pinli
Javascript 中是否有一种方法可以在不使用 if 语句的情况下通过 switch case 结构将一个整数与另一个整数进行比较? 例如。 switch(integer) { case
我有一列是“日期”类型的。如何在自定义选项中使用“之间”选项? 最佳答案 请注意,您有2个盒子。 between(在SQL中)包含所有内容,因此将框1设置为:DATE >= startdate,将框2
我有一个表,其中包含年、月和一些数字列 Year Month Total 2011 10 100 2011 11 150 2011 12 100 20
这个问题已经有答案了: Extract a substring between double quotes with regular expression in Java (2 个回答) how to
我有一个带有类别的边栏。正如你在这里看到的:http://kees.een-site-bouwen.nl/ url 中类别的 ID。带有 uri 段(3)当您单击其中一个类别时,例如网页设计。显示了一
这个问题在这里已经有了答案: My regex is matching too much. How do I make it stop? [duplicate] (5 个答案) 关闭 4 年前。 我
我很不会写正则表达式。 我正在尝试获取括号“()”之间的值。像下面这样的东西...... $a = "POLYGON((1 1,2 2,3 3,1 1))"; preg_match_all("/\((
我必须添加一个叠加层 (ImageView),以便它稍微移动到包含布局的左边界的左侧。 执行此操作的最佳方法是什么? 尝试了一些简单的方法,比如将 ImageView 放在布局中并使用负边距 andr
Rx 中是否有一些扩展方法来完成下面的场景? 我有一个开始泵送的值(绿色圆圈)和其他停止泵送的值(簧片圆圈),蓝色圆圈应该是预期值,我不希望这个命令被取消并重新创建(即“TakeUntil”和“Ski
我有一个看起来像这样的数据框(Dataframe X): id number found 1 5225 NA 2 2222 NA 3 3121 NA 我有另一个看起来
所以,我正在尝试制作正则表达式,它将解析存储在对象中的所有全局函数声明,例如,像这样 const a = () => {} 我做了这样的事情: /(?:const|let|var)\s*([A-z0-
我正在尝试从 Intellivision 重新创建 Astro-Smash,我想让桶保持在两个 Angular 之间。我只是想不出在哪里以及如何让这个东西停留在两者之间。 我已经以各种方式交换了函数,
到处检查但找不到答案。 我有这个页面,我使用 INNER JOIN 将两个表连接在一起,获取它们的值并显示它们。我有这个表格,用来获取变量(例如开始日期、结束日期和卡号),这些变量将作为从表中调用值的
我陷入了两个不同的问题/错误之间,无法想出一个合适的解决方案。任何帮助将不胜感激 上下文、FFI 和调用大量 C 函数,并将 C 类型包装在 rust 结构中。 第一个问题是ICE: this pat
我在 MySQL 中有一个用户列表,在订阅时,时间戳是使用 CURRENT_TIMESTAMP 在数据库中设置的。 现在我想从此表中选择订阅日期介于第 X 天和第 Y 天之间的表我尝试了几个查询,但不
我的输入是开始日期和结束日期。我想检查它是在 12 月 1 日到 3 月 31 日之间。(年份可以更改,并且只有在此期间内或之外的日期)。 到目前为止,我还没有找到任何关于 Joda-time 的解决
我正在努力了解线程与 CPU 使用率的关系。有很多关于线程与多处理的讨论(一个很好的概述是 this answer )所以我决定通过在运行 Windows 10、Python 3.4 的 8 CPU
我正在尝试编写 PHP 代码来循环遍历数组以创建 HTML 表格。我一直在尝试做类似的事情: fetchAll(PDO::FETCH_ASSOC); ?>
我是一名优秀的程序员,十分优秀!