Question

我想使用javascript将输入从一个表复制到同一文档的另一个表。有2个表。在第一个表中，用户将输入所需的值。这些值将用作第二个表中的列标题。到目前为止，我的脚本并没有得到它。请专家知道我做错了什么。

<!DOCTYPE html>
<html>
<head>
<title>PrtQual</title>
<style type="text/css">
body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 0px;
margin-left: 0px; margin-left: 50px; max-width: 800px;}
p, table {margin-left: 25px;}
th {font-weight: bold; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse; border-spacing: 0px;}
td {font-weight: Normal; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse; border-spacing: 0px;}
.hide {display: none;}
.show {display: display;}
.hove: hover {background-color: rgb(250,250,150);}
.btn {padding: 5px 5px 5px 5px; background-color: rgb(240,240,240); margin-    
left: 25px; text-align: center; font-size: 12px; font-weight: bold; border: 
1px; }
.btn:hover {background-color: rgb(250,250,150)}
</style>

<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>

<table id="main">
<tbody>
<tr class="hide">
<td id="ddnfmat"><input type="text" class="hove"/></td>
</tr>
<tr>
<td>PrtQual</td>
</tr>
<tr>
<td>Index</td>
</tr>
<tr>
<td id="ddn"><input type="text" class="hove" /></td>
</tr>
</tbody>
</table>
<p><i> To add a new header, click on the button below</i></p>
<input class="btn" type="button" onclick="addNewheader()" value="Add new  
factor">
<br><br>
<input class="btn" type="button" onclick="copyheader()" value="Finish">
<br><br>
<table id="exp">
<thead>
<tr id="exphdr">
<th>s/n</th>
<th>PrtQual</th>
<th>Index</th>
<th id="ddnO"><input type="text" readonly /></th>
<th id="ddnT"><input type="text" readonly /></th>
<th id="ddnTh"><input type="text" readonly /></th>
<th>Comment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>
function addNewheader() {
    var table = document.getElementById('main');
    var elmnt = table.getElementsByTagName("TR")[0];
    var cln = elmnt.cloneNode(true);
    table.tBodies[0].appendChild(cln);
    var p = document.getElementById('main').rows.length;
    var q = p - 1;
    var s = document.getElementById('main').rows[q];
    s.setAttribute("class", "show"); 
}
</script>

<script>
function copyheader() {
         for (i=3, i<6, i++) {
             tableheader(i)
         }
 }
</script>

<script>
function tableheader(i){
    var tble = document.getElementById('main');
    var mytr = tble.getElementByTagName('tr')[i];
    var mytd = mytr.getElementByTagName('td')[0];
    var myinput = mytd.getElementByTagName('input')[0];
    var myval = myinput.value;

    var tbl = document.getElementById('exp');
    var hdr = tbl.getElementByTagName('tr')[0];
    var hddata = hdr.getElementByTagName('td')[i];
    var inp = hddata.getElementByTagName('input')[0];
        inp.value = myval;
}
</script>
</body>
</html>

Answer 1

如m69所述，方法名称错误。之后，for循环定义不正确。在这些更改之后，除了使用错误的选择器之外，代码没有错误输出。在您的第二个表格中，您尝试选择并操作<TH>而不是<TD>，这就是“hddata”未定义的原因。

<script>

    function addNewheader() {
        var table = document.getElementById('main');
        var elmnt = table.getElementsByTagName("TR")[0];
        var cln = elmnt.cloneNode(true);
        table.tBodies[0].appendChild(cln);
        var p = document.getElementById('main').rows.length;
        var q = p - 1;
        var s = document.getElementById('main').rows[q];
        s.setAttribute("class", "show");
    }

    function copyheader() {
         for ( var i = 3 ; i < 6 ; i++) {  // the loop was previously using comma separators in place of semicolons
             tableheader(i)
         }
     }

    function tableheader(i){
        var tble = document.getElementById('main');
        var mytr = tble.getElementsByTagName('tr')[i];  // all these method calls were misspelled
        var mytd = mytr.getElementsByTagName('td')[0];
        var myinput = mytd.getElementsByTagName('input')[0];
        var myval = myinput.value;

        var tbl = document.getElementById('exp');
        var hdr = tbl.getElementsByTagName('tr')[0];
        var hddata = hdr.getElementsByTagName('th')[i];      // select TH tags here NOT TDs!
        var inp = hddata.getElementsByTagName('input')[0];
            inp.value = myval;
    }

</script>

将输入从一个表复制到同一文档上的另一个表

1 个答案: