动态添加行并实现每行的级联并把值保存到数据库中的实现方法

昨天在做项目过程中遇到过一个问题，虽然问别人，但是给的都是我不太理解的那种代码，一个人一种思维方式，所以决定自己实现，现在把代码和实现方式贴在下面，供大家参考，尤其是那些JS能力不强的人参考，本人的JS能力也是有限。

 

1.jsp表单页面：//页面采用struts2标签 这里的ID A1主要是为了下面增加行做准备

<tr id="a1">
     <td align="center">
      <s:select list="mattypelist" headerKey="0" id="equipments"
       name="equipment" headerValue="--选择设备--" listKey="mtrltpId"
       listValue="mtrltpName" cssStyle="102px" οnchange="checkU(this)"></s:select>
     </td>
     <td align="center">
      <s:select list="{}" id="mate" name="mate" headerKey="0"
       headerValue="--请选择型号--"></s:select>
     </td>
     <td align="center">
      <s:textfield name="amount"></s:textfield>
     </td>
    </tr>

2.表的动态行添加 这是跟网上其它的哥们学的，采用的是克隆的技术

code：

<script type="text/javascript"> 
 function addrow(){
  var newTR = a1.cloneNode(true);
  a1.parentNode.insertAdjacentElement("beforeEnd",newTR);
 } 

</script>

3.实现Ajax的级联：这里需要重点说一下：HTML的本质是一个XML文件，那么我们就可以采用XML的格式来取值，obj是第一个级联传的对象，通过第一个对象点父类节点再点父类节点 那么就是select的tr，取tr的第1个具有TD标签的子元素（值是从0开始） 正好是我的另一个下拉列表的列。

这里的TROBJ为的就是让 第一个下拉列表触发的事件获取到的值能赋值到 与它在同一行的下拉列表上。

var trobj;
//表单验证
function checkU(obj) {
 var id = obj.value;
 // alert(id);
 trobj = obj.parentNode.parentNode;
 createRequest("hhs/ajaxmat.action?id=" + id + "&random=" + new Date());
}
var http_request = false;
function createRequest(url) {
 http_request = false;
 if (window.XMLHttpRequest) {     // Mozilla浏览器
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
   http_request.overrideMimeType("text/xml");     //设置MIME类别
  }
 } else {
  if (window.ActiveXObject) {     // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
    }
   }
  }
 }
 if (!http_request) {
  alert("/u4e0d/u80fd/u521b/u5efaXMLHttpRequest/u5bf9/u8c61/u5b9e/u4f8b/uff01");
  return false;
 }
 http_request.open("GET", url, true);      //这里post与get的区别
 http_request.onreadystatechange = alertContents;     //指定响应方法
 http_request.send(null);                     //这里send的区别
}
function alertContents() {
 if (http_request.readyState == 4) { 
           // 判断请求状态
       //  alert("响应状态值："+http_request.status);
  if (http_request.status == 200) {     // 请求成功，开始处理返回结果
           // alert(http_request.responseText);

//下面的代码是重点中的重点 是我写的Ajax的关键

   trobj.getElementsByTagName("td")[1].innerHTML = http_request.responseText;
               //  alert(http_request.responseText);    //这里alert与deal的区别
  } else {
   if (http_request.status == 500) {
    alert(http_request.responseText);
   }
            //请求页面有错误
   alert("/u60a8/u6240/u8bf7/u6c42/u7684/u9875/u9762/u6709/u9519/u8bef/uff01");
  }
 }
}

4。Ajax响应获取到的值：是设置在action中的

 

/**
  *ajax返回的设备具体型号设备列
  * @return
  * @throws Exception
  */
 public void ajaxMatTyp() throws Exception
 {
  String mid = ServletActionContext.getRequest().getParameter("id");
  ServletActionContext.getResponse().setContentType("text/xml; charset=UTF-8");
  String xml = clientBaseInfo.getMateXml(mid); 
  System.out.println("材料XML："+xml);
  String sb ="<select name='mate' id='mate' style='width:120px'><option>请选择</option>";
  List<Material> ml = clientBaseInfo.qryMateList(xml);
  System.out.println("长度："+ml.size());
  for(int i =0;i<ml.size();i++)
  {
   Material m = ml.get(i);
   sb+="<option value="+m.getMtrlId()+">"+m.getMtrlName()+"</option>";
  }
  sb+="</select>";
  PrintWriter o = ServletActionContext.getResponse().getWriter();
  o.println(sb);
  o.flush();
  o.close();
 } 

 

返回的sb就是被Ajax获取到的http_request.responseText;
5.action中获取值 那只要使用getparemetervalues("xx");就可以获取到参数的数组了。

做完后的效果如下面的贴图：