在Javascript中打印按钮
[英]Print button in Javascript
问题描述
这是我的代码：
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
<script type="text/javascript">
function initButtonPrint(){
var button = document.getElementById('button-print');
button.onclick = function(e){
print();
grayLine(1);
return false;
}
}
function grayLine(lineId){
var arrayLine = document.getElementById("mytable").rows;
arrayLine[lineId].style.backgroundColor = "silver";
}
</script>
</thead>
<tbody>
<br/>
<?php
for ($i=0; $i<$lineNumber; $i++)
{
?>
<tr>
<td><?php echo $mytable[$i]['Data']['Column 1']; ?></td>
<td><?php echo $mytable[$i]['Data']['Column 2']; ?></td>
<td><input type="button" id="button-print" value="Print"/></td>
</tr>
<?php
}
echo $this->Js->writeBuffer();
?>
</tbody>
</table>
<script type="text/javascript">
initButtonPrint();
</script>
这段代码做什么用的？
我使用for循环将数据从数据库放入html表中，并在每行中放置一个打印按钮。 单击第一个打印按钮时，将打开打印配置页面，第一行显示为灰色
arrayLine[lineId].style.backgroundColor = "silver";
我想做的事 ？
当我点击打印按钮时，该线为灰色（或银色）
主要问题是我不知道如何告诉javascript哪个按钮来自哪一行。 在我的代码中，第一行是灰色的，因为我将数字1传递给函数
grayLine(1)
另一个主要问题是只有第一行的第一个打印按钮工作（只有一个打开打印配置页）
谢谢你的帮助 ！
5 个解决方案
解决方案1
0 2016-07-01 12:05:40
可能它会帮助你：
<table class="table table-hover" id="mytable" > <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Print</th> </tr> </thead> <tbody> <br/> <?php for ($i=0; $i<$lineNumber; $i++) { ?> <tr> <td><?php echo $mytable[$i]['Data']['Column 1']; ?></td> <td><?php echo $mytable[$i]['Data']['Column 2']; ?></td> <td><input type="button" class="button-print" value="Print"/></td> </tr> <?php } echo $this->Js->writeBuffer(); ?> </tbody> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.button-print').click(function(){ $(this).parent().parent().css('background','grey'); }); }); </script>
在此代码中，当您单击打印按钮时，该行背景将为灰色..
解决方案2
0 2016-07-01 12:06:46
快速浏览，你可以看到这个codepen http://codepen.io/SLRXXX/pen/KrmRgE?editors=1111
属性“id”表示在html DOM树中只有一个具有id的特定元素。 因此，在您向我们展示的html中，有许多具有相同ID的按钮，这是使用“id”的不正确方式，但浏览器不会告诉您。 使用document.getElementById方法时，它只返回第一个按钮。
因此，我们应该做的是将事件绑定到表行中的每个按钮，当单击按钮时，找到包含按钮的行（换句话说，查找按钮的父表行），然后更改其颜色。 要选择所有按钮，我们可以使用class而不是id属性。 或者如果页面足够简单，我们可以使用输入[type =“button”]来选择。
将以下脚本放在 table元素下。
function initButtonPrint() {
var buttons = document.querySelectorAll('#mytable .button-print');
for (var i = 0; i < buttons.length; i++) {
buttons.item(i).onclick = function () {
var t = this;
while (true) { // find the row containing the button
t = t.parentElement;
if (t.nodeName === 'TR') {
break;
}
}
t.style.backgroundColor = "silver";
};
}
}
initButtonPrint();
至于你的表，它可能看起来像这样：
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i<$lineNumber; $i++) {
?>
<tr>
<td><?php echo $mytable[$i]['Data']['Column 1']; ?></td>
<td><?php echo $mytable[$i]['Data']['Column 2']; ?></td>
<td><input type="button" class="button-print" value="Print"/></td>
</tr>
<?php
}
echo $this->Js->writeBuffer();
?>
</tbody>
</table>
解决方案3
0 2016-07-01 12:19:14
您必须将id='button-print'更改为class='button-print'因为'id'在文档中是唯一的，循环创建多个id
请尝试以下代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-hover" id="mytable" >
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<br/>
<?php
$database = array(
'one' => array('name' => 'john' , 'city' => 'noida' , 'addr' => 'xyz','mail' => 'john@xyz.com'),
'two' => array('name' => 'jimi' , 'city' => 'india' , 'addr' => 'abc','mail' => 'jimi@abc.com'),
'three' => array('name' => 'foo' , 'city' => 'china' , 'addr' => 'pqr','mail' => 'foo@pqr.com'),
'four' => array('name' => 'apple' , 'city' => 'america' , 'addr' => 'lmno','mail' => 'apple@lmno.com'),
);
foreach($database as $row)
{
?>
<tr>
<td>Name : <?php echo $row['name']; ?></td>
<td>City : <?php echo $row['city']; ?></td>
<td><input type="button" onclick="change_color(this);" class="button-print" value="Print"/></td>
</tr>
<?php
}
?>
</tbody>
</table>
<script>
function change_color(obj){
$('.button-print').parent().parent().css('background-color' , 'white');
$(obj).parent().parent().css('background-color' , 'silver');
}
</script>
</body>
</html>
解决方案4
0 2016-07-01 12:33:48
我同意孙立仁的回答，你应该接受它，但我也想指出这个标题有点误导，并且可以改写以显示你真正想知道的东西（让按钮点击他知道他的孩子的行） 。 我也会删除php标签，因为它与问题无关，我会使用虚拟数据而不是你的PHP代码填充它，以便更容易让你的代码在像jsfiddle这样的工具上工作。 对不起，如果这听起来很傲慢，那不是我的意图。 会发布它作为评论，但我没有足够的声誉
解决方案5
0 已采纳 2016-07-01 14:29:59
好的，我设法解决了我的问题，这非常简单：我删除了无用的initButtonPrint（）和grayLine（lineId）函数，而是使用jQuery（感谢Gurpreet Janjua）执行此操作：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-print').click(function(){
$(this).parent().parent().css('background','grey');
print();
});
});
</script>
问题是我用id而不是class声明了我的按钮。
非常感谢Sun Liren，N Muhammed Thamjeed以及所有回复我的人
javascript打印按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.