从HTML发送多行到PHP并以JSON格式存储

Question

I need to provide option to user to enter multiple rows of data in form and save. I have html something like this.

<form id="books">
<table>
<tbody>
    <tr>
        <td><input name="bookName" type="text" /></td>
        <td><input name="author" type="text" /></td>
        <td><input name="publisher" type="text" /></td>
        <td><input name="year" type="text" /></td>
    </tr>
        <tr>
        <td><input name="bookName" type="text" /></td>
        <td><input name="author" type="text" /></td>
        <td><input name="publisher" type="text" /></td>
        <td><input name="year" type="text" /></td>
    </tr>
        <tr>
        <td><input name="bookName" type="text" /></td>
        <td><input name="author" type="text" /></td>
        <td><input name="publisher" type="text" /></td>
        <td><input name="year" type="text" /></td>
    </tr>
        <tr>
        <td><input name="bookName" type="text" /></td>
        <td><input name="author" type="text" /></td>
        <td><input name="publisher" type="text" /></td>
        <td><input name="year" type="text" /></td>
    </tr>
 </tbody>
</table>
<button id="AddRow">Add Row</button>
<button id="SubmitBook">Save</button>
</form> 

I want to save data in JSON thru PHP. Can someone help how can I serialize my form to POST like below, let me know if I have to use HTML in different way to make this easier (I tried finding solution, couldn't find anyone fitting my requirement):

{
"books": [
{"bookName":"html", "author":"xxxxx", "publisher":"johnWiley", "year":"2010"},
{"bookName":"CSS", "author":"yyyyy", "publisher":"johnWiley", "year":"2011"},
{"bookName":"javaScript", "author":"aaaa", "publisher":"johnWiley", "year":"2012"},
{"bookName":"PHP", "author":"bbbbb", "publisher":"johnWiley", "year":"2013"}
]
}

Answer 1

var arr = [];
$('#SubmitBook').click(function() {
  var tablerow = $('#table').find('tr');
  tablerow.each(function() {
    var bookname = $(this).find('td .bookName').val();
    var author = $(this).find('td .author').val()
    var publisher = $(this).find('td .publisher').val()
    var year = $(this).find('td .year').val()

    arr.push({
      bookname: bookname,
      author: author,
      publisher: publisher,
      year: year

    })

  })
  console.log(JSON.stringify(arr))
})

Try like this

DEMO