Question

您好我正在尝试创建某种类型的家谱。我有一个下拉框，当我创建一个新的系列并提示用户添加所选系列的子项时，它会动态添加选项。

我正在尝试将孩子追加到所选家庭的桌子后面，但我不知道动态制作时会生成哪种ID

代码在

之下

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
//To Create Familes 
$('#submit').on('click', function() {
        var table = $('<table></table>').addClass('table');
    var family = document.getElementById('famname').value;

    $('#family input[type = text],input[type = text],input[type =    text],input[type = text]').each( function() {
    str =  '<td>' + $(this).val() + '</td>';
    $(this).val('');
    table.append( str );
    }); 
    $('#container').append(table);
    $('#select').append($('<option />', { text: family } ) );
});

//To Create child to right family 
$('#submit2').on('click', function() {

var child = prompt("Enter the name of the child you wanna put to the selected family ");
something.after(child);
});
});

</script>

</head>

<body>

<form id ="family" method = "post" target="_parent">
   Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
   Enter Address <input type = "text" name = "address"> <br>
   Enter Father's name <input type = "text" name = "dad"> <br>
   Enter Mother's name<input type = "text" name = "mom"> <br>
   <input id="submit" type="button" value="Submit" name="submit">
</form>

<p>Select Which family you want to add a child to</p>
<form id = "child">
   <select id ="select"></select>
   <input id="submit2" type="button" value="Submit" name="submit">
</form>

<div id  = "container">
</div>

</body>
</html>

如何在选定的家庭之后追加？还是有更好的做法

Answer 1

最好的方法是实际添加元素而不是HTML，例如：

var test = document.createElement('table');
test.setAttribute('id', 'test_id');
document.body.appendChild(test);
console.log(document.getElementById('test_id'));

引用它，请确保使用setAttribute javascript调用或jquery中的.attr（）或.prop（）方法添加id和/或类。

Answer 2

关于你正在尝试做什么并不是很清楚，但这里有一个更整洁的版本，将孩子添加为家庭行后的新行：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script>
      $(function() {
        var cur_id = 0;

        //To Create Familes 
        $('#submit').on("click", function(ev) {
          var id = "family" + cur_id++,
            $row = $('<tr id="' + id + '"></tr>');

          $('#select').append('<option value="' + id + '">' + $("#famname").val() + '</option>');

          $('#family :text')
            .each(function() {
              $row.append('<td>' + $(this).val() + '</td>');
            })
            .val("");

          $('#container table').append($row);
        });

        //To Create child to right family 
        $('#submit2').click(function(ev) {
          var child = prompt("Enter the name of the child you wanna put to the selected family "),
              id = $("#select").val();

          $("#" + id)
            .after("<tr><td>" + child +  "</td></tr>");
        });
      });
    </script>
  </head>
  <body>
    <form id ="family" method = "post" target="_parent">
      <label>Enter Family Name <input type="text" name="famname" id="famname"></label><br>
      <label>Enter Address <input type="text" name="address"></label><br>
      <label>Enter Father's name <input type = "text" name="dad"></label><br>
      <label>Enter Mother's name <input type="text" name="mom"></label><br>
      <input id="submit" type="button" value="Submit" name="submit">
    </form>

    <p>Select Which family you want to add a child to</p>
    <form id="child">
      <select id="select"></select>
      <input id="submit2" type="button" value="Submit" name="submit">
    </form>

    <div id="container">
      <table class="table"></table>
    </div>
  </body>
</html>

Answer 3

    <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {

//To Create Familes 
$('#submit').on('click',function(){

    var table = $('<table></table>').addClass('table');
    var family = document.getElementById('famname').value;

    $('#family input[type = text],input[type = text],input[type =    text],input[type = text]').each(function() {

        str =  '<td>' + $(this).val() + '</td>';

        $(this).val('');

        table.append(str);
        table.addClass(family);


    });





    $('#container').append(table);

    $('#select').append($('<option />', {text: family, value:family}));



});

//To Create child to right family 
var fam, child, str;

$(document).on('change', '#select', function(){

    $('#submit2').show();
    $('#child_name').show();

    fam = $(this).children('#select :selected').val();

});


$(document).on('click', '#submit2', function(){
    child = $('#child_name').val();

    $('#submit2').hide();
    $('#child_name').hide();

    str =  '<td>' + child + '</td>'
    $('.'+fam).append(str);
});



});

</script>

</head>

<body>



<form id ="family" method = "post" target="_parent">
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
Enter Address <input type = "text" name = "address"> <br>
 Enter Father's name <input type = "text" name = "dad"> <br>
Enter Mother's name<input type = "text" name = "mom"> <br>
<input id="submit" type="button" value="Submit" name="submit">
</form>

<p>Select Which family you want to add a child to</p>

<select id ="select">
</select>
<input type="text" id="child_name" style="display:none;">
<input id="submit2" type="submit" value="button" name="submit" style="display:none;">


<div id  = "container">

</div>

</body>
</html>

这应该做，我已经测试过了......希望这有帮助

如何指定动态创建的对象

3 个答案: