[英]Setting a text as default table cell text in javascript
I'm trying to set "Cell [" + x + ", " + y + "]" as default cell text if nothing is filled in the Sample Cell Data text box.如果“示例单元格数据”文本框中未填写任何内容,我正在尝试将“单元格 [”+x+“、”+y+“]”设置为默认单元格文本。 And if a value is enetered into the Sample Data Cell textbox, the only the value will be shown onto each individual cell.
如果在“示例数据单元格”文本框中输入了一个值,则只有该值将显示在每个单独的单元格中。 I only have very basic knowledge on HTML and javascript.
我对 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 = "";
}
I expected the table to show the cell row and column numbers after using the setAttribute function but nothing appears.我希望表格在使用 setAttribute function 后显示单元格行号和列号,但没有出现。
I think this will solve your problems by我认为这将解决您的问题
making each cell be contentEditable on creation, allowing you to edit the cell when you click it使每个单元格在创建时都是 contentEditable,允许您在单击单元格时对其进行编辑
erasing the previous contents of the cell so you can type whatever you want删除单元格的先前内容,以便您可以键入任何您想要的内容
using the sample cell data text box instead of the cell ID if it is filled in如果已填写,则使用示例单元格数据文本框而不是单元格 ID
I disabled the Clear Table button in the HTML instead of running a script on page load that does it我禁用了 HTML 中的 Clear Table 按钮,而不是在页面加载时运行脚本来执行它
I also removed some of your color options and added line breaks just for aesthetics我还删除了一些颜色选项并添加换行符只是为了美观
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/>
td.appendChild(document.createTextNode("Cell " + x + "," + y)); td.appendChild(document.createTextNode("单元格" + x + "," + y)); Try this bro.
试试这个兄弟。 We are same course LOL.
我们是同一门课程,哈哈。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.