Home > Article > Backend Development > 检测按钮所在行
检测按钮所在行
- WBOYOriginal
- 2016-06-23 14:03:22974browse
我想通过点击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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PHP能用sprintf函数来防止SQL注入吗？Next article：在服务器上的文件怎么重命名？