如何通过仅单击该行中的一个值来显示该行中的所有值

Posted

技术标签:

【中文标题】如何通过仅单击该行中的一个值来显示该行中的所有值【英文标题】:how to display all the values in a row by just clicking only one of the values in that row 【发布时间】:2011-07-28 00:25:03 【问题描述】:

情况是,当我单击该行时,它会将我引导至“查看页面”,或者单击“更新按钮”会将我引导至“更新窗口”。现在我希望删除和更新按钮与名称和地址值在一行中。

我试过对齐,点击行没有问题,它引导我到“查看页面”但是每次我点击“更新按钮”时,它会弹出两个窗口,即“查看窗口” ”和“更新窗口”,其中它应该只是将弹出的“更新窗口”。

那么我怎样才能使更新页面不会影响查看页面。

这是我作品的链接图片:

(这还没有对齐,因为当我尝试时我遇到了上面的问题)http://www.fileden.com/files/2011/7/27/3174077/My_Documents/a.JPG

这是它的代码:

<link href="main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Principal Page</title>

<script type="text/javascript">

function pop_up(id) 
var newWind = window.open( "view_principal.php?id="+id, "myWindow", 
"status = 1, height = 200, width = 400, resizable = 0" );


function goModify(id)

window.location.href = "modify_principal.php?id=" + id;


function goDelete(id)

var answer = confirm ("Are you sure you want to delete?")

if (answer)
   window.location.href = "delete_principal.php?id=" + id;


function ChangeColor(tableRow, highLight)

if (highLight)

  tableRow.style.backgroundColor = '#66CCFF';

else

 tableRow.style.backgroundColor = '#69F';


 

 function DoLink(theUrl)

document.location.href = theUrl;


</script>



</head>

<body>

<p>
<?php
require_once ('include/config.php');
require_once ('include/opendb.php');
$query = mysql_query("SELECT * FROM principal");
echo "</br>";
echo "<br>";
echo "<div class='divMainTable'>";
echo "<table border='1' >
  <tr class = 'headertable'>
    <th width = '200'> Name</th>
    <th> Address</th>
 </tr>";

while($row = mysql_fetch_array($query))
echo "<tr onclick = 'pop_up($row[principal_ID])');return false;'      onmouseover='ChangeColor(this, true);' onmouseout='ChangeColor(this, false);'>";


echo "<td>".$row['name']."</td>";
echo "<td>".$row['address']."</td>"; 

echo "</tr>";
echo "</table>";
echo "</div>";

echo "<div class='divSecondTable'>";
echo "<table class='updatetable' border='1'>";
echo "<tr class='dataTable'>";
echo "<td align='center'>"."<input type='button' name='update' value='Update' 
onClick='goModify($row[principal_ID])');>"."</td>";

echo "<td align='center'>"."<input type='button' name='delete' value='Delete' 
onClick='goDelete($row[principal_ID])');>"."</td>";
echo "</tr>";
echo "</table>";
echo "</div>";





?>

<form id="form1" name="form1" method="post" action="add_principal.php">
<p class="add_option">
<input type="submit" name="add" id="button" value="ADD" />
</p>
</form>
</body>
</html>

【问题讨论】:

【参考方案1】:

两个窗口都弹出的原因是因为事件冒泡。 input 标签上的事件被触发,然后 tr 标签上的事件被触发。

你需要用

停止传播
event.stopPropagation()

在你的函数中。如果您在脚本中绑定事件而不是编写内联事件处理程序,这实际上更容易做到。

更新:

在您的示例中,因为您要传递参数,所以您还需要传递事件对象。

所以你的内联事件需要将事件添加到参数中,应该是这样的:

<input type="button" name="update" value="Update" onClick="goModify(event, $row[principal_ID]);">

然后在您的函数中,您需要接受事件,因此您的函数现在变为:

function goModify(event, id)

    event.stopPropagation();
    event.cancelBubble = true; // for ie
    window.location.href = "modify_principal.php?id=" + id;

你可以对删除按钮和 js 函数做同样的事情。

【讨论】:

你能告诉我使用它的示例代码吗?我完全是一个初学者..谢谢

以上是关于如何通过仅单击该行中的一个值来显示该行中的所有值的主要内容,如果未能解决你的问题,请参考以下文章

如何仅在单击该行时展开该行?

从列中获取值并根据值是不是正确显示该行中的所有内容(LINQ - c# web API)

如何选择(所有)表 1 中的一行,该行具有与表 2 相同的另一行

单元格处于活动状态时突出显示整行

如何在Qt 的tableview中根据某一单元格的数据来设置该行的字体颜色或背景色。

Javascript - 单击表行上的事件以更改HTML元素