将输入值应用于其所有 td innerhtml

Posted 2023-05-07

【中文标题】将输入值应用于其所有 td innerhtml

【英文标题】：apply values of inputs to all its td innerhtml

【发布时间】：2012-02-04 19:58:48

【问题描述】：

当所有td里面有输入时，是否可以改变所有td的innerhtml，我的意思是获取输入的值并将其应用于它的td innerhtml，例如，这是表格及其里面的输入：

<table>
 <tr>
  <td><input value="test" /></td>
  <td>123</td>
 </tr>
</table>

把它改成这样：

<table>
 <tr>
  <td>test</td>
  <td>123</td>
 </tr>
</table>

对于所有的 td 和输入值而不应用 id 和类？！请注意 td innerhtml 没有改变 :) 谢谢大家的帮助！ ;)

【参考方案1】：

这很容易。

首先命名您的表（以便轻松找到它）。

<table id="the_table">
 <tr>
  <td><input value="test" /></td>
 </tr>
</table>

那么你可以这样做：

$('#the_table td input[type="text"]').each(function() 
  var val = $(this).val();
  $(this).parent('td').html(val);
);

Live demo.

说明：

查找此特定表中<td> 内的所有输入。

对于每个输入：

2.1 从输入中检索值

2.2 找到作为<td> 标记的输入的第一个父级并将其innerHTML 设置为该值

【讨论】：

还有一个问题！如果有类型为：隐藏的输入，我只需要使用类型为文本的输入怎么办？！还剩 3 分钟，会接受你的回答，不用担心 ))

【参考方案2】：

是的，你可以这样做：

$('table td:has(:input:only-child)').each(function () 
    $(this).html($(':input', this).val());
);

假设td 中只有一个input。如果不是这种情况，则删除:only-child。

table td:has(:input:only-child)的解释

它说，取table 中的任何td，它有一个input 作为唯一的孩子。

你可以在这里测试它：http://jsfiddle.net/eydtw/

更新：取input，而不是hidden。

$('table td:has(input[type!="hidden"])').each(function () 
    $(this).html($('input[type!="hidden"]', this).val());
);

http://jsfiddle.net/eydtw/1/

或者：选择input，即text。

$('table td:has(input:text)').each(function () 
    $(this).html($('input:text', this).val());
);

http://jsfiddle.net/eydtw/3/

【参考方案3】：

$.each($('table td'),function()

    if($(this).children().length !=0)
    

        var temp = $($(this).children()[0]).val();
        $(this).html(temp);

    

)