個人作業爬取論文第一階段

引用的js檔案

<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
      <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
      <script type="text/javascript" src="js/echarts-wordcloud.js"></script>
      <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
 

其中設定了點選在表格中新新增一行的js

            <th><button onclick="addLine()">新增</button> </th>

function addLine(){
    row++;
    var lastLine=document.getElementById("table").lastChild;
    var newnode=document.createElement("tr");
    newnode.innerHTML="<td><select id='guanxi"+row+"'>"+
        "<option value='1'>--AND--</option>"+
        "<option value='2'>--OR--</option>"+
        "</select></td>" +
        "<td><select id='guanjian"+row+"'>"+
        "<option value='2'>--關鍵字--</option>"+
        "<option value='3'>--年份--</option>"+
        "</select></td>" +
        "<td><input id='suo"+row+"' name='suo"+row+"' type='text' class='input'></td>"+
        "<td><button onclick='addLine()'>新增</button> </td>"+
        "<td><button onclick='removeLine(this)'>刪除</button> </td>";
    lastLine.appendChild(newnode);
}
 

lastChild獲取最後一行，這樣在最後直接新增

有新增，就有刪除

function removeLine(obj){
    var table=obj.parentNode.parentNode.parentNode;
    table.removeChild(obj.parentNode.parentNode);
    row--;
}

設定倆個div，點選按鈕，隱藏一個，顯示一個的js設定

function showtab(tabHeaderId,tabContentId) {
    // 1.全部設成未選中格式。
    var cloud = document.getElementById("cloud");
    cloud.className 
 
= "header_button_uncheck";
    var  dataQuery = document.getElementById("dataQuery");
    dataQuery.className = "header_button_uncheck";
    //2.將點選的設定為選中狀態。
    if (tabHeaderId == cloud.id){
        cloud.className = "header_button_check";
    }else{
        dataQuery.className = "header_button_check";
    }
    //3.清理div的顯示狀態
    var content1 = document.getElementById("content1");
    content1.style.display = "none";
    var content2 = document.getElementById("content2");
    content2.style.display = "none";
    //4.設定div的顯示狀態
    if(tabContentId == content1.id){
        content1.style.display = "block";
    }
    else{
        content2.style.display = "block";
    }
}

設定表單提交

<table align="center" id="table">
        <tr>
        <th></th>
        <th>
            <select id="guanjian0">
                <option value="2">--關鍵字--</option>
                <option value="3">--年份--</option>
            </select>
        </th>
        <th><input id="suo0" name="suo0" type="text" class="input"></th>
            <th><button onclick="addLine()">新增</button> </th>
            <th></th>

        </tr>
        <tr>
            <td>
                <select id="guanxi1">
                    <option value="1">--AND--</option>
                    <option value="2">--OR--</option>
                </select>
            </td>
            <td>
                <select id="guanjian1">
                    <option value="2">--關鍵字--</option>
                    <option value="3">--年份--</option>
                </select>
            </td>
            <td><input id="suo1" name="suo1" type="text" class="input"></td>
            <td><button onclick="addLine()">新增</button> </td>
            <td><button onclick="removeLine(this)">刪除</button> </td>
        </tr>
    </table>
      <div style = "margin: 2px 0px ;border: 0px solid red;margin-top: 5px;text-align: center" >
          <button id="suo" name="suo" >查詢</button>
      </div>