Question

我有一个有3个输入的div：

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

将num1的结果添加到num2并放入总文本框中。我用它来添加

$( "#calculate" ).on( "click", function() {
            num1 = $("#num1").val();
            num2 = $("#num2").val();
            total = parseInt(num1) + parseInt(num2);
            $("#total").val(total);
    });

我使用此代码获取html内容：

var cont = $('.getThis').html();

但它只获取内容而不是像这样包含的文本框的值标题

<div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">

我希望结果应该是：标题

<div>ID</div>
  <div>Name</div>
  <p>Content here....</p>
  <input type="text" id="num1" value="OfWhatIInput"> + 
  <input type="text" id="num2" value="OfWhatIInput"> = 
  <input type="text" id="total" value="OfWhatIsTheResult">

Answer 1

您可以使用clone。 clone将复制整个div以及所有事件。

$('#getContent').on('click', function() {
  var cont = $('.getThis').clone(true);
  $(".excelPreview").append(cont);
})

Fiddle

Answer 2

我是通过使用keyup事件完成此操作的。您输入的任何更改都将直接反映在您的总和中。

我在输入样式

上添加class="demo"做了一些更改

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" class="demo" id="num1"> + 
    <input type="text" class="demo" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

你的JS

$(document).ready(function(){
  $(".demo" ).keyup(function() {
     var textInput1 = $('#num1').val();
     var textInput2 = $('#num2').val();
     var total = parseInt(textInput1) + parseInt(textInput2); 
    //erase parseInt and check srting input addition
     $('#total').val(total);
  });
});

此外，您可以在https://jsfiddle.net/zfb37pfp/2/

找到解决方案

Answer 3

var sum=$('#num2).val()+$('#num2).val();
$('#total).val(sum);

Answer 4

要获取文本框的值，您需要使用上述方法。

var num1 = $('#num1').val();
var num2 = $('#num2').val();
var total = $('#num1').val()+$('#num2').val();
$('#total').val(total);

尝试以下给出的完整示例：

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
    <input type="button" name="click" id="click" onclick="a()">
  </div>
  <script src="http://x.dpstatic.com/j/jquery/jquery-1.11.0.min.js"></script>
  <script>
  function a(){
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        var total = parseInt($('#num1').val())+parseInt($('#num2').val());
        $('#total').val(total);
}
  </script>

如果需要更多信息，请告诉我。

由于阿米特

Answer 5

我认为1黑客是

＆＃13;

$('button').click(function() {
  var cont = $('.getThis').clone().find('input:text').attr('value', function() {
    return this.value;
  }).end().html();
  snippet.log(cont)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1" />+
    <input type="text" id="num2" />=
    <input type="text" id="total" />
  </div>
</div>
<button>Test</button>

＆＃13;

获取div的所有内容，包括新输入

5 个答案: