1
こんにちは私は編集可能なテーブルを持っています.iテーブルをエクセルページのように正確に変更したいのです。 Tdコンテンツの埋め込み 私の要件は です1.最初の行TDは常に太字 2.第2行TDは20pxに移動します。通常のフォントウェイトの左ボタンをクリックします 3.同様の方法で次の行TDが移動します20最初に小さなフォントサイズを有する第2クリックで40をクリックしインデントボタンを使用してTDコンテンツのパディングを調整しても正しく動作しない
$(function() {
$("tr").on("click", function() {
$(this).toggleClass('selected1');
});
$("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 prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else $(this).css("color", "grey");
});
});
$("#key1").click(function() {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function() {
var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else prevTd.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;
}
.mainfunctionstyle {
color: yellow;
font-weight: bold;
font-size: 10px;
}
.sunfunctionstyle {
color: black;
font-weight: normal;
font-size: 8px;
}
.taskstyle {
color: red;
font-weight: normal;
font-size: 8px;
}<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">rose11</td>
<td class="cat">red12</td>
</tr>
<tr>
<td class="cat">rose21</td>
<td class="cat">red22</td>
</tr>
<tr>
<td class="cat">rose31</td>
<td class="cat">red32</td>
</tr>
<tr>
<td class="cat">rose41</td>
<td class="cat">red42</td>
</tr>
</table>4.nextが20となっている、グレーの色と40,60px
これは私のコードで私はまた、下のために画像を共有する私が欲しいの要件
はまさにその画像のように立って