jquery 动态获取数据 并且点击添加表格

首先我用的是layui的样式

了解并下载layui的地址是：  https://www.layui.com/   

并引入layui.js  和    layui.css

<script src="__PUBLIC__/home/layui/layui.js" charset="utf-8"></script>

<link rel="stylesheet" href="__PUBLIC__/home/layui/css/layui.css"  media="">

下面呢是一个div布局

<div class="layui-form-item">
    <label class="layui-form-label">Author*:</label>
    <div class="layui-input-block">
      <input type="text" name="attach" id="author" style="width: 290px;height: 30px;Float:left;" autocomplete="off" class="layui-input" value="">
      <div class="author_div"></div>
      <div id="addauthor"><br><br>
        <table class="add-author" id="au" border="1px" bordercolor="#D8D8D8"; style="width: 290px;height: 30px;">
            <tr >
              <th style="width: 10px;height: 30px;font-size：1px">Name</th>
              <th style="width: 15px;height: 30px;">EmplID</th>
              <th style="width: 20px;height: 30px;">Depart</th>
              <th style="width: 15px;height: 30px;">Con</th>
            </tr> 
          <tbody>
            <tr id="delauthor">
              <td style="width: 10px;height: 40px;">Wang Fei</td>
              <td style="width: 10px;height: 40px;">DSDelivery1</td>
              <td style="width: 20px;height: 40px;">CT RDA SSI SEN-CN DigitSphere</td>
              <td style="width: 15px;height: 40px;">
                <input type="text" name="contribution_64388" style="width: 35px;height: 10px;text-align:center;" value="100"><a href="javascript:void(0);" οnclick="delete_author()">X</a>
                <input type="hidden" name="author_uid" checked="checked" value="64388" >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

然后是写jquery，当然要把jquery.js文件引入

<script type="text/javascript" src="__PUBLIC__/home/jquery.js"></script>

下面是根据输入内容获取到数据库数据

$(document).ready(function() {
      $("#author").autocomplete({
        source:function(request, response){
                $.ajax({
                url: 'https://kds.siemens.com.cn/3itest/index.php?app=home&mod=User&act=dosearch&jsonp=callback',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'callback',
                data:{
                  "q":$("#author").val(),
                  "limit":10,
                },
                success: function(jsondata) {
                  var authordata = eval(jsondata);
                  var context = "";
                  response($.map(authordata, function(item){
                      var names = item.name+"";
                      var name = names.replace(/\s/g,"%20");
                      var neId = item.uid+"";
                      context = context+"<div class='append_div'><span class='append_span'  οnclick=auth('"+name+"')>"+names+"</span></div>";
                  }));
                  if (context != "") {
                      $(".author_div").html("");/* 清空上一次补全div中的内容 */
                      $(".author_div").append(context);
                      $(".author_div").show();
                  }else{
                      $(".author_div").hide();
                  }
                }
              });
            },
          });
        $("body").mouseup(function(){
            $(".author_div").hide();
            $("#author").val("");
        })
    })

接下来呢，是通过点击获取到的数据在table标签里添加一行数据

function auth(name){
        var reg = /%20/g;
        name = name.replace(reg,' ');
            $.ajax({
              url: 'https://kds.siemens.com.cn/3itest/index.php?app=home&mod=User&act=dosearch&jsonp=callback',
              dataType: 'jsonp',
              jsonp: 'callback',
              jsonpCallback: 'callback',
              data:{
                "q":name,
              },  
              success:function(jsondata){
                  $.each(jsondata,function(i, item) {
                        var aa = '<tr id="delauthor">'
                              + '<td>' + item.name + '</td>'
                              + '<td>' + item.employee_id + '</td>'
                              + '<td>' + item.organization + item.orgcode + '</td>'
                              + '<td><input type="Text" id="bai" style="width:35px;height:10px;" value="100" /><input type="hidden" name="author_uid[]" value='+item.uid+'><input type="hidden" name="contribution_'+item.uid+'" value='+100+'><a href="javascript:void(0);" οnclick="delete_author()">X</a></td>'
                              + '</tr>';
                      $("#au tbody:last").append(aa);
                  }); 
              }   
          });              
        };

最后呢！ 是点击清除掉不需要的表格

    function delete_author(){
      $("#delauthor").remove();
    }

 

暂时没办法截图稍后会把截图补上