Question

我正在尝试在我的html文档中创建一个javascript函数，该函数基本上取每个<td>的值并将其放在文本框中。非常感谢任何帮助。

 <html>
    <head>
        <script type="text/javascript">
            function typeThis(){
                   document.getElementById('box_1').value = document.getElementById('typewriter');   
            }
        </script>

        <style type="text/css">
        td{
          border:1px solid black;  
          padding:10px 10px 10px 10px;
          font-family:"Helvetica Neue";
          font-size:20px; 
          }
         table{
         margin-top:50px;   
         }
        </style>
    </head>
    <body>
    <table id = "typewriter">
        <td value="k" onclick="typeThis();">k</td>    
        <td value="c" onclick="typeThis();">c</td>    
        <td value="y" onclick="typeThis();">y</td>    
        <td value="s" onclick="typeThis();">s</td>    
        <td value="p" onclick="typeThis();">p</td>    

    <input type="text" id="box_1">
    </table>
    </body>    
    </html>

Answer 1

怎么样

var box = document.getElementById("box_1");
var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
    var valToAdd = tds[i].textContent ? tds[i].textContent : 
           (tds[i].innerText ? tds[i].innerText : tds[i].innerHTML);
    box.value = box.value + valToAdd;
}

为了避免使用innerHTML，它会检查更新的textContent并使用它（如果存在）。如果没有，它将回退到innerText，作为最后的手段，内部HTML。

此外，如果要向td标记添加自定义属性，您可能希望选择更标准的data-value =“k”格式。并检查您的代码是否有关闭表标签

Answer 2

value是td的自定义属性，

因此您可以使用此方法访问它

function typeThis(){
     document.getElementById('box_1').value = this.getAttribute("value");   
}

旁注： 这就是你的表格应该是什么样子

<table id = "typewriter">
   <tr>
        <td value="k" onclick="typeThis();">k</td>    
        <td value="c" onclick="typeThis();">c</td>    
        <td value="y" onclick="typeThis();">y</td>    
        <td value="s" onclick="typeThis();">s</td>    
        <td value="p" onclick="typeThis();">p</td>    
   </tr>
</table>

<input type="text" id="box_1">

示例2：

function typeThis(letter){
     document.getElementById('box_1').value = letter;   
}

<table id = "typewriter">
   <tr>
        <td value="k" onclick="typeThis('k');">k</td>    
        <td value="c" onclick="typeThis('c');">c</td>    
        <td value="y" onclick="typeThis('y');">y</td>    
        <td value="s" onclick="typeThis('s');">s</td>    
        <td value="p" onclick="typeThis('p');">p</td>    
   </tr>
</table>

Answer 3

主要问题在于这一行：

document.getElementById('box_1').value = document.getElementById('typewriter');

您指定'box_1'输入的值等于表格元素本身，而不是指定点击的特定td的值。

如果您将函数更改为接受单击的td参数，则可以访问value属性：

function typeThis(el){
   document.getElementById('box_1').value = el.getAttribute('value');
}

// then change each TD to look like this:
<td value="k" onclick="typeThis(this);">k</td>

但是，如果在表上使用单击处理程序而不是在每个单独的td上放置一个，则可以稍微简化代码。当点击一个td时，该事件“冒泡”到包含tr然后再到表中，所以你在那里处理它并检查事件对象以查看哪个td是实际目标：

function typeThis(e) {
   // allow for the way IE handles the event object
   // compared to other browsers
   e = e || window.event;
   var el = e.srcElement || e.target;
   if (el.tagName.toLowerCase() === "td")
      document.getElementById('box_1').value = el.getAttribute('value');
}

document.getElementById('typewriter').onclick = typeThis;

关于你的表格html，有些浏览器可能猜到你的意思并显示它，但是你应该有一个结束</table>标签，你的tds应该在tr中。请注意，我删除了所有onclick分配，因为使用上面的代码为表分配一个您不需要它们：

<table id="typewriter">
  <tr>
     <td value="k">k</td>
     <td value="c">c</td>
     <td value="y">y</td>
     <td value="s">s</td>
     <td value="p">p</td>
  </tr>
<table>

请注意，目前每个td的值与其innerHTML完全相同，因此您可以从函数中的标记和用户.innerHTML中删除所有值属性，而不是获取{{{ 1}}：

value

麻烦添加文本框onclick的值

3 个答案: