0

こんにちは、ある種の家系図を作成しようとしています。新しいファミリを作成するとオプションが動的に追加され、選択したファミリの子を追加するようにユーザーに促すドロップダウン ボックスがあります。

選択したファミリーのテーブルの後に子を追加しようとしていますが、動的に作成されたときに生成される 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>

選択したファミリの後に追加する方法について何か考えはありますか? または、これを行う方が良いですか

4

3 に答える 3

0

何をしようとしているのか正確にはわかりませんが、家族の行の後に子供を新しい行として追加する、より整然としたバージョンを次に示します。

<!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>
于 2013-10-10T01:55:52.307 に答える
0

最良の方法は、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 および/またはクラスを追加してください。

于 2013-10-10T01:02:08.123 に答える