1

ここに jsFiddle があります。Internet Explorer と他の 1 つの主要なブラウザーで開いてください。

http://jsfiddle.net/7sARw/47/

jsFiddle で [質問を追加] ボタンをクリックするだけで、その下に行が追加されます。行には、2 行の文字ボタン (各行には 7 文字のボタンが含まれます) と 2 つのボタンが表示されます。

現在、主要なブラウザでは、ボタンがテーブルの中央に配置されていますが、これは問題ありません。しかし、Internet Explorer では中央揃えではなく、左揃えのままです。これを行っていると私が信じる理由は、行を追加するときに HTML がフォーマットされているためです。これは次のようになっているようです:

<tr><td><div><tr><td></td></tr></div></td></tr>

私の質問は、HTML の形式を変更して、有効にするだけでなく、Internet Explorer で追加された行のすべてを中央に配置できるようにするにはどうすればよいですか?

以下は、コードの CSS と jQuery/HTML です。

.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }

.answerBtnsRow{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    cursor:pointer;
    font-size:85%;    
    }    


    .allBtnsRow{
        text-align:center;
        cursor:pointer;
        font-size:85%;  
    }

    .allRemoveBtnsRow{
        text-align:center;
        cursor:pointer;
        font-size:85%;  
    }

以下は Jquery/HTML コードです。

function insertQuestion(form) {

    var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;

    var $tbody = $('#qandatbl > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $questionType = '';

    gQuestionIndex++;



    var $this, i = 0,
        $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if (i % 7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
        $newBtn.appendTo($cell);

        i++;
    });    var $this = $(this);
    var $BtnsClass = '';

    $row = $("<tr/>").appendTo($answer);
    $cell = $("<td/>").appendTo($row);

    if ($questionType == 'True or False' || $questionType == 'Yes or No') {
        $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' style='display: none;' value='Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='Remove All Answers' onClick='removeAll(this);' />");
    } else {
        $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");
    }
    $BtnsClass.appendTo($cell);





    $tr.append($td);
    $td.append($answer);
    $tbody.append($tr);

    count++;
    $('#optionAndAnswer .answerBtns').hide();

    updateAnswer($answer, gQuestionIndex);



}
4

3 に答える 3

1

テーブルを作り<div class='answer'>ます。

于 2012-12-27T07:31:38.740 に答える
0 
var $td = $("<td class='extratd'>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");

おそらく

var $td = $("<td class='extratd' />3. Answer:<br/></td>");
var $answer = $("<table class='answer'><tbody></tbody></table>");

また

$cell = $("<td>3. Answer<br/></td>").appendTo($row);
于 2012-12-27T07:31:48.297 に答える