Question

我需要你的帮助。试图在php + jquery中构建表单，并在某些功能方面遇到问题例如，我有这段代码：

<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
    <select name="store[product][]" required>
    <option value="" selected="selected">-Product-</option>
    <option value="430">OCTA</option>
    <option value="440">KASKO</option>
    <option value="19041">TRAVEL</option>
    <option value="19063">HOUSEHOLD</option>
    </select>
</td>
    <!-- /Product selector -->
</table>
    <input type="submit" value="ok">

我该怎么办？如果选择的值是430或440，那么在右侧插入 s

<td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>
<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>
            <td><a class="del" href="#">DELETE BUTTON</a></td>

如果选择的值为19041或19063，则插入

<td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>
            <td><a class="del" href="#">DELETE BUTTON</a></td>

我需要在我写的地方添加button和-delete button：

<a class="del" href="#">DELETE BUTTON</a>

但是对于datepicker功能，我需要输入的id是唯一的，例如：id =“location1”，在下一个添加的行id =“location2”。

Answer 1

JsFiddle

    $("#productselect").change(function(){
 var select = document.getElementById("productselect");
var selecedproduct = select.options[select.selectedIndex].value;   
$("tr[id^='forselect']").remove();
if(selecedproduct==430 || selecedproduct==440 )
{
var html ='<tr id="forselect"><td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>';
html +='<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>';
html +='<td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';   
html +='<tr id="forselect"><td><a  href="#" OnClick="adddatepicker();return false;">add datepicker </a> </td></tr>';      
$("#MultiRow").append(html);

}
else if(selecedproduct==19041 || selecedproduct==19063 )
{
var html ='<tr id="forselect"><td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>';
html +=' <td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td><a  href="#" OnClick="adddatepicker();return false;">add datepicker </a> </td></tr>';   


$("#MultiRow").append(html);
}


});

deldatepicker = function deldatepicker(id)
{
$("#remove"+id).remove();
}
adddatepicker = function adddatepicker()
{
var N = $("input[id^='location']").length;N++;    
var html ='<tr id="remove'+N+'"><td><input type="text"id="location'+N+'" placeholder="date"></td><td><button OnClick="deldatepicker('+N+')">delete datepicker </button> </td></tr>';
$("#MultiRow").append(html); 
$("#location"+N).datepicker();
}

removetags = function removetags()
{
$("tr[id^='forselect']").remove();  
}

它可以帮助你工作。

Answer 2

在这里。由于你需要id是唯一的，我使用了Date.now（）然后是object.now.getUTCMilliseconds（）。这将确保当您删除并重新插入具有相同rowIndex的另一行时该事件不会崩溃。其余的都是微不足道的！

＆＃13;

jQuery(document).ready(function(){
  jQuery('select').on('change', function(e){
  
    var tr = jQuery(this).closest('tr').get(0);
    var cell = tr.insertCell(1);
    var now = Date.now();
    
    switch(jQuery('option:selected', this).val()){
        case '430':
        case '440':
        cell.innerHTML = "<td><input type='text' id='motor[]' name='multiarray[vehicle_type][]'></td><td><input type='text' id='deadline[]' name='multiarray[end_date][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
        break;
        cell.innerHTMl = "<td><input type='text' id='location"+now.getUTCMilliseconds()+"[]' name='multiarray[travel_location][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
        case '19041':
        case '19063':
        
        break;
    }
   
    
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
    <select name="store[product][]" required>
    <option value="" selected="selected">-Product-</option>
    <option value="430">OCTA</option>
    <option value="440">KASKO</option>
    <option value="19041">TRAVEL</option>
    <option value="19063">HOUSEHOLD</option>
    </select>
</td>
    <!-- /Product selector -->
</table>
    <input type="submit" value="ok">

＆＃13;

Jquery与选择器中的自适应表格一起形成

2 个答案: