我想通过点击button触发change（this）事件，获取按钮所在行的id，然后调用changeTotext()方法，使所需要的单元格变换成文本框来进行修改数据，function change（obj）{}方法不会写。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script language="javascript" type="text/javascript"> function showtd(num) { document.getElementById("bg"+num).style.display = "none"; document.getElementById("show"+num).style.display = "block"; } function hidetd(num) { document.getElementById("bg"+num).style.display = 'block'; document.getElementById("show"+num).style.display = 'none'; } function changeTotext() { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"; txt.setAttribute("className","text"); obj.appendChild(txt); txt.select(); } function change(obj){ } function mouseup(){ if (document.getElementById("sort_t") && event.srcElement.id != "sort_t") { var obj = document.getElementById("sort_t").parentElement; var txtValue = document.getElementById("sort_t").value; obj.innerText = txtValue; } } </script></head><body> <form> <table border="1"> <?php $db = mysql_connect('localhost','root','root'); mysql_select_db('ec',$db); if (!$db) { die('Could not connect: ' . mysql_error()); } $result = mysql_query("select * from goods"); echo "<tr> <th>GoodsID</th> <th>BarCode</th> <th>GoodsName</th> <th>Category</th> <th>Specifications</th> <th>Manufacturers</th> <th>Numbers</th> <th>Instructions</th> <th>Pictures</th> <th>Update</th> <th>Delete</th> </tr>"; $n = 0; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td id='a'>" . $row['id'] . "</td>"; echo "<td id='b'>" . $row['barcode'] . "</td>"; echo "<td>" . $row['goods_name'] . "</td>"; echo "<td>" . $row['category'] . "</td>"; echo "<td>" . $row['specifications'] . "</td>"; echo "<td>" . $row['manufacturers'] . "</td>"; echo "<td>" . $row['number'] . "</td>"; echo "<td>" . $row['instruction'] . "</td>"; echo "<td>" . "<img src = '$row[picture_url]' style="max-width:90%"/ alt="检测按钮所在行" >" . "</td>"; echo "<td id='bg$n'>". "<input id='btnshow$n' type='button' value='Update' onclick='showtd($n);change(this)' />". "</td>". "<td id='show$n' style='display:none'>". "<input id='btnclose$n' type='button' value='Save' onclick='hidetd($n);mouseup()'/>". "</td>"; echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>"; echo "</tr>"; ++$n; } mysql_close($db);?> </table></form></body></html>登录后复制
回复讨论(解决方案)
把单元格的内容放在 div 中，动态设置 div 的 contenteditable 属性就可实现修改
contentEditable
