关于动态插入、删除复杂行的问题

什么意思？ 是输入的时候就显示查询结果吗？ 如果是的话要用ajax

解决方案 »

  1.   

    对不起，真的没理解的你问题，你的意思是动态插入一个tr，还是一个option?
      

  2.   

    如果你熟悉DOM的话，用insertBefore和removeChild吧
      

  3.   

    动态插入行,行里包含多个select，就和上面我写的一样
      

  4.   


     function createSelect()
    {       var inf=document.getElementById("infobody");//这是一个tbody的ID
            var row=document.createElement("tr");
        var cell=document.createElement("td");
            var select1 = document.createElement("select");
            var ooption = new Array();
            ooption[0] = "单位";
            ooption[1] = "姓名";
            ooption[2] = "性别";
            ooption[3] = "身份";
            for(var i=0;i<ooption.length;i++)
            {
                   select1.options[i] = new Option(ooption[i], ooption[i]);
            }
        cell.appendChild(select1);
    row.appendChild(cell);
        inf.appendChild(row);
    }这样就可以了,其它你自己写吧
      

  5.   

    把那些html标记放到字符串中，直接插入不知可否？
      

  6.   

    如果想这样,
    你得用cell.innerHTML,row.innerHTML,inf.innerHTML
    这样非常麻烦,有不直观,
    一般用这方法,更改DOM 的属性变化不大的时候用,
    想你这中情况最好用cell.appendChild,
    row.appendChild,inf.appendChild
      

  7.   

    好久不玩 JS 了，调试了半天，哈
    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <script type="text/javascript">
      <!--
    function getParentByTagName(obj, parentTagName)
    {
    var parent = obj.parentNode;
    while (parent != null && parent.tagName.toLowerCase() != parentTagName.toLowerCase())
    {
    parent = parent.parentNode;
    }
    return parent;
    }function appendRow(obj)
    {
    var curTr = getParentByTagName(obj, "tr");
    var tBody = curTr.parentNode;
    // 最后一样不选空，则增加一行。
    if (curTr.rowIndex == (tBody.rows.length - 1) && obj.value != "")
    {
    tBody.appendChild(curTr.cloneNode(true));
    }
    /*
    // 倒数第二行选空，则删除最后一行！
    // 可选功能，取消注释即可。
    if (curTr.rowIndex == (tBody.rows.length - 2) && obj.value == "")
    {
    tBody.deleteRow();
    }
     */
    }
      //-->
      </script>
     </head> <body>
      <table>
    <tr> 
    <td align="center"> 
    <select name="bracket"> 
    <option value=''> </option> 
    <option value='('>( </option> 
    </select></td> 
    <td align="center"> 
    <select name="D2"> 
    <option value='unitID' >单位 </option> 
    <option value='xm' >姓名 </option> 
    <option value='xb' >性别 </option> 
    <option value='sf' >身份 </option> 
    </select></td> 
    <td align="center"> 
    <select name="compare" onchange="chcode(compare[0],0,mCode[0].value)"> 
    <option value='=' >等于 </option> 
    <option value='LIKE' >模糊等于 </option> 
    <option value='>' >大于 </option> 
    <option value= '&gt;=' >大于等于 </option> 
    <option value=' <' >小于 </option> 
    <option value=' <=' >小于等于 </option> 
    <option value='IN' >包含 </option> 
    <option value='NOT IN' >不包含 </option> 
    <option value=' <>' >不等于 </option> 
    <option value='NOT LIKE' >非模糊等于 </option> 
    </select> </td> 
    <td align="center"><input type="text" name="T1" size="20"><img src="ImgCss/bj.gif" /></td> 
    <td align="center"> 
    <select name="logic" onchange="appendRow(this)"> 
    <option value=''> </option> 
    <option value='AND' >并且 </option> 
    <option value='OR' >或者 </option> 
    <option value=')' >) </option> 
    <option value=') AND' >)并且 </option> 
    <option value=') OR' >)或者 </option> 
    </select> </td> 
    <td align="center">&nbsp; <img src="ImgCss/delete.jpg"  onclick="delCon()"/> </td> 
    </tr>   </table>
     </body>
    </html>
      

  8.   

    补上删除功能，至于拼 sql 就自己来吧！
    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>DHTML.js.dynamicAppendRow.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csdn" />
      <script type="text/javascript">
      <!--
    function getParentByTagName(obj, parentTagName)
    {
    var parent = obj.parentNode;
    while (parent != null && parent.tagName.toLowerCase() != parentTagName.toLowerCase())
    {
    parent = parent.parentNode;
    }
    return parent;
    }function appendRow(obj)
    {
    var curTr = getParentByTagName(obj, "tr");
    var tBody = curTr.parentNode;
    // 最后一样不选空，则增加一行。
    if (curTr.rowIndex == (tBody.rows.length - 1) && obj.value != "")
    {
    tBody.appendChild(curTr.cloneNode(true));
    }
    /*
    // 倒数第二行选空，则删除最后一行！
    // 可选功能，取消注释即可。
    if (curTr.rowIndex == (tBody.rows.length - 2) && obj.value == "")
    {
    tBody.deleteRow();
    }
     */
    }
    function deleteRow(obj)
    {
    var curTr = getParentByTagName(obj, "tr");
    var tBody = curTr.parentNode;
    if (tBody.rows.length > 1)
    {
    tBody.deleteRow(curTr.rowIndex);
    }
    else
    {
    alert("Are you crazy?!");
    }
    }
      //-->
      </script>
     </head> <body>
      <table>
    <tr>
    <td align="center">
    <select name="bracket">
    <option value=''> </option>
    <option value='('>( </option>
    </select></td>
    <td align="center">
    <select name="D2">
    <option value='unitID' >单位 </option>
    <option value='xm' >姓名 </option>
    <option value='xb' >性别 </option>
    <option value='sf' >身份 </option>
    </select></td>
    <td align="center">
    <select name="compare">
    <option value='=' >等于 </option>
    <option value='LIKE' >模糊等于 </option>
    <option value='>' >大于 </option>
    <option value= '&gt;=' >大于等于 </option>
    <option value=' <' >小于 </option>
    <option value=' <=' >小于等于 </option>
    <option value='IN' >包含 </option>
    <option value='NOT IN' >不包含 </option>
    <option value=' <>' >不等于 </option>
    <option value='NOT LIKE' >非模糊等于 </option>
    </select> </td>
    <td align="center"><input type="text" name="T1" size="20"></td>
    <td align="center">
    <select name="logic" onchange="appendRow(this)">
    <option value=''> </option>
    <option value='AND' >并且 </option>
    <option value='OR' >或者 </option>
    <option value=')' >) </option>
    <option value=') AND' >)并且 </option>
    <option value=') OR' >)或者 </option>
    </select> </td>
    <td align="center"><a href="javascript:void(0);" onclick="deleteRow(this)">-X-</a></td>
    </tr>  </table>
     </body>
    </html>
      

  9.   

    楼上方法实现起来真方便,只是有两个问题:
    1:<input type="text" name="T1" size="20">如果已经输入值了,添加的新行将输入的值也带过来了,有什么办法清空么?
    2:我想获取所有动态生成的input和select的value，该怎么实现呢？
      

  10.   

    给动态生成的input和select加点特殊的属性，然后遍历一下就能获取到了。
    如：添加每个input时，document.getElementById("xxx").setAttribute("me","newInput");然后获取所有input，进行遍历查找，哪些是你动态插的，
    document.getElementById("xxx").getAttribute("me")!=null && document.getElementById("xxx").getAttribute("me")=="newInput"即可得到你动态插的所有input
      

  11.   


    已解决，L@_@K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>DHTML.js.dynamicAppendRow.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csdn" />
      <script type="text/javascript">
      <!--
    function $(sId)
    {
    return document.getElementById(sId);
    }
    function getParentByTagName(obj, parentTagName)
    {
    var parent = obj.parentNode;
    while (parent != null && parent.tagName.toLowerCase() != parentTagName.toLowerCase())
    {
    parent = parent.parentNode;
    }
    return parent;
    }function appendRow(obj)
    {
    var curTr = getParentByTagName(obj, "tr");
    var tBody = curTr.parentNode;
    // 最后一样不选空，则增加一行。
    if (curTr.rowIndex == (tBody.rows.length - 1) && obj.value != "")
    {
    var newTr = tBody.appendChild(curTr.cloneNode(true));
    var collInput = newTr.getElementsByTagName("input");
    for (var i=0; i<collInput.length; i++)
    {
    if (collInput[i].type == "text")
    {
    collInput[i].value = "";
    }
    }
    }
    /*
    // 倒数第二行选空，则删除最后一行！
    // 可选功能，取消注释即可。
    if (curTr.rowIndex == (tBody.rows.length - 2) && obj.value == "")
    {
    tBody.deleteRow();
    }
     */
    }
    function deleteRow(obj)
    {
    var curTr = getParentByTagName(obj, "tr");
    var tBody = curTr.parentNode;
    if (tBody.rows.length > 1)
    {
    tBody.deleteRow(curTr.rowIndex);
    }
    else
    {
    alert("Are you crazy?!");
    }
    }
    function getFirstElementNode(parent)
    {
    var child = parent.firstChild;
    while (child.nodeType != 1)
    {
    child = child.nextSilbling;
    }
    return child;
    }
    function joinSql()
    {
    var result = "";
    var oTab = $("tabSql");
    var oCell;
    var oElement;
    for (var i=0; i<oTab.cells.length; i++)
    {
    oCell = oTab.cells[i];
    oElement = getFirstElementNode(oCell);
    switch (oElement.tagName.toLowerCase())
    {
    case "input":
    result += " '" + oElement.value + "'";
    break;
    case "select":
    result += " " + oElement.value;
    break;
    }
    } $("ttaSql").value = result;
    }
      //-->
      </script>
     </head> <body>
      <table id="tabSql">
    <tr>
    <td align="center">
    <select name="bracket">
    <option value=''> </option>
    <option value='('>( </option>
    </select></td>
    <td align="center">
    <select name="D2">
    <option value='unitID' >单位 </option>
    <option value='xm' >姓名 </option>
    <option value='xb' >性别 </option>
    <option value='sf' >身份 </option>
    </select></td>
    <td align="center">
    <select name="compare">
    <option value='=' >等于 </option>
    <option value='LIKE' >模糊等于 </option>
    <option value='>' >大于 </option>
    <option value= '&gt;=' >大于等于 </option>
    <option value='<' >小于 </option>
    <option value='<=' >小于等于 </option>
    <option value='IN' >包含 </option>
    <option value='NOT IN' >不包含 </option>
    <option value='<>' >不等于 </option>
    <option value='NOT LIKE' >非模糊等于 </option>
    </select> </td>
    <td align="center"><input type="text" name="T1" size="20"></td>
    <td align="center">
    <select name="logic" onchange="appendRow(this)">
    <option value=''> </option>
    <option value='AND' >并且 </option>
    <option value='OR' >或者 </option>
    <option value=')' >) </option>
    <option value=') AND' >)并且 </option>
    <option value=') OR' >)或者 </option>
    </select> </td>
    <td align="center"><a href="javascript:void(0);" onclick="deleteRow(this)">-X-</a></td>
    </tr>
      </table>
      <input type="button" value="Join Sql" onclick="javascript:joinSql();" /><br />
      <textarea id="ttaSql" rows="10" cols="60"></textarea>
     </body>
    </html>
      

  12.   

    呵呵，提醒你一下，每个 td 里只能放一个控件，因为偶滴代码与结构相关（getFirstElementNode），
    只能取到每个 td 中第一个 element 的值！另外，请注意防范 sql 注入攻击，自己去查查吧，
    当然如果对数据安全要求不高滴话就算了！
      

  13.   

    dim sql as string
    if compare.selectvalue='等于' then
     sql ="select * from table where 字段='查询条件'  "
    else if compare.selectvalue='LIKE' then
    sql="select * from table where 字段 like '%查询条件%'  "
    else if compare.selectvalue='>' then
    sql="select * from table where 字段 > '查询条件'  ".............end if