gpt4 book ai didi

javascript - 如何使用 Javascript/Jquery 将 Child 追加为 tbody 中的第一行并拥有自己的 tbody

转载 作者:行者123 更新时间:2023-12-03 05:09:54 27 4
gpt4 key购买 nike

我需要将 json 中的数据作为表中的行追加。我需要将 id="project"的行添加为自己的 tbody 中的第一行。如果检测到新项目,将创建新的 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
}
}

}

据说它会很好地工作,但是,当我运行代码时,该行将是无组织的,有时主体会拥有错误的项目和任务,有时根本没有 child 。这是错误的。

请帮忙。谢谢

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

最佳答案

使用 组织您的代码.

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>

关于javascript - 如何使用 Javascript/Jquery 将 Child 追加为 tbody 中的第一行并拥有自己的 tbody,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41865336/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com