-1

jqueryを使用して動的にデータを追加しています。コードを説明する代わりに、ここに貼り付けます。必要なのは、グループデータを個別にデータベースに入れることだけです。データを取得して JSON に変換し、データベースに挿入する必要があります。

コードは

<!DOCTYPE HTML>
<html>
<head>
<body>

<style type="text/css">
   .task,
   .added-task {
    margin-left: 50px;
  }

  .added-task .task {
    margin-left: 0px;
  }

  .added-module {
    font-weight: bold;
  }

  .delete-module,
  .edit-module,
  .delete-task,
  .edit-task {
    display: none;
    margin: 0 10px;
  }

  .added-module:hover {

  }


</style>

<form method='post' name='EstimationForm' class="estimationform">

</form>
<a href="Javascript:void(0)" id="add-group">Add Group</a>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">


//Adding new Module

$("#add-group").click(function(){
  var module_length = $(".module").length;
  if(module_length > 0) {
    if($(".module").text() == "") {
        alert("please enter module name");
    }
    else {
        $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
    }
  }
  else {
    $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
  }
});


// Adding First Task
$(".add-new-task").live("click", function(){
  if($(this).parent().find(".module").val() == "" ) {
    alert("please enter module name");
  }
  else {
    var added_module = $(".module").val();
    $(this).parent().append("<div class='added-module'><span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
    $(this).remove();
    $(".module").remove();
  }

});


// Adding other Task
$(".add-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
         var added_task = $(this).parent().find(".task").val();
         $(this).parent().find(".task").remove();
         $(this).parent().append("<div class='added-task'><span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
         $(this).remove();
  }
});


// Showing the edit and delete on hover
$(".added-module, .added-task").live({
    mouseenter:
       function()
       {
          $(this).find("a").stop(true, true).fadeIn();
       },
    mouseleave:
       function()
       {
          $(this).find("a").stop(true, true).fadeOut();
       }
   }
);


//Edit buttons
$(".edit-task").live("click", function(){
    var text = $(this).parent().find('.task-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='task active' value='" + text + " '/><a href='Javascript:void(0)' class='save-task'>save</a>");

});

$(".edit-module").live("click", function(){
    var text = $(this).parent().find('.module-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='module active' value='" + text + " '/><a href='Javascript:void(0)' class='save-module'>save</a>");

});


//Save buttons
$(".save-module").live("click", function(){
    var added_module = $(this).parent().find('.module').val();
    $(this).parent().html("").append("<span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' />");
    $(this).remove();

});

$(".save-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
          var added_task = $(this).parent().find(".task").val();
          $(".task.active").remove();
         $(this).parent().append("<span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' />");
         $(this).remove();
  }
});


//Delete buttons
$(".delete-module").live("click", function(){
    $(this).parent().parent().remove();
});

$(".delete-task").live("click", function(){
    $(this).parent().remove();
});






</script>

</body>
</html>

使った

$('.module-name').text();

しかし、役に立たない。私を助けてください

この形式で必要です

{
  'group': 'name': 'somename1', 
            'tasks':{'task1':'name1','task2':'name2'}
}
{'group': 'name':'somename2',
            'tasks':'{'task1':'name1','task2':'name2'}'

}

コードを実行すると、理解が深まります。プロセスを説明することはできません。それが私が意図したことです。

ここで 2 つのソリューションが必要です。

最初に div タグにあるデータを取得し、次にコードを上記の形式のように JSON に変換する必要があります。

4

1 に答える 1

0

最新のブラウザーには、JSON の処理に役立つネイティブ関数があります。古いブラウザー (IE8) には、フォールバック (または「ポリフィル」) が必要です。

JSON.stringify(myobject);JavaScript オブジェクトや配列などを有効な JSON に変換します。

JSON.parse(myjson);それを反転します。

于 2013-06-07T08:48:49.340 に答える