在文本框中拆分值，然后将值添加到表的两列中

Question

这是我的html5示例

我需要在product 文本框 B Relief 750 MG | 710 中拆分值。 B Relief 750 MG | 710分为两部分（这里|是定界符），并将拆分后的值添加到表中的相应列中

当我单击“ Add按钮时， B Relief 750 MG应该添加到列product而710 Add到Price

 function add_values() { var $sd = document.getElementById("product").value; if ($sd !== '') { var table = document.getElementById("tblProduct"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name = "chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); cell3.innerHTML = document.getElementById("product").value; var cell4 = row.insertCell(3); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell4.appendChild(element2); cell4.innerHTML = document.getElementById("qty").value; document.getElementById("product").value = ''; document.getElementById("qty").value = ''; } }; function deleteRow() { try { var table = document.getElementById("tblProduct"); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } 

 table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: normal; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } 

 <table id="tblProduct" class="display"> <thead> <tr> <th>Select</th> <th>Sl.No</th> <th>Product(s)</th> <th>QTY</th> <th>Price</th> </tr> </thead> </table> <p> <input type="text" name="product" id="product" placeholder="Type Product's Name " value="B Relief 750 MG | 710"> <ul id="productsuggestions" data-role="listview" data-inset="true"></ul> <br> <input type="number" name="qty" id="qty" placeholder="Type Product's Qty " value="10"> </p> <div> <div id="buttonsAddDelete"> <div class="inner"> <input type="button" name="add" id="add" value="Add" onclick="add_values()"> </div> <div class="inner"> <input type="button" name="delete" id="delete" value="Delete" onclick="deleteRow()"> </div> </div> </div> 

Answer 1

在javascript中使用“ split ”功能。

split（）方法用于将字符串拆分为子字符串数组，并返回新数组。

您可以使用

var data = $sd.split('|');

现在， data[0]将包含字符串“ B Relief 750 MG ”，而data[1]将包含字符串“ 710 ”

请参阅小提琴

Answer 2

 var splited = $('#product').val().split('|'); console.log(splited[0]); "B Relief 750 MG " console.log(splited[1]); " 710"