如何在表格行中填充图像？
Posted
技术标签:
【中文标题】如何在表格行中填充图像？【英文标题】：How can I populate an image in a table row? 【发布时间】：2012-11-06 10:14:42 【问题描述】：我正在尝试将图像填充到表格中。这就像一个图像是一个问题，另一个图像是一个答案，它们将在表格中进行比较。我尝试在线搜索，但找不到任何实质性内容。
<html>
<head>
<title>Game Selection</title>
<script type="text/javascript">
function gameddselected()
var gamedd = document.getElementById('gamedd');
var x =document.getElementById('scoretable').rows
var a=x[0].cells
var b=x[1].cells
var c=x[2].cells
if (gamedd.value=='1')
a[0].innerHTML="Game1 Score Table"
else if (gamedd.value=='2')
a[0].innerHTML="Game2 Score Table"
else if (gamedd.value=='3')
a[0].innerHTML="Game3 Score Table"
else if (gamedd.value=='4')
a[0].innerHTML="Game4 Score Table"
</script>
</head>
<body background="http://1.bp.blogspot.com/_68sk2PaFt3Q/Sl8n81IoRcI/AAAAAAAAEUw/AlnMPEC9uc0/s1600/Disable+File+Indexing+In+Windows++Speed+Up+Windows+By+Disabling+Search+Index+2.jpg" >
<h2 style="text-align: center;">
<span style="font-size:18px;">
<span style="font-family: arial, helvetica, sans-serif;">Please select a Game
</span>
</span>
</h2>
<form action="" method="POST" name="form2">
<div align="center">Select:
<select name="gamedd" id="gamedd" style="width:200px" onChange="gameddselected()">
<option value="1">Game1</option><option value="2">Game2</option>
<option value="3">Game3</option><option value="4">Game4</option>
</select>
</div>
</form>
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
</body>
</html>
我希望生成一个图像来代替表格中的 Data1。怎么可能？
任何帮助将不胜感激:)
【问题讨论】：
用户如何与页面交互？通过单击或...通过哪个事件，表格被图像填充？ 用户通过更改下拉菜单进行交互。 【参考方案1】：HTML
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
CODE使用jquery和伪代码
$("#gamedd").change(function()
if selected == urCriteria then;
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg');
$(table tr:lastchild td:firstchild).append(img );
);
您甚至可以使用 ajax 调用加载图像字符串 url
【讨论】：
【参考方案2】：HTML
<TR ALIGN="CENTER">
<TD id="Data1">Data 1</TD>
<TD id="Data2">Data 2</TD>
<TD id="Data3">Data 3</TD>
</TR>
代码
for(i=1;i<4;i++)
x=document.getElementById("Data"+i);
x.innerHTML="<img src='/path/to/image"+i+".jpg' />";
// Assuming your images are named [something]NUMBER.jpg
// You could instead use an array
结果
<div>
<td id="Data1"><img src="/path/to/image1.jpg"></td>
<td id="Data2"><img src="/path/to/image2.jpg"></td>
<td id="Data3"><img src="/path/to/image3.jpg"></td>
</div>
【讨论】：
以上是关于如何在表格行中填充图像？的主要内容，如果未能解决你的问题，请参考以下文章