我正在創建一個表格，該表格的單元格中應該有一行帶有多選標簽欄位。為了實作多選標簽欄位，我使用了一個 jQuery 庫——如下所示——。該表還應該有可能通過單擊“添加新”來允許新條目。但是，當我單擊添加新行按鈕時，允許多選標簽功能作業的庫停止作業。
我不太確定我是否在這里遺漏了一些東西，但此表的最終目標是添加/復制幾行，每一行都有多選標簽欄位。
這是我的代碼（謝謝）：
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Names</th>
<th width="30%">LastName</th>
<th width="30%">Id</th>
<th width="45%">States</th>
<th width="10%">Options</th>
</tr>
<tr>
<td class="name"></td>
<td contenteditable="true" class="lastName"></td>
<td contenteditable="true" class="id"></td>
<td contenteditable="true" class="states">
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="NY">New York</option>
<option value="ME">Medellin</option>
<option value="CM">Ciudad de Mexico</option>
<option value="WY">Wyoming</option>
</select>
</td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">A?adir</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Guardar</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>我的 JS：
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count 1;
var html_code = "<tr id='row" count "'>";
html_code = '<td contenteditable="false" ><select name="states[]" multiple="multiple"><option value="AL">Alabama</option><option value="NY">New York</option></td>';
//html_code = "<td contenteditable='true' class='name'></td>";
html_code = "<td contenteditable='true' class='lastName'></td>";
html_code = "<td contenteditable='true' class='id'></td>";
html_code = '<td contenteditable="true" ></td>';
html_code = "<td><button type='button' name='remove' data-row='row" count "' class='btn btn-danger btn-xs remove'>Eliminar</button></td>";
html_code = "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' delete_row).remove();
});
$('#save').click(function(){
var name = [];
var lastName = [];
var id= [];
var state= [];
$('.name').each(function(){
name.push($(this).text());
});
$('.lastName').each(function(){
lastName.push($(this).text());
});
$('.id').each(function(){
nuip.push($(this).text());
});
$('.state').each(function(){
examenes.push($(this).text());
});
});
});這就是我實作庫的方式：
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});uj5u.com熱心網友回復：
我稍微更改了您的 html 和 JS 代碼 :) 還將保存函式結果轉換為資料模型 json 串列。我希望這將幫助您生成自己的代碼
順便說一句：在下一個問題中，將您的示例 html 和 js 合并到一個代碼片段視窗中
var r = (t)=>$(t).closest("tr").remove();
$(document).ready(function(){
$('#add').click(function(){
let html_code = "<tr>\
<td contenteditable='true' class='name'></td>\
<td contenteditable='true' class='lastName'></td>\
<td contenteditable='true' class='id'></td>\
<td contenteditable='true' class='states'>\
<select class='js-example-basic-multiple' multiple='multiple'>\
<option value='AL'>Alabama</option>\
<option value='NY'>New York</option>\
</select>\
</td>\
<td><button type='button' class='btn btn-danger btn-xs' onclick='r(this)'>Eliminar</button></td>\
</tr>";
$('#crud_table tbody').append(html_code);
});
$('#save').click(function(){
var data = [];
$("#crud_table tbody").find("tr")
.each((i,row)=>{
let rowData = {};
$(row).find("td").each((ii,cell)=>$(rowData).attr($(cell).attr("class"),$(cell).attr("class") =="states" ? $(cell).find("option:selected").text() : $(cell).text()));
data.push(rowData);
});
console.log(data);
});
});<!--importing external libraries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--importing external libraries-->
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<thead>
<tr>
<th width="30%">Names</th>
<th width="30%">LastName</th>
<th width="30%">Id</th>
<th width="45%">States</th>
<th width="10%">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"></td>
<td contenteditable="true" class="lastName"></td>
<td contenteditable="true" class="id"></td>
<td contenteditable="true" class="states">
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="NY">New York</option>
<option value="ME">Medellin</option>
<option value="CM">Ciudad de Mexico</option>
<option value="WY">Wyoming</option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">A?adir</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Guardar</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/477549.html
標籤：javascript html jQuery