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>

JSFiddle

而不是使用

$('#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();
});

步骤:

  1. 从字符串中提取日期名称
  2. 使用 jQuery
  3. 中的 attribute-value selector 按名称获取日期值
  4. 用它的值替换日期名称

Live Demo

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>