Question

形式

<form action="assign_web_menu_action.php" method="post" name="form1" id="form1"  >

<table id='menuAssign'>

<tbody>

        <tr class="clone_row">

  <td> <input type="text" name="menuname[]" id="menuname1" onblur="menuname_validation();"/></td>
  <td> <input type="text" name="formname[]" id="formname1" onblur="formname_validation();"/> </td>
  <td> <input type="text" name="menulevel[]" id="menulevel1" onblur="menulevel_validation();"/> </td>
  <td> <input type="text" name="parentnode[]" id="parentnode1" onblur="parentnode_validation();"/> </td>
  <td> <input type="text" name="menuorder[]" id="menuorder1" onblur="menuorder_validation();"/> </td>
<!-- Build multiselect: -->

<?php
$connect = oci_connect('cfs', 'cfs', 'fal');

$web_user="select * from MENU_USER ";

$array_web_user=oci_parse($connect,$web_user);

//oci_define_by_name($array_tonnage2 ,TONNAGE,$tonnage);
//echo $row_web_user['mu_user_id'];
oci_execute($array_web_user);

?>
<td> 
<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1">
<?php
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS))
{?> 
    <option  value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option>
  <?php
}?>

</select>
</td>
  <td> <button type="button" name="addRow" id="addRow" >AddRow</button></td> 

    </tr>

</tbody>
</table>
<input type="submit" class="submit" value="submit" name="submit" >
<input type="reset" class="reset" name="reset" onclick="firstfocus();">


</form>

我想用添加按钮克隆整行。验证必须与原始行相同，我使用id进行验证，我试过这些链接，但还不足以让我解决这个问题 jquery clone combo box not able to function 和 How to clone a row of inputs with the parent element's function together?

因为它有多选

我用过这个插件 http://js-tutorial.com/bootstrap-multiselect-1012

多重选择就像这样填充

<?php
$connect = oci_connect('cfs', 'cfs', 'fal');

$web_user="select * from MENU_USER ";

$array_web_user=oci_parse($connect,$web_user);

oci_execute($array_web_user);

?>

<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1">
<?php
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS))
{?> 
    <option  value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option>
  <?php
}?>

</select>

js validation

<script>

//验证******************************************** ************************************************** **************************

// After form loads focus will go to First field. 

  function firstfocus()  
  {  
  var uid = document.getElementById('menuname1').focus();  
  return true;  
  } 


// This function will validate first input field.   

  function menuname_validation()  
  {  
  var uid =  document.form1.menuname1;    
  var uid_len = uid.value.length;  
  if (uid_len == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid.focus();  
    }, 0);

  return false;  
  }
   // Focus goes to next field i.e. . 
 window.setTimeout(function ()
    { 
  document.form1.formname1.focus();  
 }, 0);

  return true;
  }




// This function will validate second input field. 

   function formname_validation()  
  {  
  var uid1 =  document.form1.formname1;    
  var uid_len1 = uid1.value.length;  
  if (uid_len1 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid1.focus();  
    }, 0);

  return false;  
  }
   // Focus goes to next field i.e. . 
 window.setTimeout(function ()
    { 
  document.form1.menulevel1.focus();  
    }, 0);

  return true;
  }




// This function will validate third input field. 

   function menulevel_validation()  

  {  

  var uid2 =  document.form1.menulevel1; 
  var numbers = /^[0-9]+$/;    
  var uid_len2 = uid2.value.length;  
  if (uid_len2 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid2.focus();  
    }, 0);

  return false;  
  }


  else{

  if(uid2 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
   window.setTimeout(function ()
    { 
  document.form1.parentnode1.focus();  
    }, 0);

  return true; 

  }
   } 
alert('numeric characters only'); 

window.setTimeout(function ()
    {
  uid2 .focus();  
  return false;  
    }, 0);



  }




// This function will validate fourth input field. 

   function parentnode_validation()  
  { 
  var numbers = /^[0-9]+$/;  
  var uid3 =  document.form1.parentnode1;    
  var uid_len3 = uid3.value.length;  
  if (uid_len3 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid3.focus();  
    }, 0);

  return false;  
  }


  else{

  if(uid3 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
   window.setTimeout(function ()
    { 
  document.form1.menuorder1.focus();  
    }, 0);

  return true; 

  }
 }

alert('numeric characters only'); 

window.setTimeout(function ()
    {
  uid3 .focus();  
  return false;  
    }, 0);

  } 


// This function will validate fifth input field. 



   function menuorder_validation()  
  {
 var numbers = /^[0-9]+$/;   
 var uid4 =  document.form1.menuorder1;
 var uid_len4 = uid4.value.length;  


   if (uid_len4 == 0)  
  {  
  //alert("should not be empty "); 

 window.setTimeout(function ()
    {
  document.form1.multiselect1.focus();  
    }, 0);

  return true;  
  }


  else{


 if(uid_len4 != 0 && uid4 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
  // window.setTimeout(function ()
  //  { 
 // document.form1.menuname2.focus();  
  //  }, 0);

  return true; 

  }
 }

alert('numeric characters only'); 

window.setTimeout(function ()
   {
  document.form1.menuorder1.focus();  
  return false;  
    }, 0);

  } 



</script>

克隆代码

<script type="text/javascript">
    $(document).ready(function(){
        $("#addRow").click(function(){
            var row = "<tr>"+
                   "<td> <input type='text' name='menuname[]' id='menuname' onblur='menuname_validation();'/></td>"+

                     "<td> <input type='text' name='formname[]' id='formname' onblur='formname_validation();'/></td>"+
                     "<td> <input type='text' name='menulevel[]' id='menulevel' onblur='menulevel_validation();'/></td>"+
                       "<td> <input type='text' name='parentnode[]' id='parentnode' onblur='parentnode_validation();'/></td>"+
                        "<td> <input type='text' name='menuorder[]' id='menuorder' onblur='menuorder_validation();'/></td>"+

                    "<td><select class='multiselect' multiple='multiple' name='multiselect[]' id='multiselect2'><option></option></select></td>"+

                   " <td> <button type='button' name='addRow' id='addRow' >AddRow</button></td> "+

                    "</tr>";

            $("#menuAssign tbody").append(row);
             $('.multiselect').multiselect({ maxHeight: 80,refresh:true});


        });
    });
</script>

完整代码.............

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/> 
<meta name="keywords" content="isc" />  
<meta name="description" content="cfs" />
<title>Menu Generation</title>


<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script>
$(document).ready(function() {
    $('.multiselect').multiselect({
            maxHeight: 80,refresh:true
        });
});
</script>
</head>

<style>
   body{
/*width:1400px;
margin:45px auto;
background-color:#f9ebe8
*/
}
   .webmenu li{
        list-style:none!important;
        float:left;
        width: 160px;
        text-align:center;
        border: 1px solid red;
   }
    .webmenu{
        margin-left:-40px!important;
    }

    .webmenu1{
        margin-left:-40px!important;
    }

    .webmenu1 li{
        list-style:none!important;
        float:left;
        width: 150px;
        text-align:center;
        border: 1px solid red;
        margin-bottom: 17px!important;
   }
   .btn{
        padding: 2px 12px!important;
        width:165px;
   }
   .two{
        padding-bottom: 20px;
    }
    .webmenuheading{
        color: #FF0000;
        text-align: center;
    }
    .webmenucontainer{
        border: 1px solid red;
        background: #c0c0c0;
        width: 75%;
        padding-left: 30px;
       /* float: left;*/
        margin:0 auto;
    }
    .two{
        border: 1px solid red;
        background: #c0c0c0;
        width: 12%;
        padding-left: 30px;
        float: left;
        margin-left: 10px;
        padding-right:10px;
    }
    .submit{
        margin-top: 20px;
        margin-bottom: 18px;
    }
    .menuorder{
        width: 150px;
    }

</style>


<body onload="firstfocus();">

<h3 class=webmenuheading>Menu Manager</h3>

<div class=webmenucontainer>
<ul class="webmenu">
  <li>Menu Name</li>
  <li>Form Name</li>
  <li>Level</li>
  <li>Parent Node</li>
  <li>Order</li>
  <li>user</li>
</ul>

<br/>
<div  style="height:140px;overflow: scroll;">
<form action="assign_web_menu_action.php" method="post" name="form1" id="form1"  >

<table id='menuAssign'>

<tbody>

        <tr class="clone_row">

  <td> <input type="text" name="menuname[]" id="menuname1" onblur="menuname_validation();"/></td>
  <td> <input type="text" name="formname[]" id="formname1" onblur="formname_validation();"/> </td>
  <td> <input type="text" name="menulevel[]" id="menulevel1" onblur="menulevel_validation();"/> </td>
  <td> <input type="text" name="parentnode[]" id="parentnode1" onblur="parentnode_validation();"/> </td>
  <td> <input type="text" name="menuorder[]" id="menuorder1" onblur="menuorder_validation();"/> </td>
<!-- Build multiselect: -->

<?php
$connect = oci_connect('cfs', 'cfs', 'fal');

$web_user="select * from MENU_USER ";

$array_web_user=oci_parse($connect,$web_user);

//oci_define_by_name($array_tonnage2 ,TONNAGE,$tonnage);
//echo $row_web_user['mu_user_id'];
oci_execute($array_web_user);

?>
<td> 
<select class="multiselect" multiple="multiple" name="multiselect[]" id="multiselect1">
<?php
while($row_web_user = oci_fetch_array($array_web_user, OCI_ASSOC+OCI_RETURN_NULLS))
{?> 
    <option  value="<?php echo $row_web_user['MU_USER_ID'];?>"><?php echo $row_web_user['MU_LOGIN_NAME'];?> </option>
  <?php
}?>

</select>
</td>
  <td> <button type="button" name="addRow" id="addRow" >AddRow</button></td> 

    </tr>

</tbody>
</table>
<input type="submit" class="submit" value="submit" name="submit" >
<input type="reset" class="reset" name="reset" onclick="firstfocus();">


</form>
</div>

</div>

</body>

<script type="text/javascript">
    $(document).ready(function(){
        $("#addRow").click(function(){
            var row = "<tr>"+
                   "<td> <input type='text' name='menuname[]' id='menuname' onblur='menuname_validation();'/></td>"+

                     "<td> <input type='text' name='formname[]' id='formname' onblur='formname_validation();'/></td>"+
                     "<td> <input type='text' name='menulevel[]' id='menulevel' onblur='menulevel_validation();'/></td>"+
                       "<td> <input type='text' name='parentnode[]' id='parentnode' onblur='parentnode_validation();'/></td>"+
                        "<td> <input type='text' name='menuorder[]' id='menuorder' onblur='menuorder_validation();'/></td>"+

                    "<td><select class='multiselect' multiple='multiple' name='multiselect[]' id='multiselect2'><option>2</option><option>1</option></select></td>"+

                   " <td> <button type='button' name='addRow' id='addRow' >AddRow</button></td> "+

                    "</tr>";

            $("#menuAssign tbody").append(row);
             $('.multiselect').multiselect({ maxHeight: 80,refresh:true});


        });
    });
</script>

<script>
    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }

//var elmnt = document.getElementsById("DIV")[0];
//var cln = elmnt.cloneNode(true);
//document.body.appendChild(cln);    
//validation************************************************************************************************************************

// After form loads focus will go to First field. 

  function firstfocus()  
  {  
  var uid = document.getElementById('menuname1').focus();  
  return true;  
  } 


// This function will validate first input field.   

  function menuname_validation()  
  {  
  var uid =  document.form1.menuname1;    
  var uid_len = uid.value.length;  
  if (uid_len == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid.focus();  
    }, 0);

  return false;  
  }
   // Focus goes to next field i.e. . 
 window.setTimeout(function ()
    { 
  document.form1.formname1.focus();  
 }, 0);

  return true;
  }




// This function will validate second input field. 

   function formname_validation()  
  {  
  var uid1 =  document.form1.formname1;    
  var uid_len1 = uid1.value.length;  
  if (uid_len1 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid1.focus();  
    }, 0);

  return false;  
  }
   // Focus goes to next field i.e. . 
 window.setTimeout(function ()
    { 
  document.form1.menulevel1.focus();  
    }, 0);

  return true;
  }




// This function will validate third input field. 

   function menulevel_validation()  

  {  

  var uid2 =  document.form1.menulevel1; 
  var numbers = /^[0-9]+$/;    
  var uid_len2 = uid2.value.length;  
  if (uid_len2 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid2.focus();  
    }, 0);

  return false;  
  }


  else{

  if(uid2 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
   window.setTimeout(function ()
    { 
  document.form1.parentnode1.focus();  
    }, 0);

  return true; 

  }
   } 
alert('numeric characters only'); 

window.setTimeout(function ()
    {
  uid2 .focus();  
  return false;  
    }, 0);



  }




// This function will validate fourth input field. 

   function parentnode_validation()  
  { 
  var numbers = /^[0-9]+$/;  
  var uid3 =  document.form1.parentnode1;    
  var uid_len3 = uid3.value.length;  
  if (uid_len3 == 0)  
  {  
  alert("should not be empty "); 

 window.setTimeout(function ()
    {
  uid3.focus();  
    }, 0);

  return false;  
  }


  else{

  if(uid3 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
   window.setTimeout(function ()
    { 
  document.form1.menuorder1.focus();  
    }, 0);

  return true; 

  }
 }

alert('numeric characters only'); 

window.setTimeout(function ()
    {
  uid3 .focus();  
  return false;  
    }, 0);

  } 


// This function will validate fifth input field. 



   function menuorder_validation()  
  {
 var numbers = /^[0-9]+$/;   
 var uid4 =  document.form1.menuorder1;
 var uid_len4 = uid4.value.length;  


   if (uid_len4 == 0)  
  {  
  //alert("should not be empty "); 

 window.setTimeout(function ()
    {
  document.form1.multiselect1.focus();  
    }, 0);

  return true;  
  }


  else{


 if(uid_len4 != 0 && uid4 .value.match(numbers))
  {  
  // Focus goes to next field i.e.   
  // window.setTimeout(function ()
  //  { 
 // document.form1.menuname2.focus();  
  //  }, 0);

  return true; 

  }
 }

alert('numeric characters only'); 

window.setTimeout(function ()
   {
  document.form1.menuorder1.focus();  
  return false;  
    }, 0);

  } 







</script>

Answer 1

最合适和最新的技术是使用templates

<table>
    <thead>
    </thead>
    <tbody id="menuContainer">
    </tbody>
</table>

<script type="text/template" id="tplMenu">
    <tr class="clone_row">
        <td>...</td>
    </tr>
</script>

您可以$("#tplMenu")访问模板，并在tr内设置HTML value的{{1}}。

即。 controls

$("#tplMenu").find("#menuname1").val('XYZ'); $("#menuContainer").append($("#tplMenu").html());用于放置在共享位置的代码重用性，因此它也以其他形式使用。您只需要包含该特定模板。

如何克隆输入行，验证必须与原始行相同

1 个答案: