Question

大家好，

第1步：我有一个html主页，其中有3个按钮（button1，button2和button3）和一个表格，可以说10条记录。

第2步：用户点击（单击）从10中选择3条记录，然后点击button1

第3步：然后应打开button1 html页面，其中包含在步骤2中选择3条记录的表格

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

你能否建议如何使用jquery或者实现相同的功能   javascript或任何其他语言？

Answer 1

可能有一种更简单的方法可以做到这一点，但这很有效。查看示例，了解它是如何工作的，您应该能够从这里继续您的项目。

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

为此，（1）循环复选框，（2）将项目保存到数组中，（3）将数组转换为JSON（即文本），（4）构造包含字符串化数组的表单（ 5）将表格附在文件上，并（6）提交表格

jsFiddle Demo

<强> page1.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

<强> page2.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数组，并使用该数据执行您需要执行的任何操作。

Answer 2

在这个示例中，我有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>

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

2 个答案: