我有一个可编辑的HTML表格。然后我有两个按钮,用于更改td内容的填充。
我的要求是
当td内容填充达到20px时,内容字体粗细应为粗体。当它达到40px时(在第二次点击时)字体样式应该是正常的,当它达到60px(第三次点击)时,字体颜色应该是灰色的。
在编辑之前它运作良好,但在它不起作用之后。
$(function () {
$("td.cat").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing1")
$(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
})
})
$(document).ready(function () {
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
});
jQuery(document).ready(function () {
$(".cat").on("click", function () {
$(this).toggleClass('selected');
});
$("#key").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var paddingLeft = parseInt($(this).css("cellEditing2"));
var paddingLeft = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = paddingLeft === 21;
var isPaddingLeft40 = paddingLeft === 41;
if (isPaddingLeft20) $(this).css("font-weight", "bold");
else if (isPaddingLeft40) $(this).css("font-style", "italic");
else $(this).css("color", "grey");
});
});
$("#key1").click(function () {
$(".selected").css({
"padding-left": "-=" + "20"
});
$(".cat.selected").each(function () {
var paddingLeft = parseInt($(this).css("padding-left"));
var PaddingLeft20 = paddingLeft === 21;
var PaddingLeft40 = paddingLeft === 41;
if (PaddingLeft20) $(this).css("font-weight", "bold");
else if (isPaddingLeft40) $(this).css("font-style", "normal");
else $(this).css("color", "grey");
});
});
});
.selected {
background-color: lightblue;
}
.editableTable {
position:static;
width:100%;
border-collapse:collapse;
}
.editableTable td {
border: 1px solid;
height:17px;
.editableTable .cellEditing1 input[type=text] {
width: 100%;
border: none;
text-align: left;
background-color: transparent;
}
.editableTable .cellEditing1 {
padding: 0;
height: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">left</button>
<button id="key1">right</button>
<table class="editableTable">
<tr>
<td class="cat">rose</td>
<td class="cat">red</td>
</tr>
<tr>
<td class="cat">cash</td>
<td class="cat">black</td>
</tr>
</table>
答案 0 :(得分:1)
onKeyPress=checkFunction()
会很有帮助。在<input></input>
$(function () {
$("td.cat").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing1")
$(this).html("<input id='value' onKeyPress="checkFunction()" type='text' value='" + OriginalContent + "' />");
})
})
// rest of your code goes here...
在checkFunction()中,写下你的实际逻辑!
function checkFunction(){
var paddingLeft = parseInt($(this).css("cellEditing2"));
var paddingLeft = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = paddingLeft === 21;
var isPaddingLeft40 = paddingLeft === 41;
if (isPaddingLeft20)
$(this).css("font-weight", "bold");
else if (isPaddingLeft40)
$(this).css("font-style", "italic");
else
$(this).css("color", "grey");
}
答案 1 :(得分:1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Array in chunkSize</title>
<style> .selected {
background-color: lightblue;
}
.editableTable {
position:static;
width:100%;
border-collapse:collapse;
}
.editableTable td {
border: 1px solid;
height:17px;
.editableTable .cellEditing1 input[type=text] {
width: 100%;
border: none;
text-align: left;
background-color: transparent;
}
.editableTable .cellEditing1 {
padding: 0;
height: 1px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">left</button>
<button id="key1">right</button>
<table class="editableTable">
<tr>
<td class="cat">rose</td>
<td class="cat">red</td>
</tr>
<tr>
<td class="cat">cash</td>
<td class="cat">black</td>
</tr>
</table>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script>
$(function () {
$("td.cat").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing1")
$(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
})
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
$(".cat").on("click", function () {
$(this).toggleClass('selected');
});
$("#key").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20="",isPaddingLeft40='';
if(paddingLeftpl>20)
isPaddingLeft20 = paddingLeftpl;
if(paddingLeftpl>40)
isPaddingLeft40=paddingLeftpl;
if (isPaddingLeft20){ $(this).css("font-weight", "bold");$(this).find('input').css("font-weight", "bold");$(this).css("color", "green")}
if (isPaddingLeft40){ $(this).find('input').css("font-style", "italic");$(this).css("font-style", "italic");$(this).css("color", "blue");$(this).find('input').css("color", "blue");}
else $(this).css("color", "grey");
});
});
$("#key1").click(function () {
$(".selected").css({
"padding-left": "-=" + "20"
});
$(".cat.selected").each(function () {
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20="",isPaddingLeft40='';
if(paddingLeftpl<22)
isPaddingLeft20 = paddingLeftpl;
if(paddingLeftpl<42)
isPaddingLeft40=paddingLeftpl;
if (isPaddingLeft20){ $(this).css("font-weight", "normal");$(this).find('input').css("font-weight", "normal");$(this).css("color", "black")}
if (isPaddingLeft40){ $(this).find('input').css("font-style", "normal");$(this).css("font-style", "normal");$(this).css("color", "brown");$(this).find('input').css("color", "brown");}
else $(this).css("color", "grey");
});
});
});
</script>
</body>
</html>