基本表操作：如何使用JavaScript在HTML表中更改和插入图像？ [英] Basic Table Manipulation: How to change and Insert images in HTML Table using JavaScript?
本文介绍了基本表操作：如何使用JavaScript在HTML表中更改和插入图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我花了一些时间试图弄清楚如何在JavaScript中更改和插入单元格信息，因此我重新学习了我为其他人学到的东西。脚本中还包括我用来弄清楚这些答案的三个网址，希望他们能引导其他人解决他们可能遇到的其他问题。
I spent a bit of time trying to figure out how to alter and insert cell information in JavaScript, so am recapping what I learned for others. Also included in the scripts are three urls I used to figure out these answers in hopes they will lead other folks to solve other questions they may have.
< a href =https://i.stack.imgur.com/hL44z.png =nofollow noreferrer>
推荐答案
<!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>
这篇关于基本表操作：如何使用JavaScript在HTML表中更改和插入图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
