JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divLeft">
    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>兴趣</th>
            <th>查询</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        <tbody id="Main"></tbody>
    </table>
</div>
<div id="divRight">
    <form id="form">
        编号<input type="text" name="Id" id="fId" value="" disabled /><br />
        姓名<input type="text" name="Name" id="fName" value="" /><br />
        年龄<input type="text" name="Age" id="fAge" value="" /><br />
        兴趣<input type="text" name="Interest" id="fInterest" value="" /><br />
        <input type="button" value="添加" id="btnAdd" />
        <input type="button" value="提交新记录" id="btnSubmit" disabled="disabled" />
    </form>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}

#divLeft {
    width: 300px;
    border: 1px solid red;
    float: left;
}

#divRight {
    width: 200px;
    height: 500px;
    border: 1px solid green;
    margin-left: 320px;
}

JavaScript

//===================
//      加载页面
//===================
$(function() {
    initTable();//初始化表格
    initButton();
});

//===================
//     页面初始化
//===================
function initTable() {
    $.get(
        '',//'Buttle_Select_Buttle.ashx',
        function(res) {
            var d = [
                {Id: 1, Name: 'n1', Age: 18, Interest: 'hh1'},
                {Id: 2, Name: 'n2', Age: 28, Interest: 'hh2'},
                {Id: 3, Name: 'n3', Age: 38, Interest: 'hh3'},
                {Id: 4, Name: 'n4', Age: 48, Interest: 'hh4'},
                {Id: 5, Name: 'n5', Age: 58, Interest: 'hh5'}
            ];
            var data = d;//parseJSON(res);
            var items = [];
            $.each(data, function(index, item) {
                var strTr = "<tr id=" + item.Id + ">";
                strTr += "<td>" + item.Id +"</td>";
                strTr += "<td>" + item.Name +"</td>";
                strTr += "<td>" + item.Age +"</td>";
                strTr += "<td>" + item.Interest +"</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnSelect'>详细</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnUpdate'>修改</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnDelete'>删除</td>";
                strTr += "</tr>";
                items.push(strTr);
            })
            $("#Main").html(items.join(''));
        }        
    );
}
function line2form(el) {
    var cell = $(el).parents('tr').children('td');
    $('#fId').val(cell[0].innerHTML);
    $("#fName").val(cell[1].innerHTML);
    $("#fAge").val(cell[2].innerHTML);
    $("#fInterest").val(cell[3].innerHTML);
}
function resetform() {
    $('#fId').val('');
    $("#fName").val('');
    $("#fAge").val('');
    $("#fInterest").val('');
    $('#btnSubmit').val('提交新记录').attr('disabled', 'disabled');
}
function Add() {
    var input = $("#form").serialize();
    $.post(
        'Buttle_Add_Buttle.ashx',
        input,
       ...