如何将表格行数据移动到 html 页面模板？答案

【问题标题】：how can i move table row data to html page template?如何将表格行数据移动到 html 页面模板？
【发布时间】：2019-05-26 14:35:08
【问题描述】：

我必须 html 文件第一个是最后一列中带有 boton 的表格，第二个是带有图像的 html 文件，所以我需要单击表格行并在第二个 html 文件上打印此值，是证书具有名称和计时器时间的值，最后的目标是以 pdf 格式打印，但现在我正在尝试将表格行数据移动到证书中。

非常感谢您的帮助

这是我在第一个 html 文件上尝试的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script>
    //  function myFunction() {
    //    var myWindow = window.open("", "", "width=600,height=400");
    //   myWindow.document.write("valores+=$(this).html()+"\n");
    //   var valores="";
    //  $(this).parents("tr").find("td").each(function(){
    //               valores+=$(this).html()+"\n";
    //                                                  });
    //                              });

    $(document).ready(function() {
        $(".boton").click(function() {

            var myWindow = window.open("cert.html", "_blank", "width=1090,height=860");
            var valores = "";

            // Obtenemos todos los valores contenidos en los <td> de la fila
            // seleccionada
            $(this).parents("tr").each(function() {
                valores += $(this).html() + "\n";
                //valores = valores + "</br></br>";
            });

            //  myWindow.document.write(valores+ "<body background='plantilla.png'/>");
            //       myWindow.document.write("<span class='green'>The score you entered is:"   + valores +   ".Your letter grade is: B!</span>");
                 myWindow.document.write(valores);

           // myWindow.document.write(valores);

            // alert(valores);
        });
    });
</script>

<style>
    myWindow {
        background-image: url("cedulalmma.jpg");
    }

    .boton {
        border: 1px solid #808080;
        cursor: pointer;
        padding: 2px 5px;
        color: white;
    }
</style>

<table border="1" cellspacing="2" cellpadding="5">
    <tr>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td class="boton"></td>
    </tr>
    <tr>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td class="boton"></td>
    </tr>
    <tr>
        <td>val 7</td>
        <td>val 8</td>
        <td>val 9</td>
        <td class="boton"></td>
    </tr>
</table>

【问题讨论】：

您的解决方案无法正常工作。您需要“一些东西”在页面之间传递数据。 cookie、数据存储、在同一页面中使用 AJAX 加载第二个页面或服务器端语言将是替代方案。
主表是由计时应用制作的，出口是带有结果的html页面，所以有java或php...可以用ajax移动数据吗？你能给我一个线索吗？谢谢你的时间

标签： javascript jquery html tablerow

【解决方案1】：

这是一种方法。

像这样修改你的表格脚本：

<script>
    $(document).ready(function() {
      $(".boton").click(function() {
        var valores = "";
        // $(this).siblings() retrieves every adjacent td of the current one
        $(this).siblings().each(function() {
          valores += $(this).html() + "\n";
          //valores = valores + "</br></br>";
        });

        var myWindow = window.open("cert.html", "_blank", "width=1090,height=860");
        // Here You assing the values to a window property:
        myWindow.valores = valores;
      });
    });
</script>

然后，在您的第二个 HTML 页面中，加载 jQuery，您可以获得如下值：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        // Here you can manipulate the however you like
        console.log(window.valores);
    });
</script>

如果服务器需要解析文件（因为它需要一个密钥或只有服务器拥有的东西），那么您需要使用 POST 将数据发送给它，如You can see here。

希望对你有帮助。

【讨论】：