javascript - 如何在一个函数中获取行数据并提交 from

Question

我正在使用下面的脚本来获取表格行数据，它工作正常

我想在同一次点击时合并表单提交功能

示例 - 当用户单击表格行功能应运行并提交所选表格行数据的数据

----点击行数据表单提交功能---

我尝试添加 document.theForm.submit( date.value = firstname ) 但未定义错误提交

var table = document.getElementById( 'myTable' ),
    inputHash = {
        '0': 'firstname',
        '1': 'lastname',
        '2': 'age',
        '3': 'total',
        '4': 'discount',
        '5': 'diff'
    };

for ( var i in inputHash )
    inputHash[ i ] = document.getElementById( inputHash[ i ] );

table.addEventListener( 'click', function( evt ) {
    var target = evt.target;
    
    if ( target.nodeName != 'TD' )
        return;
    
    var columns = target.parentNode.getElementsByTagName( 'td' );
    
    for ( var i = columns.length; i-- ; )
        inputHash[ i ].value = columns[ i ].innerHTML;
} );

<table id="myTable" cellspacing="1">             
    <thead>
        <tr> 
            <th>first name</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>diff</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>peter</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>9.99</td> 
            <td>20.3%</td> 
            <td>+3</td> 
        </tr> 
        <tr> 
            <td>john</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>19.99</td> 
            <td>25.1%</td> 
            <td>-7</td> 
        </tr> 
        <tr> 
            <td>clark</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>15.89</td> 
            <td>44.2%</td> 
            <td>-15</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>153.19</td> 
            <td>44%</td> 
            <td>+19</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>evans</td> 
            <td>56</td> 
            <td>153.19</td> 
            <td>23%</td> 
            <td>+9</td> 
        </tr> 
    </tbody> 
</table>

<from name="theForm" 
      method="GET">
Firstname is:<input type="text" id="firstname" />
<br>
Lastname is:<input type="text" id="lastname" />
<br>
Age is:<input type="text" id="age" />
<br>
Total is:<input type="text" id="total" />
<br>
Discount is:<input type="text" id="discount" />
<br>
Diff is:<input type="text" id="diff" />
</from>

标签： javascript

Answer 1

你的表格tags是错误的，把它们改成<form>.

提交表单给它一个id然后使用.submit()

var table = document.getElementById( 'myTable' ),
    inputHash = {
        '0': 'firstname',
        '1': 'lastname',
        '2': 'age',
        '3': 'total',
        '4': 'discount',
        '5': 'diff'
    };

for ( var i in inputHash )
    inputHash[ i ] = document.getElementById( inputHash[ i ] );

table.addEventListener( 'click', function( evt ) {
    var target = evt.target;
    
    if ( target.nodeName != 'TD' )
        return;
    
    var columns = target.parentNode.getElementsByTagName( 'td' );
    
    for ( var i = columns.length; i-- ; )
        inputHash[ i ].value = columns[ i ].textContent;
        document.getElementById("myform").submit()
} );

<table id="myTable" cellspacing="1">             
    <thead>
        <tr> 
            <th>first name</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>diff</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>peter</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>9.99</td> 
            <td>20.3%</td> 
            <td>+3</td> 
        </tr> 
        <tr> 
            <td>john</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>19.99</td> 
            <td>25.1%</td> 
            <td>-7</td> 
        </tr> 
        <tr> 
            <td>clark</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>15.89</td> 
            <td>44.2%</td> 
            <td>-15</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>153.19</td> 
            <td>44%</td> 
            <td>+19</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>evans</td> 
            <td>56</td> 
            <td>153.19</td> 
            <td>23%</td> 
            <td>+9</td> 
        </tr> 
    </tbody> 
</table>

<form id="myform" name="theForm" 
      method="GET">
Firstname is:<input type="text" id="firstname" />
<br>
Lastname is:<input type="text" id="lastname" />
<br>
Age is:<input type="text" id="age" />
<br>
Total is:<input type="text" id="total" />
<br>
Discount is:<input type="text" id="discount" />
<br>
Diff is:<input type="text" id="diff" />
</form>