添加或删除行时如何使文本区域停留在正确的位置
我有一个用于x矩阵的表格，我必须能够添加和删除列或行。我在表单上特定位置的文本区域与它们上方的行相对应。当我添加或删除行时，文本区域将保持在页面上的相同位置，我需要它们根据要删除的行或列进行移动。我试图将文本区域放在表格中，但是它只是将文本区域居中放置在表格上。我需要目标1 在左的最外面一栏上排队，并且我需要目标1 在最里面的一栏上排队列的右侧列。
function addRow(tableID) {
var text = "Enter Initiative ";
var table = document.getElementById("main");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount - 1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "HB";
var cell2 = row.insertCell(1);
cell2.innerHTML = "HB";
var cell3 = row.insertCell(2);
cell3.innerHTML = "HB";
var cell4 = row.insertCell(3);
cell4.innerHTML = "HB";
var cell5 = row.insertCell(4);
cell5.innerHTML = "HB";
var cell6 = row.insertCell(5);
cell6.innerHTML = text + " " + rowCount;
var cell7 = row.insertCell(6);
cell7.innerHTML = "HB";
var cell8 = row.insertCell(7);
cell8.innerHTML = "HB";
var cell9 = row.insertCell(8);
cell9.innerHTML = "HB";
var cell10 = row.insertCell(9);
cell10.innerHTML = "HB";
var cell11 = row.insertCell(10);
cell11.innerHTML = "HB";
}
function deleteRow(tableID) {
var table = document.getElementById("main");
var rowCount = table.rows.length;
table.deleteRow(rowCount -2);
} .x-matrix {
font-family: Arial;
font-size: medium;
border-style: none;
border-collapse: collapse;
}
.container{
position: relative;
font-family: Arial;
height:480px;
width:816px;
margin: auto;
}
.v-text {
position: absolute;
transform: rotate(270deg);
transform-origin: 50% 50%;
border: none;
font-family: Arial;
resize:vertical;
flex-direction: row;
}
.h-text{
width:600px;
}
.harvey {
width:50px;
text-align: center;
}
.top-row {
height: 50px;
}
.bottom-row {
height: 500px;
}
td {
border:solid;
border-width:1px;
border-collapse:collapse;
}
tr {
width:50px;
text-align: center;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type = "button" value="Add Row" onclick="addRow('main')"/>
<input type = "button" value="Delete One Row" onclick="deleteRow('main')"/>
<div class="container">
<table id="main" class="x-matrix">
<tr class="top-row" id="top">
<td id="h-gi-1-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-1-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-1" class="h-text">Enter Intiative 1 here</td>
<td id="h-it-1-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr>
<tr class="top-row" id="top">
<td id="h-gi-2-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-2-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-2" class="h-text">Enter Intiative 2 here</td>
<td id="h-it-1-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-3-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-3-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-3" class="h-text">Enter Intiative 3 here</td>
<td id="h-it-1-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-4-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-4-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-4" class="h-text">Enter Intiative 4 here</td>
<td id="h-it-1-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr> <tr class="top-row" id="top">
<td id="h-gi-5-1" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-2" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-3" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-4" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-gi-5-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="i-5" class="h-text">Enter Intiative5 here</td>
<td id="h-it-1-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-2-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-3-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-4-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
<td id="h-it-5-5" class="harvey"><img src="../Images/HarveyBalls/harvey-null.svg" /></td>
</tr>
<tr class=bottom-row>
<td></td>
<td><textarea id="g-2" rows = "2" cols="65" class="v-text" style="text-align:center">Goal 2. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea></td>
<td></td>
<td></td>
<td><textarea id="g-1" rows = "2" cols="65" class="v-text">Goal 1. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea></td>
<td>
<!-- http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container-->
<div id="containerId">
<svg
id="svgId"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 500 600"
preserveAspectRatio="none">
<style>
.caption { font: bold 20px sans-serif; fill: #bd1c1c; }
</style>
<line x1="0" y1="0" x2="500" y2="600" stroke="black" />
<line x1="0" y1="600" x2="500" y2="0" stroke="black" />
<text id="top_caption" class="caption" x="150" y="20" transform="rotate (0 0,0)">Strategic Initiatives</text>
<text id="left_caption" class="caption" x="200" y="20" transform="rotate (270 300,300)">Strategic Goals</text>
<text id="right_caption" class="caption" x="150" y="20" transform="rotate (270 500,30)">Strategic Targets</text>
</svg>
</div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<textarea id="g-3" rows = "2" cols="65" class="v-text" style="bottom :-30px; left:-133px">Goal 3. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-4" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: -96px">Goal 4. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="g-5" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: -54px">Goal 5. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-1" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 392px">Target 1. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-2" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 435px">Target 2. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-3" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 475px">Target 3. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-4" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 517px">Target 4. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
<textarea id="t-5" rows = "2" cols="65" class="v-text" style="bottom :-30px; left: 558px">Target 5. Twas brillig and the slithy toves did gyre and gimball in the wabe, and the mome raths outgrabe.</textarea>
</div>
</body>
</html>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？