个人中心
gpt4 book ai didi

javascript - JavaScript 中的打印按钮

转载 作者：行者123 更新时间：2023-11-28 05:50:08 25 4
gpt4 key购买 nike

这是我的代码:

<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)

另一个主要问题是只有第一行的第一个打印按钮起作用(只有一个打开打印配置页的按钮)

感谢您的帮助!

最佳答案

您必须将 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>

关于javascript - JavaScript 中的打印按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38144635/

25 4 0
文章推荐： javascript - 如何隐藏顶部菜单后面的下拉菜单？
文章推荐： c++ - ofstream Odeint输出到txt文件
文章推荐： c++ - 重新激活旧项目时找不到 QtCore 中的 header
文章推荐： html - 子 div 离开父 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com