将文本设置为 javascript 中的默认表格单元格文本
[英]Setting a text as default table cell text in javascript
问题描述
如果“示例单元格数据”文本框中未填写任何内容，我正在尝试将“单元格 [”+x+“、”+y+“]”设置为默认单元格文本。 如果在“示例数据单元格”文本框中输入了一个值，则只有该值将显示在每个单独的单元格中。 我对 HTML 和 javascript 只有非常基本的知识。
<html>
<head>
<script src="./javascript.js"></script>
<h1> Test A2 </h1>
</head>
<body onload="disableButton()">
<p>No. of Cols :
<input id="noOfCols" type="text" name="cols"/>
No. of Rows :
<input id="noOfRows" type="text" name="rows"/></p>
<p>Sample Cell Data :
<input id="scd" type="text" name="scdata"/>
Cell Height (in pixels) :
<input id="height" type="text" name="chip"/>
Cell Width (in pixels) :
<input id="width" type="text" name="cwip"/>
Cell Background Colour :
<select id="bgcolour" class="colour" name="cbc">
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="cyan">Cyan</option>
<option value="pink">Pink</option>
<option value="orange">Orange</option>
</select>
</p>
<button id="generate" onClick="generate()">Generate Table</button>
<button id="delete" onClick="deleteTable()">Clear Table</button><hr/>
<p id=generatedTable></p>
<hr/>
</body>
</html>
function disableButton()
{
document.getElementById("delete").disabled = true;
}
function generate()
{
document.getElementById("delete").disabled = false;
document.getElementById("generate").disabled = true;
var myTable = document.getElementById("generatedTable");
var table = document.createElement('TABLE');
table.border ='1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var rows = document.getElementById("noOfRows");
var row = Number(rows.value);
var cols = document.getElementById("noOfCols");
var col = Number(cols.value);
for (var y=0; y<row; y++)
{
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var x=0; x<col; x++)
{
var td = document.createElement('TD');
var cellwidth = document.getElementById("width");
var widthcell = cellwidth.value;
td.width = widthcell;
var cellheight = document.getElementById("height");
var heightcell = cellheight.value;
td.height = heightcell;
td.align = "center";
var cellId = "Cell [" + x + ", " + y + "]";
td.setAttribute("id", cellId.toString());
td.addEventListener("mouseover", modifyColor, false);
td.addEventListener("click", clickWhite, false);
var celltextInput = document.getElementById("scd");
var cell = celltextInput.value;
td.appendChild(document.createTextNode(cell));
tr.appendChild(td);
}
}
myTable.appendChild(table);
}
const modifyColor = event =>
{
const color = document.querySelector(".colour");
event.target.style.background = color.value;
}
const clickWhite = event =>
{
const color = document.querySelector(".colour");
event.target.style.backgroundColor = "white";
}
function deleteTable()
{
document.getElementById("generate").disabled = false;
var removeTable = document.getElementById("generatedTable");
removeTable.innerHTML = "";
}
我希望表格在使用 setAttribute function 后显示单元格行号和列号，但没有出现。
1 个解决方案
解决方案1
0 已采纳 2019-11-01 03:19:57
我认为这将解决您的问题
使每个单元格在创建时都是 contentEditable，允许您在单击单元格时对其进行编辑
删除单元格的先前内容，以便您可以键入任何您想要的内容
如果已填写，则使用示例单元格数据文本框而不是单元格 ID
我禁用了 HTML 中的 Clear Table 按钮，而不是在页面加载时运行脚本来执行它
我还删除了一些颜色选项并添加换行符只是为了美观
function generate() { document.getElementById("delete").disabled = false; document.getElementById("generate").disabled = true; var myTable = document.getElementById("generatedTable"); var table = document.createElement('TABLE'); table.border ='1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); var rows = document.getElementById("noOfRows"); var row = Number(rows.value); var cols = document.getElementById("noOfCols"); var col = Number(cols.value); for (var y=0; y<row; y++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var x=0; x<col; x++) { var td = document.createElement('TD'); var cellwidth = document.getElementById("width"); var widthcell = cellwidth.value; td.width = widthcell; var cellheight = document.getElementById("height"); var heightcell = cellheight.value; td.height = heightcell; td.align = "center"; td.contentEditable = "true"; td.addEventListener("mouseover", modifyColor, false); td.addEventListener("click", clickWhite, false); var cellId = "Cell [" + x + ", " + y + "]"; var celltextInput = document.getElementById("scd"); var cell = celltextInput.value; if (document.getElementById("scd").value == "") { td.appendChild(document.createTextNode(cellId.toString())); } else { td.appendChild(document.createTextNode(cell)); } tr.appendChild(td); } } myTable.appendChild(table); } const modifyColor = event => { const color = document.querySelector(".colour"); event.target.style.background = color.value; } const clickWhite = event => { const color = document.querySelector(".colour"); event.target.style.backgroundColor = "white"; event.target.innerHTML = ""; } function deleteTable() { document.getElementById("generate").disabled = false; var removeTable = document.getElementById("generatedTable"); removeTable.innerHTML = ""; }
<p>No. of Cols: <input id="noOfCols" type="text" name="cols"/><br /> No. of Rows: <input id="noOfRows" type="text" name="rows"/></p> <p>Sample Cell Data: <input id="scd" type="text" name="scdata"/><br /> Cell Height (in pixels): <input id="height" type="text" name="chip"/><br /> Cell Width (in pixels): <input id="width" type="text" name="cwip"/><br /> Cell Background Colour: <select id="bgcolour" class="colour" name="cbc"> <option value="black">Black</option> <option value="white">White</option> <option value="red">Red</option> </select> </p> <button id="generate" onClick="generate()">Generate Table</button> <button id="delete" onClick="deleteTable()" disabled="disabled">Clear Table</button> <hr/> <p id=generatedTable></p> <hr/>
解决方案2
0 2019-11-01 10:00:10
td.appendChild(document.createTextNode("单元格" + x + "," + y)); 试试这个兄弟。 我们是同一门课程，哈哈。
使用javascript将表格单元格中的文本转换为url
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.