如何使用 JavaScript 在单元格中放置另一个文本？

Posted 2023-05-09

【中文标题】如何使用 JavaScript 在单元格中放置另一个文本？

【英文标题】：How can I put another text in a cell by using JavaScript?

【发布时间】：2020-10-24 11:59:33

【问题描述】：

我想将数组价格放在数组 antipasti 的同一个单元格中。我也尝试过，但我替换了文本。我想在同一个单元格中拥有所有两个数组。 我不知道该怎么做。有人可以告诉我怎么做吗？非常感谢

这是图片：https://i.stack.imgur.com/qwOkj.png

function generateTableAntipasti() 
//Build an array containing Customer records.
var antipasti = new Array();
antipasti.push(["Antipasti"]);
antipasti.push(["Patatine"]);
antipasti.push(["Kellogs"]);
antipasti.push(["Ciao"]);
antipasti.push(["Hello"]);
antipasti.push(["Bye"]);

var price = new Array();
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);


//Create a html Table element.
var table = document.createElement("Table");
table.border = "1";
table.className = "Antipasti";
table.cellSpacing = 20;

//Add the data rows.
for (var i = 0; i < antipasti.length; i++) 
    row = table.insertRow(-1);
    var cell = row.insertCell(-1);
    cell.innerHTML = antipasti[i];     


var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);

【问题讨论】：

类似：cell.innerHTML = antipasti[i]; + ' - ' + price[i];?

@charlietfl 谢谢，但如果我想把 Antipasti 放在数组下面？

好的，然后尝试+ '<br/>' + price[i]; 或在单元格中创建您想要的任何 html 结构

当然你可以使用任何你想要的html。 <br/> 只是一个 html 换行符，默认情况下不可见。尝试使用 <hr/> 代替可见的水平线，例如可以设置样式。或者，但名称和价格在单独的 <div> 中，您可以按类名设置样式

你也有点过于复杂了：你的antipasti-array 也可以工作，如果你像var antipasti = ["Antipasti","Patatine","Kellogs","Ciao","Hello","Bye"];那样构建它会更容易管理

【参考方案1】：

以上所有要点放在一起并缩短了一点......

function generateTableAntipasti() 
  //Build an array containing Customer records.
  var antipasti = ["Antipasti","Patatine","Kellogs","Ciao","Hello","Bye"], 
      price =     ["5,00$","5,00$","5,00$","5,00$","5,00$","5,00$"];

  //Create a HTML Table element.
  var table = document.createElement("Table");
  table.border = "1";
  table.className = "Antipasti";
  table.cellSpacing = 8;

//Add the data rows.
  antipasti.forEach((a,i)=>table.insertRow(-1).insertCell(-1).innerHTML = a +'<br>'+price[i]);

  var dvTable = document.getElementById("dvTable");
  dvTable.innerHTML = "";
  dvTable.appendChild(table);


generateTableAntipasti()

<div id="dvTable"></div>