Javascript 从表中传输数据_Javascript_Html_Css_Html Table

Javascript 从表中传输数据

javascript html css

Javascript 从表中传输数据,javascript,html,css,html-table,Javascript,Html,Css,Html Table,我有一个HTML表格 <tr class="top"> <td class="name1"><a href="#">JOHN DOE</a></td> <td class="company1">DOE TRUCKING</td> <td class="position1">TRUCKER</td> <td class="mc1">1234-567-8901<

我有一个HTML表格

<tr class="top">
  <td class="name1"><a href="#">JOHN DOE</a></td>
  <td class="company1">DOE TRUCKING</td>
  <td class="position1">TRUCKER</td>
  <td class="mc1">1234-567-8901</td>
  <td class="dot1">1234-567-8901</td>
  <td class="status1"><img src="images/cross.png" width="12" height="12" alt="cross"></td>
</tr>

假设当您单击时弹出窗口打开，那么您可以使用$this.text并执行以下操作：

$(document).ready(function(){
    $('.name1 a').click(function() {
           $('.popup1 h3').text($(this).text());
        });
    });

完整示例：

<table><td class="name1"><a href="#">JOHN DOE</a></td>
          <td class="company1">DOE TRUCKING</td>
          <td class="position1">TRUCKER</td>
          <td class="mc1">1234-567-8901</td>
          <td class="dot1">1234-567-8901</td>
          <td class="status1"><img src="images/cross.png" width="12" height="12" alt="cross"></td>
</table>

<div class="popup1">
    <div class="cross3"><a href="#"><img src="images/closr-arrow.png" width="19"   height="19" alt="closr-arrow"></a></div>
    <h3>TABLE NAME</h3>
    <a href="#" class="approve">APPROVE ACCOUNT</a>
    <a href="#" class="deny">DENY ACCOUNT</a>
</div>

<script>
    $(document).ready(function(){
        $('.name1 a').click(function() {
            $('.popup1').lightbox_me({}); // <-- whatever your popup is, it plays no role here
            $('.popup1 h3').text($(this).text());
        });
    });
</script>

对不起，你说的是灯箱，但我看不出它叫什么，或者是什么灯箱，因为灯箱更像是画廊的东西

这就是为什么我使用jQueryUI对话框的原因，如果这没有帮助，那么应该有人拿走你的键盘，我希望这一个将为你节省一些重复的猜测给你的类名

<?php

$rows=array(
    0=>array("id"=>'1',"name"=>'Tom',"company"=>'U',"status"=>'active'),
    1=>array("id"=>'2',"name"=>'Hre',"company"=>'E',"status"=>'suspended'),
    2=>array("id"=>'3',"name"=>'Peter',"company"=>'Pawtucket',"status"=>'wasted'),
    3=>array("id"=>'4',"name"=>'Griffin',"company"=>'Patriot',"status"=>'drunk'),
);

?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <link href="/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
        <script type="text/javascript" src="/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
        <style>
            .name {color:#00F;}
        </style>
        <script>
        $(document).ready(function(){    
            $("#popup").dialog({
                autoOpen: false,
                modal: true,
                width: 500,
                height: 500,
                title: "Content From Row",
                closeOnEscape: true,
                closeText: "fechar",
                show: {
                    effect: "fadeIn",
                    duration: 1000
                },
                hide: {
                    effect: "fadeOut",
                    duration: 1000
                }
            });
        });
        </script>

        <script>
            $(document).ready(function(){
                $('.name a').click(function() {
                    $('#popup h3').text($(this).text());
                    $(this).parent().siblings().each(function(){
                        if($(this).hasClass('company')){
                            $('#popup .popup_company').text($(this).text());
                        }
                        if($(this).hasClass('status')){
                            $('#popup .popup_status').text($(this).text());
                        }
                    });
                    $("#popup").dialog('open');
                });
            });
        </script>

    </head>
    <body>

        <?php 
        if(is_array($rows)){
            ?><table>
                <tr><td>Row No</td><td>ID</td><td>Name</td><td>Company</td><td>Status</td></tr>    
            <?php
            foreach($rows as $row_key=>$row){
                ?><tr><?php
                    if(is_array($row)){
                        echo('<td>'.$row_key.'</td>');
                        foreach($row as $value_key=>$value){
                            if($value_key == "name"){
                                echo('<td class='.$value_key.'><a>'.$value.'</a></td>');
                            }else{
                                echo('<td class='.$value_key.'>'.$value.'</td>');
                            }
                        }
                    }
                ?></tr><?php
            }
            ?></table><?php
        }
        ?>

        <div style="display:none;"><div id="popup">
            <div class="cross3">
                <a href="#"><img src="images/closr-arrow.png" width="19"   height="19" alt="closr-arrow"></a>
            </div>
            <h3>TABLE NAME</h3>
            <a href="#" class="popup_company"></a>
            <a href="#" class="popup_status"></a>
            <a href="#" class="approve">APPROVE ACCOUNT</a>
            <a href="#" class="deny">DENY ACCOUNT</a>
        </div></div>

    </body>
</html>

下面是我不知道你如何处理弹出窗口，但这是你的js应该如何构造的

$(function(){
    $('a').click(function(){
      $('h3').html($(this).html())
    });
});

你会想给你的元素一些ID，你可以用Vanilla JS轻松做到这一点，只需使用innerHTMLHow弹出窗口就可以了？我的意思是，你已经有了什么JS？可以用CSSSee编辑中的伪元素和数据属性来完成。对不起，你的弹出代码不完整，请修复由于某种原因弹出的代码不再显示。粘贴整个代码，以便我们可以检查你的错误在哪里请参阅我的编辑。这就是我弹出窗口的方式。对于你的，我只是简单地将这个部分添加到lightbox部分。不要紧，我是对的，你使用的是点击as触发器，我需要lightbox代码才能工作。Lightbox是一个做我的弹出窗口的人……@user3792038然后修复你发布的脚本，你不需要它来更改h3或验证概念。如果我想在其中显示项目，弹出窗口显然起着某种作用。否则无法测试…@user3792038只需放入$'.popup1 h3'.text$this.text；在同一目录下。单击函数。。。。代码就是那个灯箱

<?php

$rows=array(
    0=>array("id"=>'1',"name"=>'Tom',"company"=>'U',"status"=>'active'),
    1=>array("id"=>'2',"name"=>'Hre',"company"=>'E',"status"=>'suspended'),
    2=>array("id"=>'3',"name"=>'Peter',"company"=>'Pawtucket',"status"=>'wasted'),
    3=>array("id"=>'4',"name"=>'Griffin',"company"=>'Patriot',"status"=>'drunk'),
);

?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <link href="/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
        <script type="text/javascript" src="/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
        <style>
            .name {color:#00F;}
        </style>
        <script>
        $(document).ready(function(){    
            $("#popup").dialog({
                autoOpen: false,
                modal: true,
                width: 500,
                height: 500,
                title: "Content From Row",
                closeOnEscape: true,
                closeText: "fechar",
                show: {
                    effect: "fadeIn",
                    duration: 1000
                },
                hide: {
                    effect: "fadeOut",
                    duration: 1000
                }
            });
        });
        </script>

        <script>
            $(document).ready(function(){
                $('.name a').click(function() {
                    $('#popup h3').text($(this).text());
                    $(this).parent().siblings().each(function(){
                        if($(this).hasClass('company')){
                            $('#popup .popup_company').text($(this).text());
                        }
                        if($(this).hasClass('status')){
                            $('#popup .popup_status').text($(this).text());
                        }
                    });
                    $("#popup").dialog('open');
                });
            });
        </script>

    </head>
    <body>

        <?php 
        if(is_array($rows)){
            ?><table>
                <tr><td>Row No</td><td>ID</td><td>Name</td><td>Company</td><td>Status</td></tr>    
            <?php
            foreach($rows as $row_key=>$row){
                ?><tr><?php
                    if(is_array($row)){
                        echo('<td>'.$row_key.'</td>');
                        foreach($row as $value_key=>$value){
                            if($value_key == "name"){
                                echo('<td class='.$value_key.'><a>'.$value.'</a></td>');
                            }else{
                                echo('<td class='.$value_key.'>'.$value.'</td>');
                            }
                        }
                    }
                ?></tr><?php
            }
            ?></table><?php
        }
        ?>

        <div style="display:none;"><div id="popup">
            <div class="cross3">
                <a href="#"><img src="images/closr-arrow.png" width="19"   height="19" alt="closr-arrow"></a>
            </div>
            <h3>TABLE NAME</h3>
            <a href="#" class="popup_company"></a>
            <a href="#" class="popup_status"></a>
            <a href="#" class="approve">APPROVE ACCOUNT</a>
            <a href="#" class="deny">DENY ACCOUNT</a>
        </div></div>

    </body>
</html>

$(function(){
    $('a').click(function(){
      $('h3').html($(this).html())
    });
});