如何使用 JQuery 根据 A 列的内容更改 B 列的内容？

Question

我硬编码了一个包含 4 列（req、label、type、customise）的表，其中行数取决于用户。在“类型”列中将有一个带有多个选项的选择元素，并且根据所选选项，相邻“自定义”列中显示的内容将发生变化。用户可以通过 JQuery 成功地将新行添加到表中。

我已经设法更改了“自定义”列的内容，但是，无论用户添加多少行，它总是会更改第一行的内容。

我认为伪代码是这样的：

if(rowID === 3)
{
  switch(rowID3.type)
  {
    case "dropdownbox":
      rowID3.columnID4.content = dropdown box
      break;
    case "radiobox":
      rowID3.columnID4.content = radio box
      break;
  }
}

解释我的伪代码：

对于特定的rowID，在选择元素内的选项之间切换，如果选项是下拉框，则将相邻列的内容更改为选择元素。

我以前用过：

    $(document).on('change', 'select[name="type"]', function()
    {
    console.log($(this).val())
    var selected = $(this).val();

switch(selected)
            {
                case "type":
                    break;
                case "header":
                    $('#customise' + count).empty();
                    $('#customise' + count).append('Header');
                    break;

插入新行代码：

$required = "<input type='checkbox' name='check' id='required" + count + "'>";
        $label = "<input type='text' placeholder='Enter your label' id='label" + count + "'></input>";
        $type = "<SELECT name='type' ><OPTION>Type</option><OPTION value='header'>Header</option><OPTION value='hr'>HR</option><OPTION value='textbox'>Text Box</option><OPTION value='datefield'>Date Field</option><OPTION value='person'>Person</option><OPTION value='dropdownbox'>Dropdown Box</option><OPTION value='image'>Image</option><OPTION value='checkboxgroup'>Checkbox Group</option><OPTION value='radiogroup'>Radio Group</option><option>" + count + "</option></select>";
        $values = "<span id='values" + count +"'";

        $element = "<tr class='child'> <td>" + $required + "</td> <td>" + $label + "</td> + <td>" + $type + "</td> <td>" + $values + "</td>";

我的问题： 如何根据 A 列的值更改 B 列的内容，当用户单击添加按钮时，这两者都是通过 JQuery 插入的？

Answer 1

您要在表格中修改什么或应该触发修改的内容并不完全清楚。但是，下面应该向您展示使其工作所需的概念。

请注意，我的表格从一行开始。在页面加载时，读取该行并将 html 作为数据属性存储在表本身上，然后删除该行。稍后，当用户单击按钮时，代码会复制到存储的 html 并将该广告添加到该行。我发现这种添加统一动态内容的方法比使用字符串连接更容易管理

var $table = $('#my-table')
var $initialRow = $table.find('tbody tr:eq(0)');
$table.data('cloned-row', $initialRow[0].outerHTML);
$initialRow.remove();

$('.add').click(function() {
  $table.append($($table.data('cloned-row')))
});
$table.on('change', '[name="type"]', function() {
  var $this = $(this);
  var type = $this.val();
  var curRowIndex = $table.find('[name="type"]').index($this);
  var $curRow=$table.find('tbody tr').eq(curRowIndex);
  var $elementToModify = $curRow.find('td:eq(1)').find('input');
  switch (type) {
    case 'header':
      $elementToModify.css('background-color','red');
      break;
    case 'hr':
      $elementToModify.css('background-color','grey');
      break;
    case 'textbox':
      $elementToModify.css('background-color','teal');
      break;
    case 'datefield':
      $elementToModify.css('background-color','black');
      break;
    case 'person':
      $elementToModify.css('background-color','purple');
      break;
    case 'dropdownbox':
      $elementToModify.css('background-color','green');
      break;
    case 'image':
      $elementToModify.css('background-color','blue');
      break;
    case 'checkboxgroup':
      $elementToModify.css('background-color','chucknoris');
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-info add">Add new row</button>

<table id="my-table" class="table">
  <thead>
    <tr>
      <td>Required</td>
      <td>Label</td>
      <td>Type</td>
      <td>Count</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="check">
      </td>
      <td>
        <input type="text" placeholder="Enter your label" />
      </td>
      <td>
        <SELECT name="type">
          <OPTION>Select a type</OPTION>
          <OPTION value="header">Header</OPTION>
          <OPTION value="hr">HR</OPTION>
          <OPTION value="textbox">Text Box</OPTION>
          <OPTION value="datefield">Date Field</OPTION>
          <OPTION value="person">Person</OPTION>
          <OPTION value="dropdownbox">Dropdown Box</OPTION>
          <OPTION value="image">Image</OPTION>
          <OPTION value="checkboxgroup">Checkbox Group</OPTION>
          <OPTION value="radiogroup">Radio Group</OPTION>
          <option>count</option>
        </SELECT>
      </td>
      <td><span class="values"></span></td>
    </tr>

  </tbody>

</table>