使用 jQuery 从表中提取信息并打包到 JSON 对象中答案

【问题标题】：Extract information using jQuery from table and package into JSON object使用 jQuery 从表中提取信息并打包到 JSON 对象中
【发布时间】：2017-07-27 15:59:18
【问题描述】：

我有一个任务，当用户单击提交并打包成 JSON 对象时，我被要求从表中提取一些信息（使用 jQuery），该对象将存储在数据库中。

jsfiddle 链接：https://jsfiddle.net/ek30dgt9/2/

这是我的 HTML 代码：

    <body>

    <div >

    <table border=1px>

  <thead>
    <tr>
        <th colspan="5">Description</th>
        <th>Comment</th>
        <th>User</th>
        <th>Feedback</th>
        <th>Status</th>
    </tr>
    </thead>
        <tbody style="border-top : 1px solid black" id = "1">
    <tr>
        <td class="partition"><label class="label">Title:</label><label class="label ">A</label></td>
        <td class="sip" style="border-left:none"><label class="label">Author:</label><label class="label">James</label></td>
        <td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px">Ordinary</label></td>
        <td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px">Interesting</label></td>
        <td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px">Amazing</label></td>
        <td rowspan="4"><textarea maxlength="180" class="animated" id="usercomment" name="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal;  height: 80px; width:280px;">The book is ..........</textarea></td>
        <td rowspan="4" align="center">Adam<br><button class="label label-primary">Submit</button></td>
        <td rowspan="4" align="center">Feedback Goes Here<br></td>
            <td rowspan="4" align="center"><br>No Feedback Yet</td>
    </tr>
    <tr>
        <td colspan="2" class="def"><label class="label">Genre:</label><label class="label">Fiction</label></td>
    </tr>
    <tr>
        <td colspan="2" class="path"><label class="label label-primary" style="margin-left:5px">BookURL</label><label class="label label-primary " style="margin-left:40px">DownloadLink</label></td>
    </tr>
    <tr>
        <td colspan="2" class="path"><a style="display:none">www.ddd.com/bookurl</a></td>
    </tr>
</tbody>

我不知道如何使用 jQuery 提取所有信息。

我的 JSON 对象必须是这样的：

{
"tbodyid":"1",
"title":"A",
"author":"James",
"genre":"fiction",
"bookurl":"www.bllllll.com",
"downloadlink":"www.zzzz.com",
"source":
{
    "selection":"library",
    "checked":"true",
}
"comment":"comment_goes_here",
"user":"Adam",
"feedback":"feedback_from_lecturer_goes_here",
"status":"no feedback yet",
}

p/s：允许用户选择多个来源选项。例如：图书馆和电子书。

【问题讨论】：

您的 html 无效。您应该使用表单标签并指定您将使用的方法（获取或发布）
这里缺少一些东西......首先该html是如何生成的？除了复选框，您似乎没有任何用户输入。可以将原始数据绑定到行
@AlexB 这个问题与解析url无关

标签： javascript jquery json html-table

【解决方案1】：

您可以为需要提取的元素添加一个 id 属性：

<tr>
    <td class="partition"><label class="label" id='title'>Title:</label><label class="label ">A</label></td>
    <td class="sip" style="border-left:none"><label class="label" id='author'>Author:</label><label class="label">James</label></td>
...
</td>

然后，使用 JQuery：

function foo() {
    return {
        "title": $("#title").html(),
        "author": $("#author").html()
        ...
    }
}

【讨论】：