-2

目前，我有两个带有两个文本框的表格行。我想建立一个按钮，允许用户根据他们想要的数量添加和减去作者行。一旦他们增加了输入所需的作者数量，用户点击生成按钮，来自文本框的输入将在页面底部输出。我试图用 javascript 和 jQuery 来解决这个问题。我是一个使用 javascript 和 jQuery 的十天大的学生，感觉好像我吃的东西太多了。

我想要的一个例子可以在这个 lnk 中找到：http ://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/ 。但是，我需要来自同一页面上输出的文本框的输入。

<!DOCTYPE html>
<head>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>Author</td>
            <td><input type="text" id="1" class="normalinput"            placeholder="Last"></td>
            <td><input type="text" id="2" class="normalinput" placeholder="First"></td>
        </tr>
        <tr>
            <td>Second Author (If Any)</td>
            <td><input type="text" id="3" class="normalinput"      placeholder="Last"></td>
            <td><input type="text" id="4" class="normalinput" placeholder="First"></td>
        </tr>
</tbody>
</table>
<br>
<br>
<output id="20"></output>
<br>
<br>
 </body>
 </html>

<script type=text/javascript>
function myFunction()
{
var firstlast=document.getElementById("1").value;
if (firstlast==null || firstlast=="")
  {
  firstlast;
  }
else if(firstlast!=null || firstlast!="")
  {
  firstlast=document.getElementById("1").value + ", ";
  }

var firstfirst=document.getElementById("2").value;
if (firstfirst==null || firstfirst=="")
  {
  firstfirst;
  }
else if(firstfirst!=null || firstfirst!="")
  {
  firstfirst=document.getElementById("2").value + ". "; 
  }

var secondlast=document.getElementById("3").value;
if (secondlast==null || secondlast=="")
  {
  secondlast;
  }
else if(secondlast!=null || secondlast!="")
  {
  secondlast=document.getElementById("3").value + ", ";
  }

document.getElementById("20").innerHTML = firstlast + firstfirst + secondlast; 
}
</script>

4

2 回答 2

0

jQuery

//wait for the document to be ready
$(document).ready(function()
{
    // when generate authors is clicked
    $("#generate-authors").click(function()
    {
        // get the first author row in your table
        var author = $(".author-row:first");

        // for the amount of authors put into the text box
        // insert a copy of the row after the last row
        for(i = 0; i < parseInt($("#author-amount").val()); i++)
            $(".author-row:last").after(author.clone());
    });

    // when output data is clicked
    $("#output-data").click(function()
    {
        // go through all the author rows
        $(".author-row").filter(function()
        {
            // add them to the output element
            $("#output").append("<p>" + $(this).find("[placeholder=\"Last\"]").val() + ", " + $(this).find("[placeholder=\"First\"]").val() + ".</p>");
        });
    });
});

html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            // put the script here
        </script>
    </head>
    <body>
        <input id="author-amount" type="text" />
        <input id="generate-authors" type="button" value="Generate" />
        <br />
        <input id="output-data" type="button" value="Output Data" />
        <table>
            <tbody>
                <tr class="author-row">
                    <td>Author</td>
                    <td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
                    <td><input type="text" id="2" class="normalinput" placeholder="First"></td>
                </tr>
            </tbody>
        </table>
        <br />
        <output id="output"></output>
    </body>
</html>
于 2013-07-25T17:53:05.170 回答
-1

看到这个例子可能是你想要的

HTML

<table id="table">
   <tbody>
     <tr>
        <td>Author</td>
        <td><input type="text" id="1" class="normalinput"               placeholder="Last"></td>
        <td><input type="text" id="2" class="normalinput" placeholder="First"></td>
    </tr>
    <tr>
        <td>Second Author (If Any)</td>
        <td><input type="text" id="3" class="normalinput"      placeholder="Last"></td>
        <td><input type="text" id="4" class="normalinput" placeholder="First"></td>
    </tr>
   </tbody>
</table>
<input type="button" id="generat" value="add">
<input type="button" id="remove" value="remove">    
<input type="button" id="display" value="display">        
<output id="20"></output>

JS

$(document).ready(function(){
    $("#generat").click(function(){
        var clone = $("#table tr:first").clone();
        $("#table tbody:last").append(clone);

    });  
    $("#remove").click(function(){
        $("#table tbody tr:last").remove();

    });  
    $("#display").click(function(){
      $("#20").html("");
      $("table tr").each(function(){
         $(this).find("input").each(function(){
             $("#20").append(($(this).val()));
         });
      });
    }) 

});

关联

于 2013-07-25T17:53:41.287 回答