Поле ввода для следующей строки с помощью CSS или JavaScript без изменения HTML - PullRequest
Новая
       13

Поле ввода для следующей строки с помощью CSS или JavaScript без изменения HTML

0 голосов
/ 04 сентября 2018

Я работаю в Survey, и в системе, в которой я работаю, у меня нет доступа к непосредственному изменению HTML, но я могу добавить CSS или JavaScript к существующему коду.

У меня есть следующий HTML-код, и я хотел бы, чтобы поле ввода находилось прямо под именем. Я могу использовать только идентификаторы, так как классы одинаковы во многих других областях, и я не хочу их менять. Я немного стека, так что если у кого-то есть идея, я был бы очень признателен .. Спасибо! 

<div id="pnlPersonalDetails2">

</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Вы можете использовать + селектор 

#pnlPersonalDetails2 + .surveyquestions td {
  display:block;
}
<div id="pnlPersonalDetails2">

</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>

<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody>
    <tr>
      <td colspan="2" class="pd_question">
        <span id="lbl2"></span>
      </td>
    </tr>
    <tr>
      <td class="pd_label">FIRST NAME<span class="red"> *</span></td>
      <td>
        <input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
      </td>
      <td class="error_label">
        <span id="ctl03" style="visibility:hidden;">Required Field</span>
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 04 сентября 2018

Пожалуйста, проверьте, поможет ли это вам достичь желаемого стиля 

td.pd_label ~ td {
    float: left;
    position: absolute;
    left: 7px;
    margin-top: 1em;
}

Тот же селектор (td.pd_label ~ td) работает и в JavaScript.

...