jQuery 如何在提交时将字符串转换为数字?
jQuery how to convert string to number while submit?
我有一个带有星期几的 table。当我选中复选框并单击 add
按钮时,它会显示 tr 行,如 Sunday,Thursday,Saturday
,但我希望它在单击 submit
按钮后看起来像 0,4,6
,如何将其转换为号码?
var rowNum = 0;
var dateVals = [];
$('#add').click(function() {
var dateVals = [];
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name'));
});
rowNum++;
var row = '<tr id="row' + rowNum + '" class="dateRows">' + '<td class="rowDays">' + dateVals + '</td>' + '</tr>';
$(row).insertAfter($("#add"));
$('#Date :checked').removeAttr('checked');
});
$('#submit').click(function() {
var dataString = $('.dateRows').map(function() {
var text = $(this).find('.rowDays').text();
return text;
}).get().join('_');
alert(dataString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table id="Date">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>
<input name="Sunday" type="checkbox" value="0">
</td>
<td>
<input name="Monday" type="checkbox" value="1">
</td>
<td>
<input name="Tuesday" type="checkbox" value="2">
</td>
<td>
<input name="Wednesday" type="checkbox" value="3">
</td>
<td>
<input name="Thursday" type="checkbox" value="4">
</td>
<td>
<input name="Friday" type="checkbox" value="5">
</td>
<td>
<input name="Saturday" type="checkbox" value="6">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<button type="submit" id="submit">Submit</button>
</div>
而不是使用
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name')); });
使用以下内容
$('#Date :checked').each(function () {
dateVals.push($(this).val());
});
Is it possible to show 0,1,6_1,2,3_4,5 if I add multiple rows?
如果您想在不更改分隔符的情况下用数字替换日期名称 _
,您可以在此处使用正则表达式。
var data = dataString.replace(/([a-z]+)/ig, function(e) {
return $('[name="' + e + '"]').val();
});
步骤:
- 从字符串中提取日期名称
- 使用 jQuery
中的 attribute-value selector 按名称获取日期值
- 用它的值替换日期名称
var rowNum = 0;
var dateVals = [];
$('#add').click(function() {
var dateVals = [];
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name'));
});
rowNum++;
var row = '<tr id="row' + rowNum + '" class="dateRows">' + '<td class="rowDays">' + dateVals + '</td>' + '</tr>';
$(row).insertAfter($("#add"));
$('#Date :checked').removeAttr('checked');
});
$('#submit').click(function() {
var dataString = $('.dateRows').map(function() {
return $(this).find('.rowDays').text();
}).get().join('_');
var data = dataString.replace(/([a-z]+)/ig, function(e) {
return $('[name="' + e + '"]').val();
});
document.getElementById('result').innerHTML = data;
});
#result {
margin-top: 20px;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<table id="Date">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>
<input name="Sunday" type="checkbox" value="0">
</td>
<td>
<input name="Monday" type="checkbox" value="1">
</td>
<td>
<input name="Tuesday" type="checkbox" value="2">
</td>
<td>
<input name="Wednesday" type="checkbox" value="3">
</td>
<td>
<input name="Thursday" type="checkbox" value="4">
</td>
<td>
<input name="Friday" type="checkbox" value="5">
</td>
<td>
<input name="Saturday" type="checkbox" value="6">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<button type="submit" id="submit">Submit</button>
</div>
<pre id="result"></pre>
我有一个带有星期几的 table。当我选中复选框并单击 add
按钮时,它会显示 tr 行,如 Sunday,Thursday,Saturday
,但我希望它在单击 submit
按钮后看起来像 0,4,6
,如何将其转换为号码?
var rowNum = 0;
var dateVals = [];
$('#add').click(function() {
var dateVals = [];
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name'));
});
rowNum++;
var row = '<tr id="row' + rowNum + '" class="dateRows">' + '<td class="rowDays">' + dateVals + '</td>' + '</tr>';
$(row).insertAfter($("#add"));
$('#Date :checked').removeAttr('checked');
});
$('#submit').click(function() {
var dataString = $('.dateRows').map(function() {
var text = $(this).find('.rowDays').text();
return text;
}).get().join('_');
alert(dataString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table id="Date">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>
<input name="Sunday" type="checkbox" value="0">
</td>
<td>
<input name="Monday" type="checkbox" value="1">
</td>
<td>
<input name="Tuesday" type="checkbox" value="2">
</td>
<td>
<input name="Wednesday" type="checkbox" value="3">
</td>
<td>
<input name="Thursday" type="checkbox" value="4">
</td>
<td>
<input name="Friday" type="checkbox" value="5">
</td>
<td>
<input name="Saturday" type="checkbox" value="6">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<button type="submit" id="submit">Submit</button>
</div>
而不是使用
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name')); });
使用以下内容
$('#Date :checked').each(function () {
dateVals.push($(this).val());
});
Is it possible to show 0,1,6_1,2,3_4,5 if I add multiple rows?
如果您想在不更改分隔符的情况下用数字替换日期名称 _
,您可以在此处使用正则表达式。
var data = dataString.replace(/([a-z]+)/ig, function(e) {
return $('[name="' + e + '"]').val();
});
步骤:
- 从字符串中提取日期名称
- 使用 jQuery 中的 attribute-value selector 按名称获取日期值
- 用它的值替换日期名称
var rowNum = 0;
var dateVals = [];
$('#add').click(function() {
var dateVals = [];
$('#Date :checked').each(function() {
dateVals.push($(this).attr('name'));
});
rowNum++;
var row = '<tr id="row' + rowNum + '" class="dateRows">' + '<td class="rowDays">' + dateVals + '</td>' + '</tr>';
$(row).insertAfter($("#add"));
$('#Date :checked').removeAttr('checked');
});
$('#submit').click(function() {
var dataString = $('.dateRows').map(function() {
return $(this).find('.rowDays').text();
}).get().join('_');
var data = dataString.replace(/([a-z]+)/ig, function(e) {
return $('[name="' + e + '"]').val();
});
document.getElementById('result').innerHTML = data;
});
#result {
margin-top: 20px;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<table id="Date">
<tbody>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>
<input name="Sunday" type="checkbox" value="0">
</td>
<td>
<input name="Monday" type="checkbox" value="1">
</td>
<td>
<input name="Tuesday" type="checkbox" value="2">
</td>
<td>
<input name="Wednesday" type="checkbox" value="3">
</td>
<td>
<input name="Thursday" type="checkbox" value="4">
</td>
<td>
<input name="Friday" type="checkbox" value="5">
</td>
<td>
<input name="Saturday" type="checkbox" value="6">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="button" id="add">Add</button>
</div>
<br>
<div>
<button type="submit" id="submit">Submit</button>
</div>
<pre id="result"></pre>