基本表格操作：如何使用 JavaScript 在 HTML 表格中更改和插入图像？答案

【问题标题】：Basic Table Manipulation: How to change and Insert images in HTML Table using JavaScript?基本表格操作：如何使用 JavaScript 在 HTML 表格中更改和插入图像？
【发布时间】：2016-11-11 07:10:27
【问题描述】：

我花了一些时间试图弄清楚如何在 JavaScript 中更改和插入单元格信息，所以我为其他人回顾了我学到的东西。脚本中还包括我用来找出这些答案的三个网址，希望它们能引导其他人解决他们可能遇到的其他问题。

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>

<p>MAKE SURE to display the console or error log in the browser developer     
pull down menu </p>
<p> .... in order to see the console log results </p>
<p>Click the buttons below to try out various table actionsd</p>

<table id="questionTable">
  <tr>
    <td id="R1Q">Question 1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td id="R2Q">Question 2</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td id="R3Q">Question 3</td>
    <td>Row3 cell2</td>
  </tr>

    <tr>
    <td>Question 4</td>

        <td id="row4Col2"   >  <img  src="humpty dumpty and Alice.jpeg" 
    alt="Row 4 cell 2 Alice and humpty dumpty"height="100"     
width="84"style="clear: left" />
  </tr>


</table>
<br>

<button onclick="whatIsThere()">What is in first 3 rows of table?</button>

<button onclick="AddJabber()">CHANGE Alice to Jabberwock</button>

<button type="button" onclick="insertCell()">Insert cell end of first     
row</button>


<script>

// Various helpful urls
//http://www.codingforums.com/javascript-programming/186129-how-put-images-    table-cells-using-javascript.html

//http://www.w3schools.com/jsref/met_tablerow_insertcell.asp
//http://stackoverflow.com/questions/16978296/insert-image-into-table-cell-in-javascript

//Display information in cells with specific identification within specified rows
function whatIsThere() {

   console.log ( "in first row .... " ,    document.getElementById("questionTable").rows[0].cells.namedItem("R1Q").innerHTML);
   console.log ( "in second row .... " , document.getElementById("questionTable").rows[1].cells.namedItem("R2Q").innerHTML);
   console.log ( "in third row .... " , document.getElementById("questionTable").rows[2].cells.namedItem("R3Q").innerHTML);
}

function AddJabber()
// swap out one image for another - in this case we stared with Alice and     Humpty Dumpty and change to the Jabberwock image
{
  document.getElementById("row4Col2").innerHTML = "<img src='the     Jabberwock.jpeg'>";
}

function insertCell()
// insert a new cell - picture of the Cheshire Cat - at the end of the first row
{
    var firstRow=document.getElementById("questionTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="<img src='cheshireCat.jpeg' alt='the Cheshire Cat'/>";
}

</script>

</body>
</html>

【讨论】：