简体   繁体   English

Javascript将表分配给变量

[英]Javascript assign table to a variable

My goal is to create a button using javascript, that creates a table, that is the same as one I already have.我的目标是使用 javascript 创建一个按钮,该按钮创建一个表格,与我已有的表格相同。 Here I have a table with id="create_table_test", and a button with onsumbit function createTable().在这里,我有一个带有 id="create_table_test" 的表,以及一个带有 onsumbit 函数 createTable() 的按钮。

The problem is whenever the button is executed, instead of a table I get [object HTMLTableElement] .Also tried to do it without the function getElemntById, but the result was the same.问题是每当执行按钮时,我得到的不是表格,而是 [object HTMLTableElement] 。也尝试在没有函数 getElemntById 的情况下执行此操作,但结果是相同的。 With some testing I found that this script doesn't like input types.I tried to do it with the same table, but without the input field types set and it worked out.Maybe thats the cause ?通过一些测试,我发现这个脚本不喜欢输入类型。我试图用同一个表来做,但没有设置输入字段类型,结果成功了。也许这就是原因?

The next thing that maybe have to be kept in mind is that I need to store the filled tables into php variables, then insert them into table.接下来可能需要记住的是,我需要将填充的表存储到 php 变量中,然后将它们插入到表中。

<!DOCTYPE html>
<html>
<head>      
    <script>
    var table = document.getElementById("create_table_test");

            function createTable() {
        document.getElementById("create_table").innerHTML += table;
            }

    </script>
</head>
<body>
    <span id="create_table">
    <table id="create_table_test" class="repeat_table">
            <tr class="tr_test" style="border-bottom:3px solid #0066FF; font-weight:bold">
                <td id="Question">
                Въпрос
                </td>
                <td>
                A
                </td>
                <td>
                B
                </td>
                <td>
                C
                </td>
                <td>
                D
                </td>
                <td>
                True answer
                </td>
                <td>
                </td>
            </tr>
<form name="test" action="send.php" onsubmit="" method="post">

<tr>
<td>
<textarea id="question" name="question" style="width:300px; height:120px;"></textarea></td>
<td>    
<textarea id="answer1" name="answer1" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer2" name="answer2" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer3" name="answer3" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer4" name="answer4" style="width:80px; height:120px"></textarea></td>
<td>
<input id="true_answer" type="radio" name="true_answer" value="A">A<br>
<input id="true_answer" type="radio" name="true_answer" value="B">B<br>
<input id="true_answer" type="radio" name="true_answer" value="C">C<br>
<input id="true_answer" type="radio" name="true_answer" value="D">D<br>
</td>
<td>
<input name="submit" type="submit" value="" class="btn"/>
    </form>
</td>
</tr>
</table>

 <input type="button" onclick="createTable()" value="CreateTable"/>



        </span>
</body>

try this one...试试这个...

function createTable() {
            var table = document.getElementById("create_table_test").outerHTML;
        document.getElementById("create_table").innerHTML += table;
            }

Looks like you want:看起来你想要:

document.getElementById("create_table").innerHTML += table.outerHTML;

But beware of duplicate IDs.但要注意重复的 ID。

Just change this code from:只需更改此代码:

var table = document.getElementById("create_table_test");

        function createTable() {
    document.getElementById("create_table").innerHTML += table;
        }

to:到:

var table = document.getElementById("create_table_test");

        function createTable() {
    document.getElementById("create_table").innerHTML = table.outerHTML;
        }

This will create the same table with the same ids .这将创建具有相同ids的相同表。 You might wanna re-think your logic.你可能想重新思考你的逻辑。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM