如何在 tbody 中附加Child 作为第一行并使用 Javascript/Jquery 拥有自己的 tbody

Question

我需要将 json 中的数据作为行附加到表中。我需要在他们自己的 tbody 中附加 id="project" 作为第一行的行。如果检测到新项目，将创建新的 tbody，项目和任务将拥有自己的 tbody。如果行 id 是“任务”，那么它将在项目行之后创建。我该怎么做？

Json 数据 =

var jason = {"projects":[{"projName":"1","task_data":[{"taskName":"1","task_detail_data":[{"hr_Sun":"0.00","hr_Mon":"0.00","hr_Tue":"0.00","hr_Wed":"0.00","hr_Thu":"0.00","hr_Fri":"0.00","hr_Sat":"0.00"}]},{"taskName":"1","task_detail_data":[{"hr_Sun":"0.00","hr_Mon":"0.00","hr_Tue":"0.00","hr_Wed":"0.00","hr_Thu":"0.00","hr_Fri":"0.00","hr_Sat":"0.00"}]}]}]}

要在表格中显示的代码 =

function displayData(data) {

var json = JSON.parse(data);

for (let i = 0; i < json.projects.length; i++) {

    var tb = document.getElementById("table");
    var x = document.createElement("tbody");
    x.setAttribute("id", "Section");
    x.setAttribute("class", "theBody");
    tb.appendChild(x);

    var tr = document.createElement('tr');
    tr.setAttribute("id", "Project");
    tr.setAttribute("class", "p_name");
    tr.setAttribute("style", "background-color: #e8e8e8; color:black");
    x.appendChild(tr);
    
    //add data
        
    for (let j = 0; j < json.projects[i].task_data.length; j++) {

            var trow = document.createElement('tr');
            trow.setAttribute("id", "Task");
            trow.setAttribute("class", "val");
            x.appendChild(trow);   

            //add data
    }
}

}

据说它会很好地工作，但是，当我运行代码时，行会变得杂乱无章，有时 body 会拥有错误的项目和任务，有时根本没有孩子。这是错误的。

请帮忙。谢谢

**这是我想得到的 **但这就是我得到的（注意 A:1 B:2 C:3） **这是来自开发工具。注意到前两个 tbody 没有捕获自己的项目和任务并留空

Answer 1

似乎一切都是我自己的错误造成的。每个函数/进程（未包含在示例中）的定位是错误的，这就是为什么它没有很好的结果。

代码是正确的。谢谢大家

**顺便说一句，对于 /anonymous/ 我应该使用 prepend 的早期评论，我想将他标记为答案，但他已经走了。苏……

这应该是他的答案，而且是正确的

function displayData(data) {

var json = JSON.parse(data);

for (let i = 0; i < json.projects.length; i++) {

    var tb = document.getElementById("table");
    var x = document.createElement("tbody");
    x.setAttribute("id", "Section");
    x.setAttribute("class", "theBody");
    tb.appendChild(x);

    var tr = document.createElement('tr');
    tr.setAttribute("id", "Project");
    tr.setAttribute("class", "p_name");
    tr.setAttribute("style", "background-color: #e8e8e8; color:black");
    x.prepend(tr);

    //add data

    for (let j = 0; j < json.projects[i].task_data.length; j++) {

            var trow = document.createElement('tr');
            trow.setAttribute("id", "Task");
            trow.setAttribute("class", "val");
            x.appendChild(trow);   

            //add data
    }
}

}

Answer 2

使用reactjs 组织您的代码。

const json = {
  "projects": [{
    "projName": "1",
    "task_data": [{
      "taskName": "Task 1",
      "task_detail_data": [{
        "hr_Sun": "0.00",
        "hr_Mon": "0.00",
        "hr_Tue": "0.00",
        "hr_Wed": "0.00",
        "hr_Thu": "0.00",
        "hr_Fri": "0.00",
        "hr_Sat": "0.00"
      }]
    }, {
      "taskName": "Task 2",
      "task_detail_data": [{
        "hr_Sun": "0.00",
        "hr_Mon": "0.00",
        "hr_Tue": "0.00",
        "hr_Wed": "0.00",
        "hr_Thu": "0.00",
        "hr_Fri": "0.00",
        "hr_Sat": "0.00"
      }]
    }]
  }]
};

//---- Task, Project and App components
class Task extends React.Component {

 render() {
   return (
     <tr className="val">
       <td>{this.props.name}</td>
       <td>{JSON.stringify(this.props.details)}</td>
     </tr>
   )
 }
}

Task.defaultProps= {details:{}};
 // Project component
class Project extends React.Component {

   render() {
     return (
       <tbody className="p_name" style={{backgroundColor: '#e8e8e8', color:'black'}}>

        {this.props.tasks.map((t,i) => 
          <Task key={i} name={t.taskName} details={t.task_detail_data} />
        )}

       </tbody>
     )
   }

}

Project.defaultProps = {tasks: []};

   // App component
class App extends React.Component {

  render() {
     return (
       <table>

          {json.projects.map(p => 
            <Project tasks={p.task_data}  />
          )}

       </table>
     )
  }

}

ReactDOM.render(<App /> , document.querySelector('section') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section>
  
  
  </section>