【问题标题】:I have a table in jsp which have 5 rows and 3 colums and i wanted to print it in servlet how can i do this?我在 jsp 中有一个 5 行 3 列的表,我想在 servlet 中打印它我该怎么做?
【发布时间】:2015-10-17 03:26:18
【问题描述】:
<script>
function addRow() {

    var medicinename = document.getElementById("medicinename");
    var time = document.getElementById("time");
    var duration = document.getElementById("duration");
    var when = document.getElementById("when");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= medicinename.value;
    row.insertCell(2).innerHTML= time.value;
    row.insertCell(3).innerHTML= duration.value;
    row.insertCell(4).innerHTML= when.value;
    document.getElementById('medicinename').value='';
    document.getElementById('time').value='';
    document.getElementById('duration').value='';
    document.getElementById('when').value='';
}

function deleteRow(obj) {

    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);

}

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");

    var table = document.createElement('TABLE');
    table.border='1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    for (var i=0; i<3; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);

       for (var j=0; j<4; j++){
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       }
    }
    myTableDiv.appendChild(table);

}

</script>
<table>
    <tr>
        <td>Medicine Name:</td>
        <td><input type="text" id="medicinename"></td>
    </tr>
    <tr>
        <td>Time:</td>
        <td><input type="text" id="time">
    </tr>
    <tr>
        <td>Duration:</td>
        <td><input type="text" id="duration">
    </tr>
    <tr>
        <td>When?</td>
        <td><input type="text" id="when">
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<div id="mydata">
<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Medicine Name</b></td>
        <td><b>Medicine Time&nbsp</b></td>
        <td><b>Medicine Duration</b></td>
        <td><b>Medicine When?</b></td>
    </tr>
</table>

这里是 JAVASCRIPT,我通过它在 JSP 表中添加元素 这是我在 JSP 中显示数据的 4 个字段和表 hello = request.getParameter("");//这里应该带什么 System.out.println(hello);

【问题讨论】:

  • @Burning 整张桌子
  • @Utkarsh 等我发布了。
  • 这可能吗@Crystal
  • 这可能吗@Utkarsh
  • @Utkarsh 先生,我知道你在说什么......但现在真的不知道 Ajax 调用将这些数据发送到你的 servlet......你能帮忙解决这个问题吗?我将不胜感激你

标签: javascript java mysql jsp servlets


【解决方案1】:

您需要通过使用formAjax 来收集JavaScript 中的表数据,以将此数据发送到您的servlet。 servlet中的请求参数是无法获取表数据的,除非你发送。

表单示例

<form action="login" method="post">
<input type="text" name="uname"  placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="button" >Login</button>
</form>

此表单通过unamepassword 登录Servlet

您可以像这样传递表中的每个数据...! 在 servlet 端,您可以使用此代码获取数据

String uname = request.getParameter("uname");
String password = request.getParameter("password");

试试吧..!

【讨论】:

  • 我知道,但我有桌子
【解决方案2】:

因为您使用的是 jQuery 和 Servlet,但您编辑了问题并删除了代码。但这里有一些使用 jQuery 的代码示例。

样本表:

 <table id='table_id'>
        <th>Column1</th><th>Column2</th>
        <tr>
            <td>1</td><td>2</td>
        </tr>
          <tr>
            <td>3</td><td>4</td>
        </tr>
    </table>

首先,您需要在 javascript 中遍历您的表,创建一个包含表数据的 JSON 对象。大概是这样(看这里给出的表结构)

<script type="text/javascript" >
    function collectData(){
        var tableData = [];
        $('#table_id tr').each(function(){
            var $this = $(this);
            var tds = $this.find('td');
            var i = 0;
            //if we have data in that row
            if(tds.length){
                var rowData = {
                    column1:tds[0].innerHTML,
                    column2:tds[1].innerHTML,
                }
                tableData.push(rowData);
            }
        });
        console.log(tableData);

       // Send it via AJAX

        $.ajax({
             url: '/yourServletName', // Change name to your servlet
             type: 'POST', 
             dataType: 'json',
             data: {objarray: JSON.stringify(tableData)},
             success: function(result) {
                alert('SUCCESS');
             }
        });
    }

JSON 会是这样的:

{
  [{'column1':1,'column2':2}, {'column1':3,'column2':4}]
}

现在在您的 servlet 代码中使用

访问这些数据
 String tableArray = request.getParameter("objarray"). 

但是您需要将 JSON 转换为 Java Pojo 对象。创建一个类似于您的表的类并使用任何库(如 jackson 或 gson)解析 JSON

public class TableData{
   private String column1;
   private String column2;

   public String getColumn1(){
        return column1;
   }

   public void setColumn1(String column1){
        this.column1 = column1;
   }

   public String getColumn2(){
        return column2;
   }

   public void setColumn2(String column2){
        this.column2 = column2;
   }
}

GSON教程给here

【讨论】:

  • thanx 很多。我坚持使用我的代码,这就是为什么我编辑以获得更好的解决方案...以及thanx 帮助我尝试并让你知道。
  • 是的。但没有得到。看到我在 jsp 中有 4 个字段,当我按下按钮时有一个按钮,我的所有文本字段包含的数据都存储在表中,它仅适用于 jsp,它工作得很好。但我的问题是我想捕捉我填写的应该打印的表格。但不知道如何捕捉参数和哪个参数。关于 AJAX 和 JSON,我真的不知道。等待我更新我的代码只是检查它跨度>
【解决方案3】:

如另一个答案中所述,要么在表单中使用 input 元素,要么使用此处另一个答案中给出的 JSON 对象。

表单输入法

HTML 或 JSP

    <table>
        <tr>
            <td>Medicine Name:</td>
            <td><input type="text" id="medicinename"></td>
        </tr>
        <tr>
            <td>Time:</td>
            <td><input type="text" id="time">
        </tr>
        <tr>
            <td>Duration:</td>
            <td><input type="text" id="duration">
        </tr>
        <tr>
            <td>When?</td>
            <td><input type="text" id="when">
            <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

    <div id="mydata">

    <form action="yourServletName" method="post">
    <table id="myTableData"  border="1" cellpadding="2">
        <tr>
            <td>&nbsp;</td>
            <td><b>Medicine Name</b></td>
            <td><b>Medicine Time&nbsp</b></td>
            <td><b>Medicine Duration</b></td>
            <td><b>Medicine When?</b></td>
        </tr>
    </table>
    <button type="submit" class="button" >Submit</button>
    <!-- Update the rowCount on Submitting the button -->
     <input type="hidden" id="rowCount" value="" />
    </form>
   </div>

在表格中添加输入的JS文件,你可以:

function addRow() {

    var medicinename = document.getElementById("medicinename");
    var time = document.getElementById("time");
    var duration = document.getElementById("duration");
    var when = document.getElementById("when");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= '<input type="text" name="'+'rowMedicine'+rowCount+'" value="'+medicinename.value+'" readonly />';
    row.insertCell(2).innerHTML= '<input type="text" name="'+'rowTime'+rowCount+'" value="'+time.value+'" readonly />';
    row.insertCell(3).innerHTML= '<input type="text" name="'+'rowDuration'+rowCount+'" value="'+duration.value+'" readonly />';
    row.insertCell(4).innerHTML= '<input type="text" name="'+'rowWhen'+rowCount+'" value="'+when.value+'" readonly />';
    document.getElementById('medicinename').value='';
    document.getElementById('time').value='';
    document.getElementById('duration').value='';
    document.getElementById('when').value='';
}

function deleteRow(obj) {

    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
}

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");

    var table = document.createElement('TABLE');
    table.border='1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    for (var i=0; i<3; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);

       for (var j=0; j<4; j++){
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       }
    }
    myTableDiv.appendChild(table);

} 

在您的 servlet 中,使用 request.getParameter 访问值。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Now, you can get the parameter from input elements using name
    String rowMedicine  = request.getParameter("rowMedicine1");
    //Similarly get the values of all parameters using names 

    //get the row count 
    //iterate through it and save it in your database


}

【讨论】:

  • servlet 控制台返回 null
  • 你更新了你的jsp还是html,我已经从jsp中添加了HTML?提供您的 servlet 代码。
  • 在 servlet 控制台中返回 NULL
  • String rowMedicine = request.getParameter("rowMedicine1"); System.out.println(rowMedicine);在小服务程序中
  • 还是一样的结果
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-17
  • 2023-02-04
  • 2021-07-16
  • 1970-01-01
相关资源
最近更新 更多