将所选值从一个页表传递到另一个页表

Pass selected values from one page table to another page table

本文关键字：页表 一个 另一个      更新时间：2023-09-26

大家好

第 1 步：我有一个 html 主页，其中包含 3 个按钮（按钮 1、按钮 2 和按钮 3）和一个包含 10 条记录的表格。

第 2 步：用户单击（单击）以从 10 条记录中选择 3 条记录，然后单击按钮1

步骤3

：然后按钮1 html页面应打开一个表格，其中包含在步骤3中选择的2条记录

步骤4：打开按钮2和按钮3主页的步骤相同

您能否建议如何使用jquery或 JavaScript 还是任何其他语言？

可能有一种更简单的方法可以做到这一点，但这有效。查看示例，了解其工作原理，您应该能够从此处继续您的项目。

首先，将数据从Page1发送到Page2的方法是使用表单并发布数据。

为此，（1） 遍历复选框，（2） 将项目保存到数组，（3） 将数组转换为 JSON（即文本），（4） 构造包含字符串化数组的表单，（5） 将表单附加到文档中，以及 （6） 提交表单

jsFiddle 演示

页1.html： 

var thejson, cars = [];
$('#mybutt').click(function(){
    $('table tbody tr input:checked').each(function(idx,el){
        if ( this.checked ){
            //alert( $(el).closest('tr').find('td:nth-child(1)').text() );
            //alert( idx );
            cars[idx] = $(this).closest('tr').find('td:nth-child(1)').text();
        }
    });
    //alert( cars.length );
    /* Note: replace " with | b/c the " will interfere with value="" */
    thejson = JSON.stringify(cars).replace(/"/g, '|');
    //alert( thejson );
    //Now, create a form and send it to your next page:
    var frm = '<form id="myForm" action="page2.html" method="post">';
    frm += '<input type="text" name="myJSON" value="'+thejson+'" />';
    frm += '</form>';
    $('body').append(frm);
    //$('#myForm').submit();  //NOTE -- ENABLE THIS WHEN READY
}); //END mybutt.click

页2.html：

<?php
    //Step1: receive the POSTed data
    $json = $_POST['myJSON']; //note: spelling and capitalization is CRITICAL
    $json = str_replace('|', '"', $json);  //turn it back into valid JSON
    $arr = json_decode($json);
    //Step 2: construct the HTML
    $out = '<div style="width:200px;padding:30px;background:lavender;border:1px solid blue;">';
    foreach ($car in $arr){
        $out .= 'Car: ' .$car. '<br>';
    }
    $out .= '</div>';
    //Step 3: display the HTML
    echo $out;

笔记：

（1）在page1.html中，为了将json字符串保存到输入表单中，我们将"替换为|。这样做的原因是因为value="["car1","car2","car3"]"只会引起问题！ 这不会引起问题：value="[|car1|,|car2|,|car3|]"

（2） 在 page2.html 中，您会收到 POSTed json 数组，并使用该数据执行您需要执行的任何操作。

在这个例子中，我有 6 个复选框（而不是 10 个），如果选中其中一个，我会显示该复选框的值会覆盖表单。

<form id="foo">
    <input type="checkbox" name="box" value="a" />a
    <input type="checkbox" name="box" value="b" />b
    <input type="checkbox" name="box" value="c" />c
    <input type="checkbox" name="box" value="d" />d
    <input type="checkbox" name="box" value="e" />e
    <input type="checkbox" name="box" value="f" />f
    <button onclick="myscript();">Button1</button>
</form>
<script>
    function myscript()
    {
        var checkboxes = document.getElementsByName('box');
        var selectedelements = "";
        for(var i=0; i<checkboxes.length; i++)
        {
            if(checkboxes[i].checked)
            {
                selectedelements = selectedelements + checkboxes[i].value;
            }
        }
        document.getElementById('foo').innerHTML = selectedelements;
    }
</script>
相关文章：