Javascript 使用动态值添加1个表单，并在同一页面的另一个表单中显示_Javascript_Jquery

Javascript 使用动态值添加1个表单，并在同一页面的另一个表单中显示

javascript jquery

Javascript 使用动态值添加1个表单，并在同一页面的另一个表单中显示,javascript,jquery,Javascript,Jquery,我想获取字段value3的值，该字段将动态获取值，并在output id hello字段中将其总和显示为输出我还想将字段值2的值发送到另一个页面提前谢谢算术运算变量x，y，z；函数乘法O1，o2，o3{ x=o1.0，数值； y=o2.0值； z=x*y； o3.值=z } 函数calcFormformNode{ 乘法formNode.value1、formNode.value2、formNode.value3； } 在线计算器输入第一个数值：输入第二个数值：算术运算的结果是：

我想获取字段value3的值，该字段将动态获取值，并在output id hello字段中将其总和显示为输出

我还想将字段值2的值发送到另一个页面

提前谢谢

算术运算变量x，y，z；函数乘法O1，o2，o3{ x=o1.0，数值； y=o2.0值； z=x*y； o3.值=z } 函数calcFormformNode{ 乘法formNode.value1、formNode.value2、formNode.value3； } 在线计算器输入第一个数值：输入第二个数值：算术运算的结果是：估计总数：计数=2； my_parent=document.getElementById'i_container'；

fori=0；我你可以从中学到很多好东西：

资源：

搜索任何让你困惑的东西：

算术运算 Num1 Num2 后果总数：

函数addRow{ var table=document.getElementByIdmyTable； var row=table.insertRowtable.rows.length-1； var c0=行。插入单元格0； var c1=行insertCell1； var c2=行insertCell2； var c3=行insertCell3； c1.innerHTML= ; c2.innerHTML= ; var deleteRowHTML=； var resultContainerHTML=； c3.innerHTML=resultContainerHTML+deleteRowHTML； UpdateRownNumber； } 函数deleteRowbtn{ var table=document.getElementByIdmyTable； var index=btn.parentNode.parentNode.rowIndex；表1.1删除行索引； UpdateRownNumber； } 函数updateRownNumber{ var table=document.getElementByIdmyTable；对于var i=1；i请检查是否通过javascript动态创建和提交表单

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input");
i.setAttribute('type',"text");
i.setAttribute('value',"your text ");

f.appendChild(i);
f.submit();

在服务器中：解析JSON字符串

echo json_encode($_POST['ids']);

要从表中生成json，请执行以下操作：

var json = JSON.stringify(content);
        alert( json );

将所有数据发送到其他表单的完整代码：

<html>
<head>
<title>Arithmetic operations</title>
</head>
<body>

<table id="myTable" width="550px" cellPadding=5 cellSpacing=0 border=1>
    <tr style="background-color:#dddddd">
        <td width="50">#</td>
        <td width="30%">Num1</td>
        <td width="30%">Num2</td>
        <td width="40%">Result</td>
    </tr>
    <tr style="background-color:#dddddd">
        <td colspan=3>Sum:</td>
        <td>
            <input id="totalRes" type="text" size=10 readonly=readonly value=0>
            <input type="button" Value="Submit" onClick=submitAll()> 
        </td>
    </tr>
</table>
<p>
    <input type="button" Value="Add row" onClick=addRow()> 
</p>

<script>
    function addRow(){
        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length-1);
        var c0 = row.insertCell(0);
        var c1 = row.insertCell(1);
        var c2 = row.insertCell(2);
        var c3 = row.insertCell(3);

        c1.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        c2.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        var deleteRowHTML = '<input type="button" Value="X" onClick=deleteRow(this)>';
        var resultContainerHTML = '<input name="txt" type="text" size=10 readonly=readonly value=10>';
        c3.innerHTML = resultContainerHTML + deleteRowHTML;

        updateRowNumbers();
    }

    function deleteRow(btn){
        var table = document.getElementById("myTable");
        var index = btn.parentNode.parentNode.rowIndex;
        table.deleteRow(index);
        updateRowNumbers();
    }

    function updateRowNumbers(){
        var table = document.getElementById("myTable");
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            table.rows[i].cells[0].innerHTML = i;
        }

        calcAllRows();
    }

    function calcForm(text){
        row = text.parentNode.parentNode;
        t1 = row.cells[1].childNodes[0];
        t2 = row.cells[2].childNodes[0];
        t3 = row.cells[3].childNodes[0];
        t3.value = t1.value * t2.value;

        calcAllRows();
    }

    function calcAllRows(){
        var table = document.getElementById("myTable");
        var total = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            total += Number(table.rows[i].cells[3].childNodes[0].value);
        }
        document.getElementById('totalRes').value = total;
    }

    function submitAll(){
        var f = document.createElement("form");
        f.setAttribute('method',"post");
        f.setAttribute('action',"submit.php");

        var content = {};

        var table = document.getElementById("myTable");
        var total = 0;
        var k = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            content[k++] = Number(table.rows[i].cells[1].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[2].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[3].childNodes[0].value);
        }

        content[k++] = Number(document.getElementById('totalRes').value);

        var json = JSON.stringify(content);
        alert( json );

        var i = document.createElement("input");
        i.setAttribute('type',"text");
        i.setAttribute('value', json);

        f.appendChild(i);

        f.submit();
    }

</script>

</body>
</html>

伙计，你必须学习javascript。它很简单而且非常有用

谢谢

<html>
<head>
<title>Arithmetic operations</title>
</head>
<body>

<table id="myTable" width="550px" cellPadding=5 cellSpacing=0 border=1>
    <tr style="background-color:#dddddd">
        <td width="50">#</td>
        <td width="30%">Num1</td>
        <td width="30%">Num2</td>
        <td width="40%">Result</td>
    </tr>
    <tr style="background-color:#dddddd">
        <td colspan=3>Sum:</td>
        <td>
            <input id="totalRes" type="text" size=10 readonly=readonly value=0>
            <input type="button" Value="Submit" onClick=submitAll()> 
        </td>
    </tr>
</table>
<p>
    <input id="totalRows" type="text" size=10 value=3>
    <input type="button" Value="Update Rows" onClick=addRowByCount()> 
</p>

<script>
    document.getElementById('totalRows').onkeypress = function(e){
        if (!e) e = window.event;
        var keyCode = e.keyCode || e.which;
        if (keyCode == '13'){
            addRowByCount();
            return false; // consume key
        }
    }
    function addRowByCount(){
        clear();
        count = Number(document.getElementById('totalRows').value);
        for(var i=0; i<count; i++){
            addRow();
        }
        updateRowNumbers();
    }
    function clear(){
        var table = document.getElementById("myTable");
        var rows = table.rows.length-2; // reduce one for top and one for bottom
        for (var i = 0; i<rows; i++) {
            table.deleteRow(1); // remove "form" rows by removing second row and shifting up the rest
        }
        updateRowNumbers();
    }
    function addRow(){
        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length-1);
        var c0 = row.insertCell(0);
        var c1 = row.insertCell(1);
        var c2 = row.insertCell(2);
        var c3 = row.insertCell(3);

        c1.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        c2.innerHTML = 
            '<input name="txt" type = "text" onchange = "calcForm(this)" onkeypress = "this.onchange();"' + 
            ' onpaste = "this.onchange();" oninput = "this.onchange();" onloadstart ="this.onchange();" value = "5" />';

        var deleteRowHTML = '<input type="button" Value="X" onClick=deleteRow(this)>';
        var resultContainerHTML = '<input name="txt" type="text" size=10 readonly=readonly value=10>';
        c3.innerHTML = resultContainerHTML + deleteRowHTML;

        updateRowNumbers();
    }

    function deleteRow(btn){
        var table = document.getElementById("myTable");
        var index = btn.parentNode.parentNode.rowIndex;
        table.deleteRow(index);
        updateRowNumbers();
    }

    function updateRowNumbers(){
        var table = document.getElementById("myTable");
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            table.rows[i].cells[0].innerHTML = i;
        }

        calcAllRows();
    }

    function calcForm(text){
        row = text.parentNode.parentNode;
        t1 = row.cells[1].childNodes[0];
        t2 = row.cells[2].childNodes[0];
        t3 = row.cells[3].childNodes[0];
        t3.value = t1.value * t2.value;

        calcAllRows();
    }

    function calcAllRows(){
        var table = document.getElementById("myTable");
        var total = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            //ignoring title row and total value row
            total += Number(table.rows[i].cells[3].childNodes[0].value);
        }
        document.getElementById('totalRes').value = total;
    }

    function submitAll(){
        var f = document.createElement("form");
        f.setAttribute('method',"post");
        f.setAttribute('action',"submit.php");

        var content = {};

        var table = document.getElementById("myTable");
        var total = 0;
        var k = 0;
        for (var i = 1; i<table.rows.length-1; i++) {
            content[k++] = Number(table.rows[i].cells[1].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[2].childNodes[0].value);
            content[k++] = Number(table.rows[i].cells[3].childNodes[0].value);
        }

        content[k++] = Number(document.getElementById('totalRes').value);

        var json = JSON.stringify(content);
        alert( json );

        var i = document.createElement("input");
        i.setAttribute('type',"text");
        i.setAttribute('value', json);

        f.appendChild(i);

        f.submit();
    }

</script>

</body>
</html>

Java与javascript无关避免使用cloneNode，因为它倾向于盲目克隆节点，而不处理重复的ID。@Vikram Deshmukh我是javascript新手。如果你能发送一些代码，根据我从问题中了解到的情况，这些代码会很有帮助，那么你的要求是广泛的。而且我也无法提供你需要的代码。请e浏览教程并分享您的工作。社区将对其进行策划，并为您指出正确的方向。我希望此解决方案采用表单格式，希望总和值采用另一种形式，还希望将Num2值发送到下一页以用于数据库存储，或者建议我如何使此表中的行数动态：创建函数它接受一个数字，并将行添加到该数字。在此之前，请确保删除从1到行的所有行。length-1我认为您具有表单动态数的代码。请检查此答案，以便在页面之间发送结果。无论您想发送到其他表单，您都可以直接从html中的表单发送，或将其收集到表单中像这样的脚本表单，然后发送。为此，请创建一个包含所需字段的表单，并使其不可见。到时候，请通过代码发送。这很好，因为您可以通过POST或GET方法将所有字段发送到页面。要使用JSON发送数据，请使用研究JSON的工作原理。这非常简单。请检查我们如何创建数组内容，然后在php代码中，像这样解析它。你能帮助我将“添加行”按钮转换为另一个功能吗？我想让它代替添加行的按钮，而是使用count变量来添加行，就像你帮助的上一个问题一样。上一个问题-为此，你必须将两个答案合并在一起。很简单。从中复制代码每个答案都是为了得到你想要的答案。现在我很感兴趣，你的课程名称是什么，我的朋友？我正在做java实习，对javascript一无所知。但我的项目必须使用javascript，这就是为什么我需要你的帮助来完成我的项目。我没有成功地将这两个答案合并在一起。你能在这方面帮助我吗ne还：